更改 ContentControl.Content 将内容堆叠在一起

Question

我有一个带有几个单选按钮、一个 ContentControl 和一个用于更改 ContentControl 内容的按钮的 MainWindow。

我还有一个带有标签的 UserControl1。当我单击 MainWindow 上的按钮将 ContentControl.Content 更改为 UserControl1 时，它会在 MainWindow 中的单选按钮顶部显示标签。我怎样才能改变它，使它像一个页面一样，并且不会将每个控件堆叠在一起？

MainWindow.xaml：

<Window x:Class="Test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Test"
        mc:Ignorable="d"
        Title="Test" WindowStartupLocation="CenterScreen" Width="968" Height="560" HorizontalAlignment="Center" VerticalAlignment="Center">
    <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Height="540" Margin="0,10,-6,-19" Width="968">
        <StackPanel Height="74" Margin="731,446,0,0" VerticalAlignment="Top" Width="229" Orientation="Horizontal" HorizontalAlignment="Left">
            <Button Content="Back" MinWidth="100" Margin="10,20,0,0"/>
            <Button Content="Next" MinWidth="100" Margin="10,20,0,0" Click="NextBtnClick"/>
        </StackPanel>
        <RadioButton x:Name="RadioBtn1" Content="Radio1" HorizontalAlignment="Center" Margin="312,130,95,0" VerticalAlignment="Top" Height="76" Width="561" FontSize="48" FontWeight="Bold" GroupName="1"/>
        <RadioButton x:Name="RadioBtn2" Content="Radio2" HorizontalAlignment="Center" Margin="312,232,95,0" VerticalAlignment="Top" Height="76" Width="561" FontSize="48" FontWeight="Bold" GroupName="1"/>
        <ContentControl x:Name="contentControl" Grid.Row="1"/>
    </Grid>
</Window>

MainWindow.xaml.cs：

private void NextBtnClick(object sender, RoutedEventArgs e)
{
    if (RadioBtn2.IsChecked == true)
    {
        this.contentControl.Content = new UserControl1();
    }
}

单击下一个按钮后，我将来自 UserControl1 的控件堆叠在单选按钮的顶部。

我对 WPF 很陌生，因此我们将不胜感激任何帮助。浏览文档是一场噩梦，因为我不确定如何解决这个问题。

Answer 1

您可以尝试使用Grid 面板而不定义行和列定义。根据您的代码，您正在尝试通过硬编码的边距、宽度和高度来定义面板布局。这就是为什么控件被渲染在彼此之上的原因。

我已更改网格代码以定义行定义，以便控件按行堆叠。因此，当您单击 Button 时，ContentContrl 将加载到最后一行（通过 RowDefinition 定义为 Height="*" 以占用剩余空间）

您可以在 Internet 上阅读有关 WPF 面板和网格布局的信息。 This 可以是一个好的开始。

<Window x:Class="Test.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:Test"
    mc:Ignorable="d"
    Title="Test" WindowStartupLocation="CenterScreen" Width="968" Height="560" HorizontalAlignment="Center" VerticalAlignment="Center">
    <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10 10 10 10">
    <Grid.RowDefinitions>
       <RowDefinition Height="Auto" />
       <RowDefinition Height="Auto" />
       <RowDefinition Height="Auto" />
       <RowDefinition Height="*" />
    </Grid.RowDefinitions?
    <StackPanel Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Left">
        <Button Content="Back" MinWidth="100" />
        <Button Content="Next" MinWidth="100" Click="NextBtnClick"/>
    </StackPanel>
    <RadioButton Grid.Row="1" x:Name="RadioBtn1" Content="Radio1" HorizontalAlignment="Center"  VerticalAlignment="Top" FontWeight="Bold" GroupName="1"/>
    <RadioButton Grid.Row="2" x:Name="RadioBtn2" Content="Radio2" HorizontalAlignment="Center" FontSize="48" FontWeight="Bold" GroupName="1"/>
    <ContentControl x:Name="contentControl" Grid.Row="3"/>
   </Grid>
</Window>