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>

You might have more luck when the `Grid.Visibility` is set to `Hidden` rather than `Collapsed` as when it is set to `Collapsed`, it is completely removed from the UI. — Sheridan, Aug 21 '14 at 14:36
Why would you need to bind to the width of a column that has a fixed width already set on it? Why not just put `Width="100"` on them so they're congruent to the width of Column 0 and be done? — Chris W., Aug 21 '14 at 14:43
@Sheridan According to what i've read about the "hidden" property it seems pretty useful. But I'm developing a windows phone 8.1 app and this uses silverlight and theres no hidden property in "Visibility". I'm sorry I didnt mention that, I also edited the tag from wpf to silverlight. — frichter, Aug 21 '14 at 15:17
@ChrisW. I want to bind to Column1, this one has no fixed width. Or is there a "pagewidth" field? So I could do "width = pagewidth - 100" — frichter, Aug 21 '14 at 15:19

score 1 · Accepted Answer · answered Aug 22 '14 at 00:25

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.

score 0 · Answer 2 · edited May 23 '17 at 11:49

0

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.

edited May 23 '17 at 11:49

Community

1
1

answered Aug 21 '14 at 14:48

Sheridan

68,826
24
143
183

without the Visibility set to Collapsed, the width binding works fine. – frichter Aug 21 '14 at 15:21
Im binding to Column1.ActualWidth. This is of type double,too. Guess that is why it works without the visibility set – frichter Aug 21 '14 at 15:28
Ahh, that would explain it. – Sheridan Aug 21 '14 at 15:33

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

2 Answers2