C# WPF Resizing Controls In Grid Row to Fill All Width

Question

I am trying to have my ComboBox stretch to use all empty space in the expanded window. If the window's width were to shrink, the ToolBarTray will collapse.

I used a grid with 2 columns with width specified as * & 300 respectively. How can the ComboBox be made to fill all available space in the row?

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>

    <DockPanel LastChildFill="True" Grid.Row="0">
        <Grid DockPanel.Dock="Top">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="300" />
            </Grid.ColumnDefinitions>

            <ToolBarTray DockPanel.Dock="Left">
                <ToolBar Name="Standard">
                    <Button Height="32">
                        <StackPanel Orientation="Horizontal" Margin="5,0,5,0" HorizontalAlignment="Right">
                            <Image Height="24" Width="24" HorizontalAlignment="Center" Source="Images/document.png" />
                        </StackPanel>
                    </Button>

                    <Button Height="32">
                        <StackPanel Orientation="Horizontal" Margin="5,0,5,0" HorizontalAlignment="Right">
                            <Image Height="24" Width="24" HorizontalAlignment="Center" Source="Images/document.png" />
                        </StackPanel>
                    </Button>

                    <Button Height="32">
                        <StackPanel Orientation="Horizontal" Margin="5,0,5,0" HorizontalAlignment="Right">
                            <Image Height="24" Width="24" HorizontalAlignment="Center" Source="Images/document.png" />
                        </StackPanel>
                    </Button>
                </ToolBar>

                <ToolBar Name="Standard2">
                    <Button Height="32">
                        <StackPanel Orientation="Horizontal" Margin="5,0,5,0" HorizontalAlignment="Right">
                            <Image Height="24" Width="24" HorizontalAlignment="Center" Source="Images/document.png" />
                        </StackPanel>
                    </Button>

                    <Button Height="32">
                        <StackPanel Orientation="Horizontal" Margin="5,0,5,0" HorizontalAlignment="Right">
                            <Image Height="24" Width="24" HorizontalAlignment="Center" Source="Images/document.png" />
                        </StackPanel>
                    </Button>

                    <Button Height="32">
                        <StackPanel Orientation="Horizontal" Margin="5,0,5,0" HorizontalAlignment="Right">
                            <Image Height="24" Width="24" HorizontalAlignment="Center" Source="Images/document.png" />
                        </StackPanel>
                    </Button>
                </ToolBar>
            </ToolBarTray>

            <ComboBox Grid.Column="1" MinWidth="200" ></ComboBox>
        </Grid>
    </DockPanel>
</Grid>

Answer 1

The most simple way to have e.g.: a TextBlock using more columns in a certain row is to use Grid.ColumnSpan="7". This works perfect for situations like this:

XAML View Sample

 <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="30" />
        <RowDefinition Height="40" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="70" />
        <ColumnDefinition Width="100" />
        <ColumnDefinition Width="60" />
        <ColumnDefinition Width="60" />
        <ColumnDefinition Width="100" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="100" />
    </Grid.ColumnDefinitions>
    <TextBlock
        Grid.Row="0"
        Grid.ColumnSpan="7"
        Text="{translation:Translate PDFExportSetResolution}"
        Grid.Column="0"
        HorizontalAlignment="Left"
        VerticalAlignment="Center"
        Margin="5"
        TextWrapping="NoWrap"
        Width="Auto" />

Answer 2

Ok, if you want the Toolbar to totally collapse, the only solution I found was writing a little bit of code. Having layout only in XAML would have been more elegant, but sometimes C# code is the only way.

1. Get rid of the Grid :

2. Handle the resize of canvas :

   private void ToolbarSizeChanged(object sender, SizeChangedEventArgs e)
   {
       const double COMBO_MIN_DESIRED_WIDTH = 300.0;
       Size newSize = e.NewSize;
   
       Size sizeToolbarTray = new Size(Double.PositiveInfinity, newSize.Height);
       // measure to update DesiredSize
       toolBarTray.Measure(sizeToolbarTray);
   
       Rect toolBarTrayRect = new Rect(0, 0, 0, newSize.Height);
       Rect comboRect =new Rect(0,0,0,newSize.Height);
   
       // 3 cases :
   
       // 1) Much space is available
       if (newSize.Width > toolBarTray.DesiredSize.Width + COMBO_MIN_DESIRED_WIDTH)
       {
           toolBarTrayRect.Width = toolBarTray.DesiredSize.Width;
           comboRect.X = toolBarTrayRect.Width;
           comboRect.Width = newSize.Width -toolBarTrayRect.Width;
   
       }
       // 2) Space to show Combo, but not totally toolbar
       else if (newSize.Width > COMBO_MIN_DESIRED_WIDTH)
       {
           toolBarTrayRect.Width = newSize.Width - COMBO_MIN_DESIRED_WIDTH;
           comboRect.X = toolBarTrayRect.Width;
           comboRect.Width = COMBO_MIN_DESIRED_WIDTH;
       }
       // 3) Not enough space to show toolbar
       else
       {
           toolBarTrayRect.Width = 0;
           comboRect.Width = newSize.Width;
       }
       // Layout the two components :
       toolBarTray.Arrange(toolBarTrayRect);
       combobox.Arrange(comboRect);
   }
   

Here is a link to a workiing solution so that you cann check it ''s what you want :
http://1drv.ms/1MySnde

Hope I understood you wishes and it helps, regards

Answer 3

Just change your column widths definition :

    <Grid DockPanel.Dock="Top">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

By default the ComboBox has horizontal and vertical alignments set to Stretch.

May be for the first column you could put a hardcoded size.

But if you GUI needs to have more space to be nicer, put some margins around the ToolbarTray and ComboBox

Regards

Answer 4

use HorizontalAlignment="Strech"

See following code

<ComboBox Grid.Column="1" MinWidth="200" HorizontalAlignment="Stretch"></ComboBox>