Binding width to a columnWidth of a grid that is not visible in XAML

Question

im trying to bind the width of a button and a TextBox to the width of a column they are in. Additionally i want to change the visibility of the whole grid. I set visibility to "Collapsed" and in the code behind file i change the visibility to visible

C#:

Grid1.Visibility = Visibility.Visible;

The TextBlocks in the Grid are visible, but the Textbox and the button are not, i guess the width is 0, because of the grid being invisible. Whats the best way to tell the button to update the width after changing the visibility to visible?

This is the xaml code

<Grid x:Name="Grid1"  Margin="0,100,0,0"   Visibility="Collapsed"> <!--HERE -->
    <Grid.ColumnDefinitions>
        <ColumnDefinition x:Name="Column0"  Width="100"/>
        <ColumnDefinition x:Name="Column1"  Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition Height="60"/>
        <RowDefinition Height="80"/>
    </Grid.RowDefinitions>
    <TextBlock Grid.Column="1" Grid.Row="0" HorizontalAlignment="Left"   TextWrapping="Wrap" Text="{Binding MaterialName, Mode=OneWay}" VerticalAlignment="Center" FontSize="40"/>
    <TextBlock Grid.Column="0" Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Center"  TextWrapping="Wrap" Text="Anzahl:" FontSize="30"/>
    <TextBox 
        Grid.Column="1" 
        Grid.Row="1" 
        x:Name="QuantityTextBox" 
        VerticalAlignment="Center" 
        HorizontalAlignment="Left" 
        Height="72" TextWrapping="Wrap" 
        Text="{Binding Quantity, Mode=TwoWay}" 
        Width="{Binding ElementName=Column1, Path=ActualWidth}"/><!-- HERE -->

    <Button 
        Grid.Column="1"
        Grid.Row="2"
        Width="{Binding ElementName=Column1, Path=ActualWidth}"
        Content="Content1" 
        HorizontalAlignment="Left"  
        VerticalAlignment="Top" 
        x:Name="ButtonName"
        Click="Button_Click"/>
</Grid>

Answer 1

If I understand correctly, you want the TextBox and Button to Stretch to the Width of the Grid.Column they are in. If so, the HorizontalAlignment property on your TextBox and Button are causing the problem. The default HoriziontalAlignment is Stretch so you shouldn't need to define any HorizontalAlignment (or Width) and the controls will size to fit available width. Try this:

<TextBox 
    Grid.Column="1" 
    Grid.Row="1" 
    x:Name="QuantityTextBox" 
    VerticalAlignment="Center" 
    Height="72" TextWrapping="Wrap" 
    Text="{Binding Quantity, Mode=TwoWay}" ><!-- HERE -->

<Button 
    Grid.Column="1"
    Grid.Row="2"
    Content="Content1" 
    VerticalAlignment="Top" 
    x:Name="ButtonName"
    Click="Button_Click"/>

It's also helpful to set ShowGridLines="True" on your Grid when dealing with layout issues.

Answer 2

I don't think that your problem is Visibility related (or at least just Visibility related). I just remembered that you can't directly data bind a ColumnDefinition.Width property to a Button.Width property because they are of different types. The Button.Width property is obviously of type double , but the ColumnDefinition.Width property is actually of type GridLength .

Instead, you would have to data bind between the two using some sort of IValueConverter . I just found one that you could use from the answer to the How do I databind a ColumnDefinition's Width or RowDefinition's Height? question that you could use.

Of course, once you have done that, you might still have problems because of the Visibility issue, so we might have to return to that later.