wpf写个左侧带有导航栏的UI框架

以下是一个简单的WPF UI框架，包含左侧导航栏，可根据自己的需求进行修改和扩展。

MainWindow.xaml：

<Window x:Class="WpfNavigation.UI.MainWindow"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <StackPanel Grid.Column="0" Grid.Row="0" Orientation="Vertical">
            <Button Content="Home" Margin="5" Click="Button_Click"/>
            <Button Content="Page 1" Margin="5" Click="Button_Click"/>
            <Button Content="Page 2" Margin="5" Click="Button_Click"/>
            <Button Content="Page 3" Margin="5" Click="Button_Click"/>
        </StackPanel>
        <Border Grid.Column="1" Grid.Row="1" BorderThickness="1" BorderBrush="Gray">
            <ContentControl x:Name="ContentControl"/>
        </Border>
    </Grid>
</Window>

MainWindow.xaml.cs：

using System.Windows;

namespace WpfNavigation.UI
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            // 默认显示首页
            ContentControl.Content = new HomePage();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            // 根据按钮选择显示不同的页面
            switch (((Button)sender).Content.ToString())
            {
                case "Home":
                    ContentControl.Content = new HomePage();
                    break;
                case "Page 1":
                    ContentControl.Content = new Page1();
                    break;
                case "Page 2":
                    ContentControl.Content = new Page2();
                    break;
                case "Page 3":
                    ContentControl.Content = new Page3();
                    break;
            }
        }
    }
}

HomePage.xaml：

<UserControl x:Class="WpfNavigation.UI.HomePage"
             ...
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <TextBlock Text="Welcome to Home Page!" FontSize="30" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
</UserControl>

Page1.xaml：

<UserControl x:Class="WpfNavigation.UI.Page1"
             ...
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <TextBlock Text="This is Page 1!" FontSize="30" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
</UserControl>

Page2.xaml：

<UserControl x:Class="WpfNavigation.UI.Page2"
             ...
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <TextBlock Text="This is Page 2!" FontSize="30" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
</UserControl>

Page3.xaml：

<UserControl x:Class="WpfNavigation.UI.Page3"
             ...
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <TextBlock Text="This is Page 3!" FontSize="30" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
</UserControl>

使用以上代码可以创建一个带有左侧导航栏的UI框架，具体效果如下图所示：