如何让 WPF ContentControl 内容拉伸？

Question

我正在使用ContentControl 动态呈现各种UserControl 派生。当我调整父级Window 的大小时，我一生都无法弄清楚如何让内容伸展。我找到了很多参考资料，例如this，但它仍然不适合我。这是一个简单的例子：

这是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>

这里使用资源文件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>

以下是主要的 Window 以及视图模型类的代码：

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
{

}

最后是用户控件：

<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>

这是它在运行时的样子：

我在这里缺少什么？如何让子内容的行为使其保持锚定在父对象的顶部/左侧，并且在调整父对象大小时底部/右侧延伸？

Answer 1

两件事：

首先，您要删除ContentControl 上的VerticalAlignment 和HorizontalAlignment。设置这些将防止内容控件在其容器内拉伸，因此Width 和Height 受到尊重，默认情况下它们都为零（因此容器本身没有大小）。

将VerticalAlignment 和HorizontalAlignment 设置为Stretch，或者因为它是默认设置而将其省略，将使容器填充网格，这正是您想要的。

<ContentControl Content="{Binding Path=ChildView}" Margin="10" />

其次，在UserControl 中设置Width 和Height 会将其大小设置为固定大小，因此它不会自行调整。删除这些属性，用户控件也将默认拉伸，使其填充内容控件。

如果你想有一定的尺寸用于设计目的，那么设置设计尺寸而不是实际的控件尺寸。为此，您拥有 d XAML 命名空间，其中包含 DesignWidth 和 DesignHeight 属性。设置这些会影响设计器，但稍后在渲染视图时会忽略它们。

<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"
        d:DesignWidth="400" d:DesignHeight="250"
        Background="Blue">
    …
</UserControl>

Answer 2

您设置了 UserControl 的 Height 和 Width 属性。这消除了 WPF 布局的任何余地。因此，它尽其所能，即以 UserControl 为中心。如果删除宽度和高度，它应该会按预期拉伸。

<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" //<-- remove 
         VerticalAlignment="Stretch" 
         HorizontalAlignment="Stretch">
<Grid>

</Grid>
</UserControl>

poke 提醒我，您还必须删除 VerticalAlignment="Top" 和 HorizontalAlignment="Left"

<ContentControl VerticalAlignment="Top" //<--remove
                    HorizontalAlignment="Left"  //<--remove
                    VerticalContentAlignment="Stretch" 
                    HorizontalContentAlignment="Stretch" 
                    Content="{Binding Path=ChildView}" 
                    Margin="10"/>