（六）设置界面

设置主页

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="auto" />
        <RowDefinition />
    </Grid.RowDefinitions>

    <TextBlock
        Margin="20,10"
        FontSize="26"
        Text="设置" />
    <Border BorderBrush="#DDDDDD" BorderThickness="0,0,0,0.3" />

    <Grid Grid.Row="1" Margin="50">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="220" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <!--  左侧菜单栏  -->
        <ListBox
            x:Name="menuBar"
            ItemContainerStyle="{StaticResource MyListBoxItemStyle}"
            ItemsSource="{Binding MenuBars}">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="SelectionChanged">
                    <!--  触发事件：被选择  -->
                    <i:InvokeCommandAction Command="{Binding NavigateCommand}" CommandParameter="{Binding ElementName=menuBar, Path=SelectedItem}" />
                    <!--  绑定的命令NavigateCommand 传递参数是菜单列表，绑定的是被选择的那一项  -->
                </i:EventTrigger>
            </i:Interaction.Triggers>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Background="Transparent" Orientation="Horizontal">
                        <materialDesign:PackIcon Margin="15,0" Kind="{Binding Icon}" />
                        <TextBlock Margin="10,0" Text="{Binding Title}" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

        <!--  动态变化的区域用导航来做  -->
        <ContentControl
            Grid.Column="1"
            Margin="10,0"
            prism:RegionManager.RegionName="{x:Static ext:PrismManager.SettingsViewRegionName}" />
    </Grid>
</Grid>

测试代码大部分可以用主页的

 public class SettingsViewModel : BindableBase
 {
     public SettingsViewModel(IRegionManager regionManager)
     {
         MenuBars = new ObservableCollection<MenuBar>();
         this.regionManager = regionManager;
         NavigateCommand = new DelegateCommand<MenuBar>(Navigate);
         CreateMenuBar();
     }

     public DelegateCommand<MenuBar> NavigateCommand { get; private set; }
     private ObservableCollection<MenuBar> menuBars;
     private readonly IRegionManager regionManager;

     public ObservableCollection<MenuBar> MenuBars
     {
         get { return menuBars; }
         set { menuBars = value; RaisePropertyChanged(); }//RaisePropertyChanged实现双向交互的方式
     }
     private void Navigate(MenuBar obj)
     {//用它找到注册的区域prism中的接口
         if (obj == null || string.IsNullOrWhiteSpace(obj.NameSpace))
             return;
         regionManager.Regions[PrismManager.SettingsViewRegionName].RequestNavigate(obj.NameSpace);
     }

     void CreateMenuBar()
     {
         menuBars.Add(new MenuBar() { Icon = "Palette", Title = "个性化", NameSpace = "SkinView" });
         menuBars.Add(new MenuBar() { Icon = "Cog", Title = "系统设置", NameSpace = "SystemView" });
         menuBars.Add(new MenuBar() { Icon = "Information", Title = "关于更多", NameSpace = "AboutView" });
     }
 }

分页面三个

分页面主要完成个性化换色
通过materialDesignColors现有的直接复制过来，进行修改

    <UserControl.Resources>
        <converters:ColorToBrushConverter x:Key="ColorToBrushConverter" />
        <DataTemplate x:Key="SwatchColorTemplate" DataType="{x:Type Color}">
            <Button
                Width="40"
                Height="40"
                Margin="1"
                Background="{Binding Converter={StaticResource ColorToBrushConverter}}"
                BorderThickness="0"
                Command="{Binding DataContext.ChangeHueCommand, RelativeSource={RelativeSource AncestorType=local:SkinView}}"
                CommandParameter="{Binding}" />
        </DataTemplate>
    </UserControl.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition />
        </Grid.RowDefinitions>

        <StackPanel Margin="0,10" Orientation="Horizontal">
            <TextBlock Text="浅色" />
            <ToggleButton Margin="8,0,16,0" IsChecked="{Binding IsDarkTheme}" />
            <TextBlock Text="深色" />
        </StackPanel>

        <!--  色块用插件现有的  -->
        <ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Hidden">
            <ItemsControl ItemsSource="{Binding Swatches}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate DataType="{x:Type materialDesignColors:ISwatch}">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock
                                Width="80"
                                VerticalAlignment="Center"
                                Text="{Binding Name, Mode=OneTime}" />
                            <ItemsControl ItemTemplate="{StaticResource SwatchColorTemplate}" ItemsSource="{Binding Hues, Mode=OneTime}">
                                <ItemsControl.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <VirtualizingStackPanel Orientation="Horizontal" />
                                    </ItemsPanelTemplate>
                                </ItemsControl.ItemsPanel>
                            </ItemsControl>
                        </StackPanel>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </ScrollViewer>
    </Grid>

业务层多复制materialDesignColors的业务代码：进行修改

 public class SkinViewModel : BindableBase
 {
     private bool _isDarkTheme;
     public bool IsDarkTheme
     {
         get => _isDarkTheme;
         set
         {
             if (SetProperty(ref _isDarkTheme, value))
             {
                 ModifyTheme(theme => theme.SetBaseTheme(value ? Theme.Dark : Theme.Light));
             }
         }
     }

     //颜色列表
     public IEnumerable<ISwatch> Swatches { get; } = SwatchHelper.Swatches;

     //改变颜色的命令
     public DelegateCommand<object> ChangeHueCommand { get; private set; }
     private readonly PaletteHelper paletteHelper = new PaletteHelper();

     public SkinViewModel()
     {
         ChangeHueCommand = new DelegateCommand<object>(ChangeHue);
     }

     private static void ModifyTheme(Action<ITheme> modificationAction)
     {//改Theme为ITheme
         var paletteHelper = new PaletteHelper();
         ITheme theme = paletteHelper.GetTheme();
         modificationAction?.Invoke(theme);
         paletteHelper.SetTheme(theme);
     }
     private void ChangeHue(object obj)
     {
         var hue = (Color)obj;
         ITheme theme = paletteHelper.GetTheme();

         theme.PrimaryLight = new ColorPair(hue.Lighten());
         theme.PrimaryMid = new ColorPair(hue);
         theme.PrimaryDark = new ColorPair(hue.Darken());

         paletteHelper.SetTheme(theme);
     }
 }