選單欄點選切換的實現
WPF Multiple Views in One Window
實現的內容
單擊不同的按鈕在同一個視窗中顯示不同的介面
參考：https://www.youtube.com/watch?v=xUwk2-_tRzo
1.新建WPF工程專案，命名為Multiple Views. 在解決方案中新建兩個資料夾ViewModels與Views來存放各種檢視，具體的內容後面說。
2.設計主介面(MainWindow.xaml)：
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<DockPanel Grid.Column="0" Grid.Row="0" Grid.RowSpan="5" Background="Gray">
<StackPanel>
<Button Content="red view" Click="RedView_Click"/>
<Button Content="Blue view" Click="BlueView_Click"/>
</StackPanel>
</DockPanel>
<ContentControl Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="4" Grid.RowSpan="5" Content="{Binding}"/>
</Grid>
說明：分成了5行5列，第1列作為選單項，放了兩個按鈕，第2-5列放ContentControl。
目前，我們想的是點選左邊不同的按鈕，會在ContentControl中顯示不同的介面。
3.設計需要在ContentControl中顯示的介面
在Views資料夾中新增->新建項->使用者控制元件(User Control)，重新命名為RedView.xaml
其中的程式碼為：
<UserControl x:Class="Multiple_Views.Views.RedView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Multiple_Views.Views"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Grid Background="Red">
</Grid>
</UserControl>
這裡僅僅設定了背景，可以自行新增其他的控制元件功能。
同樣的，新增BlueView.xaml 將Background設定為Blue。
4.在ViewModels資料夾中，新增->新建項->類， 重新命名為BlueViewModel.cs.裡面會自動生成一個BlueViewModel類。
namespace Multiple_Views.ViewModels
{
class BlueViewModel
{
}
}
同樣的新增RedViewModel.cs
5.想要實現功能，還需再編輯MainWindow.xaml程式碼
由於在不同的資料夾，新增名稱空間:
<
xmlns:viewmodels="clr-namespace:Multiple_Views.ViewModels"
xmlns:views="clr-namespace:Multiple_Views.Views"
>
新增Window.Resources並使用DataTemplate
<Window.Resources>
<DataTemplate x:Name="blueViewTemplate" DataType="{x:Type viewmodels:BlueViewModel}">
<views:BlueView DataContext="{Binding}"/>
</DataTemplate>
<DataTemplate x:Name="redViewTemplate" DataType="{x:Type viewmodels:RedViewModel}">
<views:RedView DataContext="{Binding}"/>
</DataTemplate>
</Window.Resources>
6.最後，為兩個button新增Click事件，
private void RedView_Click(object sender, RoutedEventArgs e)
{
DataContext = new RedViewModel();
}
private void BlueView_Click(object sender, RoutedEventArgs e)
{
DataContext = new BlueViewModel();
}
訪問連結：https://blog.csdn.net/Xuxianmincs/article/details/81842912?utm_medium=distribute.pc_relevant_download.none-task-blog-baidujs-1.nonecase&depth_1-utm_source=distribute.pc_relevant_download.none-task-blog-baidujs-1.nonecase