仅使用按钮和网格重新创建选项卡页面-WPF C#

这是我第一次用C#编程，也第一次用WPF创建程序。在过去的两个小时里，我一直在互联网上搜索，看看是否有办法重现这种设计（）。我第一次想到创建一个带有定制标签的标签页，但似乎我无法完成。另一种方法是将每个标题转换为按钮，然后更改网格。到目前为止，我一事无成。所以我想知道有没有更好的方法

TL；博士：

---

如何以最好的方式完成这个设计？随着按钮改变下面板的内容和所有内容。

我认为我非常接近主窗口（没有内容）

要复制的代码（放在主窗口根目录中）：

此布局有两个ContentControl，一个位于“侧栏”中，另一个位于“中心”。使用then保存动态内容

按钮图像（在项目的根目录中创建图像文件夹并添加这些文件）：

---

你是在问是否可以重用ContentControl吗？@Sometowngeek不完全是ContentControl。。。例如，如果我单击“主页”按钮，则有三个面板，当我单击“设置”按钮时，没有面板，只有几个按钮和单选按钮。我想问一种方法，让我重新创建一个tabControl是如何工作的，但只需要按钮和网格（或者其他必要的东西）。谢谢你的回答！如果没有按钮的整个下半部分都要更改，我会在整个网格上使用contentControl吗？（例如，带有搜索面板的面板和空面板都将更改为3个面板，另外一个面板包含日期。）是。在这种情况下，将一个大ContentControl放在下半部分，然后可以使用横向搜索栏和空面板创建一个UserControl，这两个控件都有自己的ContentControl。使用WPF，您可以任意嵌套内容；）太好了！非常感谢。ContentControl是我一直在寻找的UI元素！

<Window.Resources>
     <Style TargetType="{x:Type Button}">
         <Setter Property="Background" Value="Transparent"/>
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="{x:Type Button}">
                     <Border Background="{TemplateBinding Background}">
                         <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                     </Border>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
     </Style>
 </Window.Resources>

 <Grid> 
     <Grid.RowDefinitions>
         <RowDefinition Height="98"/>
         <RowDefinition/>
     </Grid.RowDefinitions>

     <Grid Grid.Row="1">
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="280"/>
             <ColumnDefinition/>
         </Grid.ColumnDefinitions> 
         <Grid Grid.Column="1" Margin="3,10,10,10" >
             <Grid.Effect>
                 <DropShadowEffect Color="LightGray" ShadowDepth="3" Opacity=".5" />
             </Grid.Effect>
             <Border CornerRadius="5,5,5,5" Background="#FFF5F6F5" />
             <ContentControl x:Name="ContentCenter">

             </ContentControl>
         </Grid>

         <Grid Margin="10,10,3,10">
             <Grid.Effect>
                 <DropShadowEffect Color="LightGray" ShadowDepth="3" Opacity=".5" />
             </Grid.Effect>
             <Border CornerRadius="5,5,5,5" Background="#FFF5F6F5" />

             <Border  Height="30" Margin="12,15,12,0" VerticalAlignment="Top" Background="White" CornerRadius="15" BorderBrush="#FFEBEBEB" BorderThickness="1">
                 <Grid>
                     <Image HorizontalAlignment="Left" Width="25" Source="Images/magnifier.PNG" Margin="10,2,0,2" />
                     <TextBlock x:Name="TextBlockSearch" Text="Search" Margin="39,6,163,4" Foreground="#FF5B5B5B" />
                     <TextBox Text="" VerticalContentAlignment="Center" Margin="35,0,10,0" Background="Transparent" BorderBrush="Transparent" Foreground="#FF5B5B5B" TextChanged="TextBox_TextChanged"/>
                 </Grid>
             </Border>
             <ContentControl x:Name="ContentSide" Margin="0,45,0,0">

             </ContentControl>
         </Grid>
     </Grid>

     <Grid>
         <Grid.ColumnDefinitions>
             <ColumnDefinition />
             <ColumnDefinition />
             <ColumnDefinition />
             <ColumnDefinition />
             <ColumnDefinition />
             <ColumnDefinition />
         </Grid.ColumnDefinitions>
         <Button Margin="10" x:Name="ButtonHome">
             <Image Source="Images/home.PNG" />
         </Button>

         <Button Margin="10" x:Name="ButtonAudit" Grid.Column="1">
             <Image Source="Images/audit.PNG" />
         </Button>

         <Button Margin="10" x:Name="ButtonReports" Grid.Column="2">
             <Image Source="Images/reports.PNG" />
         </Button>

         <Button Margin="10" x:Name="ButtonAccount" Grid.Column="3">
             <Image Source="Images/account.PNG" />
         </Button>

         <Button Margin="10" x:Name="ButtonHelp" Grid.Column="4">
             <Image Source="Images/help.png" />
         </Button>

         <Button Margin="10" x:Name="ButtonSettings" Grid.Column="5">
             <Image Source="Images/settings.PNG" />
         </Button>
     </Grid> 
 </Grid>

    private void TextBox_TextChanged(object sender, TextChangedEventArgs e)
    {
        if ((sender as TextBox).Text.Length == 0)
            TextBlockSearch.Visibility = Visibility.Visible;
        else
            TextBlockSearch.Visibility = Visibility.Collapsed;
    }