■概要
こんなの
■準備
🔗ここを参考に「2. プロジェクト作成」から「5. テーマ適用」まで実施する。
※「2. プロジェクト作成」でプロジェクト名はWpfAppNaviView、フレームワークは.NET 5.0にした。
※「4. NuGet」は「ModernWpfUI」だけ入れればOK、「ModernWpf.MessageBox」は今回のサンプルでは使っていない。
■切り替えるページ追加
Pagesフォルダを作成し、その中に「追加」-「ページ (WPF)」で以下の名前でページを作成する。
- AccountPage
- BlankPage
- DocumentPage
- HomePage
■MainWindow
◇cs
enum定義。
MainWindow.xaml.cs
：namespaceWpfAppNaviView{// 新しいページが増えたら追加publicenumNaviIcon{Home,Account,Document,None,}/// <summary>/// Interaction logic for MainWindow.xaml/// </summary>publicpartialclassMainWindow:Window：◇xaml
「Window」にxmlns:muxc="http://schemas.modernwpf.com/2019"を追加。
「Width」「Height」変更。ResizeMode="CanResizeWithGrip"追加。
MainWindow.xaml
<Windowx:Class="WpfAppNaviView.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:local="clr-namespace:WpfAppNaviView"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:muxc="http://schemas.modernwpf.com/2019"xmlns:ui="http://schemas.modernwpf.com/2019"Title="MainWindow"Width="1010"Height="700"ui:WindowHelper.UseModernWindowStyle="True"ResizeMode="CanResizeWithGrip"mc:Ignorable="d">「Grid」を「NavigationView」に書き換え。
「NavigationViewItem」が選択変更されたら「Frame」のコンテンツを切り替えるように作っていく。
「NavigationViewItem」の「Tag」に先ほど定義したenum値を設定。
MainWindow.xaml
<muxc:NavigationViewx:Name="NaviView"Header="★ヘッダー★"IsBackButtonVisible="Collapsed"IsSettingsVisible="False"IsTitleBarAutoPaddingEnabled="False"PaneDisplayMode="Auto"PaneTitle=""SelectionChanged="NaviView_SelectionChanged"><muxc:NavigationView.MenuItems><muxc:NavigationViewItemContent="ホーム"Icon="Home"IsSelected="True"Tag="{x:Static local:NaviIcon.Home}"/><muxc:NavigationViewItemContent="アカウント"Icon="Contact"Tag="{x:Static local:NaviIcon.Account}"/><muxc:NavigationViewItemContent="ドキュメント"Icon="Page2"Tag="{x:Static local:NaviIcon.Document}"/><muxc:NavigationViewItemContent="ダウンロード"Icon="Download"/><muxc:NavigationViewItemContent="ミュージック"Icon="Audio"/><muxc:NavigationViewItemContent="ビデオ"Icon="Video"/><muxc:NavigationViewItemContent="編集"Icon="Edit"/><muxc:NavigationViewItemContent="ネットワーク"Icon="Globe"/><muxc:NavigationViewItemContent="メール"Icon="Mail"/><muxc:NavigationViewItemContent="すべてのアプリ"Icon="AllApps"/><muxc:NavigationViewItemContent="検索"Icon="Find"/><muxc:NavigationViewItemContent="計算"Icon="Calculator"/><muxc:NavigationViewItemContent="カレンダー"Icon="Calendar"/><muxc:NavigationViewItemContent="ゴミ箱"Icon="Delete"/></muxc:NavigationView.MenuItems><ScrollViewer><ui:Framex:Name="ContentFrame"Padding="12,0,12,24"/></ScrollViewer></muxc:NavigationView></Window>◇cs
enumと実際のページを紐づけるDictionaryを定義。
NavigationViewが選択変更されたら対応するページを表示する処理追加。
MainWindow.xaml.cs
usingSystem;usingSystem.Collections.Generic;usingSystem.Windows;usingui=ModernWpf.Controls;namespaceWpfAppNaviView{// 新しいページが増えたら追加publicenumNaviIcon{Home,Account,Document,None,}/// <summary>/// Interaction logic for MainWindow.xaml/// </summary>publicpartialclassMainWindow:Window{// 新しいページが増えたら追加privatestaticIReadOnlyDictionary<NaviIcon,Type>_pages=newDictionary<NaviIcon,Type>(){{NaviIcon.Home,typeof(Pages.HomePage)},{NaviIcon.Account,typeof(Pages.AccountPage)},{NaviIcon.Document,typeof(Pages.DocumentPage)},// 空ページ{NaviIcon.None,typeof(Pages.BlankPage)},};publicMainWindow(){InitializeComponent();}privatevoidNaviView_SelectionChanged(ui.NavigationViewsender,ui.NavigationViewSelectionChangedEventArgsargs){try{varselectedItem=(ui.NavigationViewItem)args.SelectedItem;// Tag取得stringiconName=selectedItem.Tag?.ToString();// ヘッダー設定sender.Header=iconName;if(Enum.TryParse(iconName,outNaviIconicon)){// 対応するページ表示ContentFrame.Navigate(_pages[icon]);}else{// 空ページ表示ContentFrame.Navigate(_pages[NaviIcon.None]);}}catch(Exceptionex){MessageBox.Show(ex.Message);}}}}■各ページ内容
HomePage.xaml
<Pagex:Class="WpfAppNaviView.Pages.HomePage"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:local="clr-namespace:WpfAppNaviView.Pages"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"Title="HomePage"d:DesignHeight="450"d:DesignWidth="800"mc:Ignorable="d"><Grid><TextBlockHorizontalAlignment="Center"VerticalAlignment="Center"FontSize="72"Text="ホーム"/></Grid></Page>AccountPage.xaml
<Pagex:Class="WpfAppNaviView.Pages.AccountPage"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:local="clr-namespace:WpfAppNaviView.Pages"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"Title="AccountPage"d:DesignHeight="450"d:DesignWidth="800"mc:Ignorable="d"><Grid><TextBlockHorizontalAlignment="Center"VerticalAlignment="Center"FontSize="72"Text="アカウント"/></Grid></Page>DocumentPage.xaml
<Pagex:Class="WpfAppNaviView.Pages.DocumentPage"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:local="clr-namespace:WpfAppNaviView.Pages"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"Title="DocumentPage"d:DesignHeight="450"d:DesignWidth="800"mc:Ignorable="d"><StackPanel><StackPanel.Resources><StyleTargetType="TextBlock"><SetterProperty="FontSize"Value="72"/><SetterProperty="Margin"Value="0,0,0,12"/></Style></StackPanel.Resources><TextBlockText="ドキュメント1"/><TextBlockText="ドキュメント2"/><TextBlockText="ドキュメント3"/><TextBlockText="ドキュメント4"/><TextBlockText="ドキュメント5"/><TextBlockText="ドキュメント6"/><TextBlockText="ドキュメント7"/><TextBlockText="ドキュメント8"/></StackPanel></Page>まだ作っていないページはとりあえずこれを表示する。
BlankPage.xaml
<Pagex:Class="WpfAppNaviView.Pages.BlankPage"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:local="clr-namespace:WpfAppNaviView.Pages"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"Title="BlankPage"d:DesignHeight="450"d:DesignWidth="800"mc:Ignorable="d"><Grid/></Page>■実行
「ドキュメント」をクリック。
OSのテーマを「白」に変更。
ウィンドウサイズを小さくするとメニューがコンパクト化。