C#, WPF, Autorezise Listbox when window resize

Question

C#, Visual Studio 2010, dot net 4, WPF, Microsoft Ribbon

I have a WPF window with the ribbon menues at the top of the window and an area below where I try to fill with my controls however I can not get the controls to rezise with my window.

The listbox in the below example should be fully "expanded" witin its boundaries when the window appear and its width should follow the window width when the user resize the window (the user should not resize the controls itself) by dragging i nthe windows sides.

I tried a lot of playing around with the controls and searched the web but have not been able to find a solution (some site indicated the usage of border would do the trick).

The Image image1 is a background image spanning over the whole "surface". The Image image2 is a small logo picture.

<DockPanel DockPanel.Dock="Top">
    <Grid DockPanel.Dock="Top" Height="526" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="2"  Name="BaseGrid">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="1" />
            <RowDefinition Height="60" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="3" HorizontalAlignment="Left" Name="image1" VerticalAlignment="Top" Source="........./el_bg.jpg" Stretch="None" />
        <Grid  Grid.Column="0" Grid.Row="1" VerticalAlignment="Top" Margin="2" HorizontalAlignment="Left">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="200" />
                <ColumnDefinition Width="100" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="50" />
            </Grid.RowDefinitions>
            <Image  Grid.Column="0" Grid.Row="0" HorizontalAlignment="Left" Name="image2" Stretch="Fill" VerticalAlignment="Top" Source="........./shiny_rgb.png" />
            <ListBox Grid.Column="2" Grid.Row="0" Name="MessageToUser" VerticalAlignment="Top" />
        </Grid>
    </Grid>
</DockPanel>

Regards

Answer 1

You're setting horizontal alignments to Left that shouldn't be set. Try this:

<DockPanel DockPanel.Dock="Top">
    <Grid DockPanel.Dock="Top" Height="526" VerticalAlignment="Top" Margin="2"  Name="BaseGrid">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="1" />
            <RowDefinition Height="60" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="3" HorizontalAlignment="Left" Name="image1" VerticalAlignment="Top" Source="........./el_bg.jpg" Stretch="None" />
        <Grid  Grid.Column="0" Grid.Row="1" VerticalAlignment="Top" Margin="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="200" />
                <ColumnDefinition Width="100" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="50" />
            </Grid.RowDefinitions>
            <Image  Grid.Column="0" Grid.Row="0" HorizontalAlignment="Left" Name="image2" Stretch="Fill" VerticalAlignment="Top" Source="........./shiny_rgb.png" />
            <ListBox Grid.Column="2" Grid.Row="0" Name="MessageToUser" VerticalAlignment="Top">
                <ListBoxItem>One</ListBoxItem>
                <ListBoxItem>Two</ListBoxItem>
            </ListBox>
        </Grid>
    </Grid>
</DockPanel>

In addition, your ListBox is in the third column of its containing Grid. If you want it to stretch across the entire window, you will need to ensure it spans all three columns:

<ListBox Grid.ColumnSpan="3" Grid.Row="0" Name="MessageToUser" 
         VerticalAlignment="Top">

You should read up on WPF layout - you're setting way more properties here than you need to be. Once you understand it, you'll find this thing much more intuitive. In addition, you can use a tool like Snoop to help figure out what is wrong with your layout.

Answer 2

Applying the following style helped me meet this requirement:

<Style x:Key="listBoxAutoFill" TargetType="ListBoxItem">
   <Setter Property="Template">
      <Setter.Value>
         <ControlTemplate TargetType="{x:Type ListBoxItem}">
            <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}"
               BorderThickness="{TemplateBinding BorderThickness}"
               Background="{TemplateBinding Background}" 
               Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
               <ContentPresenter HorizontalAlignment="Stretch"
                  VerticalAlignment="Stretch" 
                  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
            </Border>
            <ControlTemplate.Triggers>
               <Trigger Property="IsSelected" Value="true">
                  <Setter Property="Background" TargetName="Bd" 
                     Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                  <Setter Property="Foreground" 
                     Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
               </Trigger>
               <MultiTrigger>
                  <MultiTrigger.Conditions>
                     <Condition Property="IsSelected" Value="true"/>
                     <Condition Property="Selector.IsSelectionActive" Value="false"/>
                  </MultiTrigger.Conditions>
                  <Setter Property="Background" TargetName="Bd" 
                     Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                  <Setter Property="Foreground" 
                     Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
               </MultiTrigger>
               <Trigger Property="IsEnabled" Value="false">
                  <Setter Property="Foreground" 
                     Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
               </Trigger>
            </ControlTemplate.Triggers>
         </ControlTemplate>
      </Setter.Value>
   </Setter>
</Style>

My requirement is more about resizing the listbox height as the window grows/shrinks but the same can be applied for width.

<ListBox Grid.Row="1" Grid.Column="0" Width="158" 
   ItemContainerStyle="{StaticResource listBoxAutoFill}" 
   ItemsSource="{Binding ListBoxItems, Mode=TwoWay}" />