How to resize control according to another control ? (WPF)

Question

I have a Label & a Border(the line) which I want to show as follows

The problem is client's name can be of any size and then it overlaps on the line. Is there any way to relate the line to the size of the label?

Note: Both components are in the same cell of Grid.

Answer 1

That's what Grid is for. You can put a grid inside the cell of a grid, or you could use the outer grid in combination with ColumnSpan:

<Grid MaxWidth="240">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <Label Content="Client Name" Grid.Column="0" />
    <Border Grid.Column="1" ... />
</Grid>

The first column gets as much space as it needs, the second as much as it can get (which can be more, or less, than it needs). The MaxWidth which I put on the grid is optional. it makes sure the Client Name is cut off if it exceeds a certain length. There are several other ways of doing this, but I find Grid is the most flexible and the easiest to maintain, despite requiring more characters to write.

The approach given by kidshaw:

<DockPanel LastChildFill="True">
    <Label Content="Client Name" DockPanel.Dock="Left" />
    <Border ... />
</DockPanel>

The next one will draw the label on top of the border, but requires knowing the background color, which won't work if the background is a gradient or image:

<Border ... />
<Label HorizontalAlignment="Left" Content="Client Name" Background="White" />

Here's a different question that, although the question asked is quite different, has the same answers: How to get StackPanel's children to fill maximum space downward?

Answer 2

Peter offers a good answer +1.

An alternative if interested is the dock panel.

Set both controls to left and set the panel to last child fill...

<DockPanel LastChildFill="True">
<Label DockPanel.Dock="Left>
Label text
<\Label>
<Path dockpanel.dock="Left"/>
<\DockPanel>

Answer 3

I post this example although plenty of ones was mentioned already.

  <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Width="125">
    <TextBox Text="Lie" Name="Label1" MaxWidth="{Binding RelativeSource={RelativeSource AncestorType=StackPanel}, Path=Width}"/>
    <Border Background="CadetBlue" Height="5">
        <Border.Width>
            <MultiBinding Converter="{StaticResource Converter}">
                <Binding RelativeSource="{RelativeSource AncestorType=StackPanel}" Path="Width"/>
                <Binding ElementName="Label1" Path="ActualWidth"/>
            </MultiBinding>
        </Border.Width>
    </Border>
  </StackPanel>

[ValueConversion(typeof(double), typeof(double))]
public class MyConverterS : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        double panelWidth, elementWidth;
        Double.TryParse(values[0].ToString(), out panelWidth);
        Double.TryParse(values[1].ToString(), out elementWidth);
        if (panelWidth - elementWidth <= 0)
            return 0;
        return panelWidth - elementWidth;
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}