使用按钮和网格重新创建标签页 - WPF C＃

Question

这是我第一次使用C＃编程以及在WPF中创建程序。过去两个小时我一直在网上搜索，看看是否有办法重新创建这种设计（http://imgur.com/a/R0UeU）。我首先考虑创建一个带有自定义选项卡的选项卡式页面，但似乎我无法完成它。另一种方法是将每个标题放入按钮并更改网格。到目前为止，我无处可去。所以我想知道是否有更好的方法吗？

TL; DR：

如何以最佳方式完成此设计（http://imgur.com/a/R0UeU）？使用按钮更改下面板的内容和所有内容。

Answer 1

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

重现的代码（放在主窗口根目录下）：

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

这种布局有两个ContentControl，一个进入“侧边栏”，一个进入“中心”。然后使用它来保存动态内容。

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