I'm using a ContentControl
to render various UserControl
derivations dynamically. I can't for the life of me figure out how to get the content to stretch when I resize the parent Window
. I've found many references like this, but it's still not working for me. Here is a simple example:
This is the Window
XAML:
<Window x:Class="WpfApplication3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<ResourceDictionary Source="Dictionary1.xaml"/>
</Window.Resources>
<Grid>
<ContentControl VerticalAlignment="Top"
HorizontalAlignment="Left"
VerticalContentAlignment="Stretch"
HorizontalContentAlignment="Stretch"
Content="{Binding Path=ChildView}"
Margin="10"/>
</Grid>
</Window>
This uses the resource file Dictionary1.XAML
:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:viewModels ="clr-namespace:WpfApplication3"
xmlns:views ="clr-namespace:WpfApplication3">
<DataTemplate DataType="{x:Type viewModels:UserControlViewModel}">
<views:UserControl1/>
</DataTemplate>
</ResourceDictionary>
Here is the code behind for the main Window
as well as the view model classes:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.DataContext = new MainViewModel();
}
}
public class MainViewModel
{
public UserControlViewModel ChildView { get; set; }
public MainViewModel()
{
ChildView = new UserControlViewModel();
}
}
public class UserControlViewModel
{
}
and finally the user control:
<UserControl x:Class="WpfApplication3.UserControl1"
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"
mc:Ignorable="d"
Background="Blue"
Height="141" Width="278"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch">
<Grid>
</Grid>
</UserControl>
Here's what it looks like at run time:
What am I missing here? How can I get the child content to behave such that it remains anchored to the top/left of the parent and the bottom/right stretches as the parent is resized?
Best Answer
Two things:
First, you want to remove the
VerticalAlignment
andHorizontalAlignment
on yourContentControl
. Setting these will prevent the content control from stretching within its container, soWidth
andHeight
are respected, which are both zero by default (so the container has no size on its own).Setting
VerticalAlignment
andHorizontalAlignment
toStretch
, or leaving it out since it’s the default, will make the container fill the grid, which is what you want.Second, setting
Width
andHeight
within theUserControl
will set its size to that fixed size, so it will not adjust itself. Remove those attributes and the user control will default to stretch too, making it fill the content control.If you want to have a certain size for design purposes, then set the design size instead of the actual control size. For that, you have the
d
XAML namespace which containsDesignWidth
andDesignHeight
properties. Setting these will affect the designer but they are ignored later when the view is rendered.