CODEWITHSUNDEEP
c#wpfxamluser-controls
IAbstract
IAbstract

Reputation: 19881

Why UserControl isn't filling VerticalContentAlignment 'Stretch'?

Here is the parent Xaml:

<Grid VerticalAlignment="Stretch">
    <Grid.RowDefinitions>
        <RowDefinition Height="20" />
        <RowDefinition Height="*" /><!-- Should stretch vertically -->
    </Grid.RowDefinitions>
    <DockPanel Grid.Row="0">
        <!-- Menu definition removed for brevity -->
    </DockPanel>
    <DockPanel Grid.Row="1"
               VerticalAlignment="Stretch"
               LastChildFill="True">
        <ItemsControl DockPanel.Dock="Top"
                      ItemsSource="{Binding Designer}"
                      HorizontalAlignment="Stretch"
                      HorizontalContentAlignment="Stretch"
                      VerticalAlignment="Stretch"
                      VerticalContentAlignment="Stretch"
                      Background="YellowGreen"/>
    </DockPanel>
</Grid>

The ItemsSource binding is to an ObservableCollection. When the view is added to the collection, it gets updated in the main shell (view). Here is the UserControl that is added: 

<UserControl x:Class="Prototype.StateMachineDesignerApp.Views.ProjectDesigner"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="clr-namespace:Prototype.StateMachineDesignerApp.Views"
             mc:Ignorable="d"
             d:DesignHeight="300" d:DesignWidth="500"
             HorizontalAlignment="Stretch"
             HorizontalContentAlignment="Stretch"
             VerticalAlignment="Stretch"
             VerticalContentAlignment="Stretch"
             Margin="0">
    <Grid VerticalAlignment="Stretch">
        <Grid.RowDefinitions>
            <RowDefinition Height="20" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Border Grid.Row="0"
                BorderBrush="DimGray"
                BorderThickness="1"
                Background="LightSlateGray"
                Margin="1" />
        <Border Grid.Row="1"
                Margin="1">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="3" />
                    <ColumnDefinition Width="5*" />
                </Grid.ColumnDefinitions>
                <Border Grid.Column="0"
                        BorderBrush="DarkGoldenrod"
                        BorderThickness="1" />
                <GridSplitter Grid.Column="1"
                              HorizontalAlignment="Stretch"
                              VerticalAlignment="Stretch" />
                <Border Grid.Column="2"
                        BorderBrush="DarkGoldenrod"
                        BorderThickness="1" />
            </Grid>
        </Border>
    </Grid>
</UserControl>

The UserControl is not filling the entire vertical space: user control image

Row[1] of the outermost Grid is stretching vertically as is evidenced by the ItemsControl.Background filling the area.

For reference, this is what I am expecting: enter image description here

For what its worth, I've looked at numerous questions on SO regarding this exact issue but none of the solutions seem to help. Then again, none of the examples I saw used an ItemsControl with binding.

Upvotes: 2

Views: 539

Answers (1)

Abin
Abin

Reputation: 2956

This happens because the ItemsControl throw all of our items into a vertically aligned StackPanel by default. It's very easy to change though, since the ItemsControl allows you to change which panel type is used to hold all the items.

<ItemsControl DockPanel.Dock="Top"
                  ItemsSource="{Binding Designer}"
                  HorizontalAlignment="Stretch"
                  HorizontalContentAlignment="Stretch"
                  VerticalAlignment="Stretch"
                  VerticalContentAlignment="Stretch"
                  Background="Transparent">
  <ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
         <Grid />
    </ItemsPanelTemplate>
 </ItemsControl.ItemsPanel>
</ItemsControl>

Upvotes: 2

Related Questions