WPFを使用して左側にラベル付きのシンプルメニューを作成するにはどうすればいいですか？

Question

私はWindowsフォームで単純なアプリケーション（教育目的のアプリケーションのみ）を開発していましたが、今はWPFの学習を開始していますが、それはもう少し複雑です。

写真のような簡単なメニューを作成したいと思います。私はGoogleとYouTubeでそれを見つけようとしてきましたが、私は探しているものではない "ハンバーガーメニュー"に関するチュートリアルをたくさん見つけました。

Answer 1

これは本当にWPFが輝く領域です：あなたが記述レイアウトは改装タブコントロールよりも何もして実施することができます。 LeftのTabStripPlacementとunstyledタブコントロールと

スタート：

その後TabPanel後ろ勾配とマージンを追加するTabControlスタイルを編集：

は、画像を追加TabItemスタイルを上書きしてフォントを設定し、バックグラウンドを削除します円形。テキストを強調するのではなく、選択を指示するためにシェブロンを使用しましたが、それは同じ方法で処理されていました。ここで

上記のスクリーンショットのために使用され、完全なXAMLです：

<Window x:Class="StackOverflowTabControl.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:StackOverflowTabControl" 
     mc:Ignorable="d" 
     Title="MainWindow" Height="350" Width="525"> 
    <Window.Resources> 
     <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/> 
     <Style x:Key="ItemContainerStyle" TargetType="{x:Type TabItem}"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type TabItem}"> 
         <Grid Margin="15,5"> 
          <Path Width="10" Height="14" Margin="0,2,0,0" HorizontalAlignment="Left" VerticalAlignment="Center" Stretch="Fill" Fill="#FF000000" Data="F1 M 39.8307,37.6042L 36.6641,34.4375L 25.1849,23.3542L 35.4766,23.3542L 50.5182,37.6042L 35.4766,51.8542L 25.1849,51.8542L 36.6641,40.7708L 39.8307,37.6042 Z " Visibility="{Binding IsSelected, Converter={StaticResource BooleanToVisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}"/> 
          <ContentPresenter Content="{TemplateBinding Header}" Margin="20,5,10,5"> 
           <ContentPresenter.Resources> 
            <Style TargetType="{x:Type TextBlock}"> 
             <Setter Property="FontSize" Value="18" /> 
             <Setter Property="FontWeight" Value="Light" /> 
            </Style> 
           </ContentPresenter.Resources> 
          </ContentPresenter> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
     <Style x:Key="TabControlStyle1" TargetType="{x:Type TabControl}"> 
      <Setter Property="TabStripPlacement" Value="Left" /> 
      <Setter Property="ItemContainerStyle" Value="{StaticResource ItemContainerStyle}" /> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type TabControl}"> 
         <Grid x:Name="templateRoot" ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local"> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="Auto" /> 
           <ColumnDefinition Width="1*" /> 
          </Grid.ColumnDefinitions> 
          <Border Grid.Column="0" Padding="5"> 
           <Border.Background> 
            <LinearGradientBrush EndPoint="0,0" StartPoint="1,0"> 
             <GradientStop Color="#FFC7C7C7" Offset="0"/> 
             <GradientStop Color="#FFECECEC" Offset="1"/> 
            </LinearGradientBrush> 
           </Border.Background> 
           <DockPanel> 
            <Image DockPanel.Dock="Bottom" HorizontalAlignment="Center" Margin="20" Source="pack://application:,,,/StackOverflowTabControl;component/twc.png" Width="200" /> 
            <TabPanel x:Name="headerPanel" Background="Transparent" Grid.Column="0" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/> 
           </DockPanel> 
          </Border> 
          <Border x:Name="contentPanel" Grid.Column="1" Margin="5,0,0,0"> 
           <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> 
          </Border> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </Window.Resources> 
    <Grid> 
     <TabControl Style="{DynamicResource TabControlStyle1}"> 
      <TabItem Header="System Information"> 
       <TextBlock Text="Windows 10 pro" /> 
      </TabItem> 
      <TabItem Header="Something else"> 
       <TextBlock Text="Other page" /> 
      </TabItem> 
     </TabControl> 
    </Grid> 
</Window>