回答編集履歴

  気になった点の改善版

 

  文字数制限のためテンプレートは派手に削ったので、使用側でのカスタマイズ性はないです。キーボードナビゲーション回りもオミットしています^^;

  それでもxamlは元より長くなってしまいましたorz

 

  本体部分（`Grid`のところ）は非常に短くなりました。

  `MenuModel`もスッキリしたと思いますがどうでしょうか？

 

  `MenuModels`が`ObservableCollection`なので増減があると想定しましたが、固定数なら`CollectionView`を使うまでもないです。

 

  見た目を出来合いので済ませるならxamlの大部分は不要です。

  例えばこういうの↓

  [Material Design In XAML Toolkit v3.2 の紹介 - Qiita](https://qiita.com/soi/items/85138760233ca050297e#navigationrail)

 

 

  <Window

  x:Class="Questions329889_2.MainWindow"

  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  xmlns:local="clr-namespace:Questions329889_2"

  Width="23cm"

  Height="14.2cm">

 

  <Window.DataContext>

  <local:MainViewModel />

  </Window.DataContext>

 

  <Window.Resources>

  <Style x:Key="TabControlSidebarStyle" TargetType="{x:Type TabControl}">

  <Setter Property="Template">

  <Setter.Value>

  <ControlTemplate TargetType="{x:Type TabControl}">

  <DockPanel>

  <TabPanel Background="Gray" IsItemsHost="True" />

  <Border>

  <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" />

  </Border>

  </DockPanel>

  </ControlTemplate>

  </Setter.Value>

  </Setter>

  </Style>

 

  <Style x:Key="TabItemSidebarButtonStyle" TargetType="{x:Type TabItem}">

  <Setter Property="IsSelected" Value="{Binding IsSelected}" />

  <Setter Property="Foreground" Value="White" />

  <Setter Property="Background" Value="Gray" />

  <Setter Property="Template">

  <Setter.Value>

  <ControlTemplate TargetType="{x:Type TabItem}">

  <Grid>

  <Border x:Name="mainBorder" Background="{TemplateBinding Background}">

  <Border x:Name="innerBorder" Opacity="0" />

  </Border>

  <ContentPresenter ContentSource="Header" Focusable="False" />

  </Grid>

  <ControlTemplate.Triggers>

  <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="True">

  <Setter TargetName="mainBorder" Property="Background" Value="#FFBEE6FD" />

  </DataTrigger>

  <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="True">

  <Setter Property="Foreground" Value="Black" />

  <Setter Property="Background" Value="White" />

  <Setter TargetName="innerBorder" Property="Opacity" Value="1" />

  </DataTrigger>

  </ControlTemplate.Triggers>

  </ControlTemplate>

  </Setter.Value>

  </Setter>

  </Style>

 

  <DataTemplate x:Key="SidebarButtonTemplate" DataType="{x:Type local:MenuModel}">

  <Border Padding="6,10">

  <StackPanel>

  <TextBlock

  FontFamily="Segoe MDL2 Assets"

  FontSize="26pt"

  Text="{Binding Icon}"

  TextAlignment="Center" />

  <TextBlock

  FontSize="8pt"

  Text="{Binding Title}"

  TextAlignment="Center" />

  </StackPanel>

  </Border>

  </DataTemplate>

 

  <DataTemplate x:Key="HomeContentTemplate" DataType="{x:Type local:MenuModel}">

  <ItemsControl ItemsSource="{Binding}">

  <ItemsControl.ItemTemplate>

  <DataTemplate>

  <Button

  Width="350"

  Height="160"

  Margin="5"

  Background="#efebe9"

  Command="{Binding DataContext.ClickMenu, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}"

  CommandParameter="{Binding}">

  <Button.Template>

  <ControlTemplate TargetType="{x:Type Button}">

  <Border

  Name="border"

  Background="{TemplateBinding Background}"

  CornerRadius="10">

  <ContentPresenter />

  </Border>

  <ControlTemplate.Triggers>

  <Trigger Property="IsMouseOver" Value="True">

  <Setter TargetName="border" Property="Background" Value="#FFBEE6FD" />

  </Trigger>

  </ControlTemplate.Triggers>

  </ControlTemplate>

  </Button.Template>

  <DockPanel Margin="10">

  <StackPanel DockPanel.Dock="Top" Orientation="Horizontal">

  <TextBlock

  Margin="10,0,10,0"

  HorizontalAlignment="Center"

  VerticalAlignment="Center"

  FontFamily="Segoe MDL2 Assets"

  FontSize="18pt"

  Text="{Binding Icon}" />

  <TextBlock FontSize="18pt" Text="{Binding Title}" />

  </StackPanel>

  <TextBlock

  FontSize="11pt"

  Text="{Binding Description}"

  TextWrapping="Wrap" />

  </DockPanel>

  </Button>

  </DataTemplate>

  </ItemsControl.ItemTemplate>

  <ItemsControl.ItemsPanel>

  <ItemsPanelTemplate>

  <WrapPanel HorizontalAlignment="Center" />

  </ItemsPanelTemplate>

  </ItemsControl.ItemsPanel>

  </ItemsControl>

  </DataTemplate>

 

  <local:HomeContentTemplateSelector x:Key="HomeContentTemplateSelector" Template="{StaticResource HomeContentTemplate}" />

 

  <DataTemplate x:Key="MenuModelContentTemplate" DataType="{x:Type local:MenuModel}">

  <ScrollViewer>

  <StackPanel>

  <TextBlock

  Margin="15"

  FontSize="23pt"

  Foreground="Gray"

  Text="{Binding Title}" />

  <ContentPresenter

  Margin="15"

  Content="{Binding Content}"

  ContentTemplateSelector="{StaticResource HomeContentTemplateSelector}" />

  </StackPanel>

  </ScrollViewer>

  </DataTemplate>

  </Window.Resources>

 

  <Grid>

  <TabControl

  ContentTemplate="{StaticResource MenuModelContentTemplate}"

  ItemContainerStyle="{StaticResource TabItemSidebarButtonStyle}"

  ItemTemplate="{StaticResource SidebarButtonTemplate}"

  ItemsSource="{Binding MenuModels}"

  Style="{StaticResource TabControlSidebarStyle}"

  TabStripPlacement="Left" />

 

  <Button

  Margin="15"

  HorizontalAlignment="Right"

  VerticalAlignment="Top"

  Command="{Binding AddCommand}"

  Content="Add" />

  </Grid>

  </Window>

  ```

 

  using Prism.Commands;

  using Prism.Mvvm;

  using System.Collections.ObjectModel;

  using System.Windows;

  using System.Windows.Controls;

  using System.Windows.Data;

 

  namespace Questions329889_2

  {

  public class HomeContentTemplateSelector : DataTemplateSelector

  public override DataTemplate SelectTemplate(object item, DependencyObject container)

  => item is CollectionView ? Template : null;

  public DataTemplate Template { get; set; }

 

  public class MenuModel : BindableBase

  public string Icon { get; init; }

  public string Title { get; init; }

  public string Description { get; init; }

  public object Content { get; set; }

 

  public bool IsSelected { get => _IsSelected; set => SetProperty(ref _IsSelected, value); }

  private bool _IsSelected;

 

  public class MainViewModel : BindableBase

  public ObservableCollection<MenuModel> MenuModels { get; }

  public DelegateCommand<MenuModel> ClickMenu { get; }

  public DelegateCommand AddCommand { get; }

 

  public MainViewModel()

  {

  MenuModels = new()

  IsSelected = true,

  Icon = "\xE10F",

  Title = "HOME",

  Icon = "\xF157",

  Title = "CONTENT1",

  Description = "CONTENT1 です。ここには、CONTENT1 の説明が入ります。",

  Content = "CONTENT1 です。",

  Icon = "\xF158",

  Title = "CONTENT2",

  Description = "CONTENT2 です。ここには、CONTENT2 の説明が入ります。",

  Icon = "\xF159",

  Title = "CONTENT3",

  Description = "CONTENT3 です。ここには、CONTENT3 の説明が入ります。",

  };

 

  MenuModels[0].Content = new ListCollectionView(MenuModels)

  Filter = (x) => ((MenuModel)x).Title != "HOME",

  };

 

  ClickMenu = new(x =>

  foreach (var m in MenuModels)

  m.IsSelected = x == m;

  });

 

  AddCommand = new(() =>

  MenuModels.Add(new()

  Icon = "\xF159",

  Title = $"CONTENT{number}",

  Description = $"CONTENT{number} です。ここには、CONTENT{number} の説明が入ります。",

  });

  number++;

  });

  }

  private int number = 4;

 

  public partial class MainWindow : Window

  public MainWindow() => InitializeComponent();

  }

  ```