更改ContentControl.Content将内容彼此堆叠

Question

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

我也有一个带有标签的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>