WPF - Expander in Grid - eating space

Question

I have very simple xaml.

<Grid Margin="0,50,0,0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="30*" />
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <!--<RowDefinition Height="50"/>-->
        </Grid.RowDefinitions>
 <Expander Header=""
          HorizontalAlignment="Left"
          VerticalAlignment="Stretch"
          ExpandDirection="Right"
          IsExpanded="True"
          Grid.Column="0" 
          Grid.Row="0"
          Height="Auto"
           >
<!-- My List control -->
</Expander>
<TabControl Name="ExecutionTab" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Stretch">
<!-- soem tabs here -->
</TabControl>
</Grid>

Now after collasping expander the left part [row=0,col=0] being shown as empty with space. What we want is right part [row=0,col=1] should take whole space.

What should be done in this case ? I have tried HorizontalAlignment="Stretch" to Tab control but not working.

Do I need to add event handler like on collapse and change width of grid.. but it does not seems to good way ?

Can anyone suggest better way ?

Thanks

Answer 1

Using a Grid is not the best way to achieve what you want. You should use a DockPanel instead with LastChildFill = "true". I can't try it now but I would imagine it like this:

<DockPanel LastChildFill="true">
 <Expander Header=""
          HorizontalAlignment="Left"
          VerticalAlignment="Stretch"
          ExpandDirection="Right"
          IsExpanded="True"
          DockPanel.Dock="Left"
          Height="Auto"
           >
<!-- My List control -->
</Expander>
<TabControl Name="ExecutionTab" HorizontalAlignment="Stretch">
<!-- soem tabs here -->
</TabControl>
</DockPanel>

This should make the tab control always take the entire remaining space.

Answer 2

You can make this work by setting your column definitions to:

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

The complete code to show this working is below:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <Expander ExpandDirection="Right" IsExpanded="True">
     <TextBlock FontSize="50">Text For Expander</TextBlock>
    </Expander>
    <TabControl Name="ExecutionTab" Grid.Column="1">
        <TabItem Header="Tab 1">
            <TextBox FontSize="50" TextWrapping="Wrap">Text for Tab 1</TextBox>
        </TabItem>
        <TabItem Header="Tab 2">
            <TextBox FontSize="50" TextWrapping="Wrap">Text for Tab 1</TextBox>
        </TabItem>
    </TabControl>
</Grid>

If you add the xaml above to a window, you should see the following

Answer 3

You will have to make you ColumnDefinition.Width to Auto and if you want fixed width for your TabControl you should give Width to TabControl.

<Grid Margin="0,50,0,0">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto"/>
     </Grid.ColumnDefinitions>