回答編集履歴

- 気になった点の改善版

-

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

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

-

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

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

-

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

-

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

- 例えばこういうの↓

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

-

-

- ```xaml

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

- ```

-

- ```C#

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

- {

- new()

- {

- IsSelected = true,

- Icon = "\xE10F",

- Title = "HOME",

- },

- new()

- {

- Icon = "\xF157",

- Title = "CONTENT1",

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

- Content = "CONTENT1 です。",

- },

- new()

- {

- Icon = "\xF158",

- Title = "CONTENT2",

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

- },

- new()

- {

- 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();

- }

- }

- ```