CODEWITHSUNDEEP
wpfxaml
fyodorfranz
fyodorfranz

Reputation: 486

Grid column not collapsing to fit contents after width resize

I have a grid column that contains a treeview which can shrink to a width of 16 when a ToggleButton is pressed. The column is set to Width="Auto" which I assume is responsible for the shrinking behavior.

The problem is that to the right of the column, there is a grid splitter, so that the user can increase/decrease the width as they see fit. If the user does this, and then presses the ToggleButton, the contents of the column shrink to 16, but the column itself does not.

Does anyone know how I can ensure that the column shrinks in these scenarios? I'm guessing it has to do with the column width being changed from auto to a definite value, but I can't think of how to fix that once the contents shrink. Here's my code so far:

<Grid Name="ContentGrid" HorizontalAlignment="Stretch" Grid.Row="1" Grid.Column="0">

            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" x:Name="TreeColumn"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*" MinWidth="400" />

            </Grid.ColumnDefinitions>

            <UserControl DockPanel.Dock="Left" Grid.Row="0" Grid.Column="0" Padding="0" x:Name="TreeControl" >
                <local:TreeViewControl x:Name="mainTreeView" Height="Auto" />
            </UserControl>

            <GridSplitter Grid.Row="0" Grid.Column="1" Margin="0,0,0,0" 
                  Width="4" Background="Transparent" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />

            <Grid Name="LandingPageGrid" Grid.Row="0" Grid.Column="2">

EDIT: I've tried adding a DataTrigger to the column's definition, but this hasn't worked.

<ColumnDefinition Width="Auto" x:Name="TreeColumn">
                    <ColumnDefinition.Style>
                        <Style>
                            <Style.Triggers>
                                <DataTrigger {Binding Path=IsChecked, ElementName=CollapseIcon}" Value="True">
                                    <Setter Property="ColumnDefinition.Width" Value="Auto"/>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </ColumnDefinition.Style>
                </ColumnDefinition>

Upvotes: 0

Views: 370

Answers (1)

fyodorfranz
fyodorfranz

Reputation: 486

So after much debugging, many fruitless attempts, I finally resorted to setting the errant widths in the code-behind to the TreeViewControl. It's not pretty, so if someone would like to suggest a better answer, please do so, and I'll happily mark your code as the solution. 

private void CollapseIcon_Checked(object sender, RoutedEventArgs e)
        {
            TreeControl.Width = 16;
            TreeControl.HorizontalAlignment = HorizontalAlignment.Left;
            ((FrameworkElement) TreeControl.Parent).Width = 16;

            var parentColumn = (((Grid) ((FrameworkElement) TreeControl.Parent).Parent).ColumnDefinitions)[0];
            parentColumn.Width = GridLength.Auto;
        }

        private void CollapseIcon_Unchecked(object sender, RoutedEventArgs e)
        {
            TreeControl.Width = Double.NaN;
            TreeControl.HorizontalAlignment = HorizontalAlignment.Stretch;
            ((FrameworkElement) TreeControl.Parent).Width = Double.NaN;

            var parentColumn = (((Grid)((FrameworkElement)TreeControl.Parent).Parent).ColumnDefinitions)[0];
            parentColumn.Width = GridLength.Auto;
        }

Upvotes: 0

Related Questions