c# - 如何让 WPF ContentControl 内容拉伸(stretch)？

Question

我正在使用 ContentControl 动态呈现各种 UserControl 派生。当我调整父 Window 大小时，我一辈子都想不出如何让内容拉伸(stretch)。我找到了很多引用资料，例如 this ，但它仍然不适合我。这是一个简单的例子:

这是窗口 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 和 View 模型类的代码:

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 和 Horizo​​ntalAlignment。设置这些将防止内容控件在其容器内拉伸(stretch)，因此 Width 和 Height 被尊重，默认情况下它们都是零(因此容器本身没有大小).

将 VerticalAlignment 和 Horizo​​ntalAlignment 设置为 Stretch，或者因为它是默认值而将其保留，将使容器填充网格，这是你想要什么。

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

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

如果您出于设计目的而希望具有特定大小，请设置设计大小 而不是实际控件大小。为此，您拥有包含 DesignWidth 和 DesignHeight 属性的 d XAML 命名空间。设置这些会影响设计器，但稍后在呈现 View 时会忽略它们。

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