Expand the Grid with when the Expander is expanded

Question

I have a problem designing my GUI in wpf. How do i set the Grid ColumnDefinition Width dynamically,

I have a expander. And when the expander is clicked the grid should also expand and adjust with the size of the expander

As of now i have this GUI

enter image description here

And this is the xaml code

<Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="127"/>
            <ColumnDefinition Width="665*"/>
        </Grid.ColumnDefinitions>
        <Expander Background="Gray" x:Name="expander" ExpandDirection="Right" Expanded="Expander_Expanded" >
            <Expander.Header>
                <TextBlock Text="Objects">
                    <TextBlock.LayoutTransform>
                        <RotateTransform Angle="-90"/>
                    </TextBlock.LayoutTransform>
                </TextBlock>
            </Expander.Header>

            <StackPanel Margin="10,4,0,0">
                <CheckBox Margin="4" Content="Option 1" />
                <CheckBox Margin="4" Content="Option 2" />
                <CheckBox Margin="4" Content="Option 3" />
            </StackPanel>
            <!-- Stuff XD -->

        </Expander>
        <Grid Grid.Column="1" Background="Red"/>

    </Grid>

As of now the ColomnDefinition width is 127

I want it to adjust to at least 30. So the window will be filled with other stuff

like this

enter image description here

But my problem is how do i expand the grid when the expander is expanded.

And another thing. I can't get the size of the expander when expanded. It gives me NaN which i can't use to set the columndefinition width

Thank you so much. Sorry for my bad english

Answer 1

Use Auto in first column Width and it will define size of expander based on content. If you would like that column "0" has some min Width just set the property MinWidth. (but in that case I will not recommend, but show below)

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto" MinWidth="30"/>
    <ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

Also I will recommend use GridSplitter, then you will have splitter between two columns that allows to change width of columns by user in UI

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto" MinWidth="30"/>
    <ColumnDefinition Width="5"/>
    <ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<GridSplitter Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="DarkSalmon"/>

Also in expander you can only have one user-control, so "stuff" you said need to be inside some layout control like stack-panel,dock or another grid etc.

Let me know if it works as you expected.