Изменение 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, чтобы занять оставшееся пространство)

Вы можете прочитать о панелях и сетке WPFмакет в интернете. Это может быть хорошим началом.

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