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

Charbel · Accepted Answer · 2013-11-01T09:27:55.027

8

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.

edited Nov 01 '13 at 09:27

answered Nov 01 '13 at 09:07

Charbel

658
5
13

Thanks for the comments. Tried this one but after this changes only Expander is getting displayed and when it is collapsed only Tabcontrol is displayed. So at a time only expander or tabcontrol is displayed. – Banng Nov 01 '13 at 11:25
I just tried locally and it worked. Anyway we can see the entire page code? – Charbel Nov 01 '13 at 11:38
Yes.. It worked for me. Problem was interally xaml was using Grid again. Thanks ! – Banng Nov 07 '13 at 11:07

grantnz · Answer 2 · 2013-11-08T21:42:47.393

4

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

Window with Expander expanded!

Window with Expander collapsed

edited Nov 08 '13 at 21:42

answered Nov 01 '13 at 09:19

grantnz

7,322
1
31
38

Tried above with columndefination auto but after that only Expander is getting displayed and when it is collapsed only Tabcontrol is displayed. – Banng Nov 01 '13 at 11:23
If you put the above code in a window of reasonable size, you will initially see the expander text and the tabs. The tabs will be narrow. When the expander is collapsed, the expander text will disappear and the tab will occupy the whole window (apart from the expander button). Did you try the xaml exactly as above? – grantnz Nov 01 '13 at 18:47
What issue did you see? It works as I expected but maybe you're trying to do something different. – grantnz Nov 08 '13 at 21:43

score 0 · Answer 3 · answered Nov 01 '13 at 09:17

0

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>

answered Nov 01 '13 at 09:17

Nitin

18,344
2
36
53

Thanks for the comments. Tried this one but after this changes only Expander is getting displayed and when it is collapsed only Tabcontrol is displayed. So at a time only expander or tabcontrol is displayed. – Banng Nov 01 '13 at 11:25

WPF - Expander in Grid - eating space

3 Answers3