Wpf 使用 Prism 实战开发Day09

news2024/9/28 17:34:23

设置模块设计

1.效果图

一.系统设置模块，主要有个性化(用于更改主题颜色)，系统设置，关于更多，3个功能点。

个性化的颜色内容样式，主要是从 Material Design Themes UI简称md、提供的demo里复制代码过来使用的。

 1.设置模块里面左侧导航栏（个性化、系统设置、关于更多）实现，该功能点主要用到Prism 框架的导航模块来实现。 

  • 整体设置界面布局，主要分上下2行，第1行是设置字体以及一条横线。第2行放置整个左侧导航栏以及展现对应的动态内容。
  • 横线使用 Border 来实现 ，设置颜色属性 BorderBrush，设置粗细属性 BorderThickness
  • 第2行，根据内容布局，重新在Grid 里面创建 2列。例如，1列用于放置导航栏左侧菜单，2列用于放置，当点击导航栏菜单时动态展现的内容区域。

SettingsView.xaml  

<UserControl x:Class="MyToDo.Views.SettingsView"
             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:MyToDo.Views"
             mc:Ignorable="d" 
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
             xmlns:prism="http://prismlibrary.com/"
             xmlns:ext="clr-namespace:MyToDo.Extensions"
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition  Height="auto"/>
            <RowDefinition />
        </Grid.RowDefinitions>
        <TextBlock Text="设置" FontSize="26" Margin="20,10"/>
        <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}" />
                    </i:EventTrigger>
                </i:Interaction.Triggers>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal" Background="Transparent">
                            <materialDesign:PackIcon Kind="{Binding Icon}" Margin="15,0" />
                            <TextBlock Text="{Binding Title}" Margin="10,0"/>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
            <!--右侧菜单栏内容区域，动态区域。根据导航栏切换不同的页面-->

            <ScrollViewer  Grid.Column="1">
                <ContentControl Margin="10,0" prism:RegionManager.RegionName="{x:Static ext:PrismManager.SettingsViewRegionName}"/>
            </ScrollViewer>
           
        </Grid>
    </Grid>
</UserControl>
  1.  MyListBoxItemStyle 是App.xaml 里定义的一个静态资源文件。
  2.   App.xaml 文件源码在第3章节

 PrismManager 导航区域名称管理扩展类，添加设置页区域动态展示内容区域一个名称。

    public static class PrismManager
    {
        /// <summary>
        /// 首页区域
        /// </summary>
        public static readonly string MainViewRegionName = "MainViewReion";

        /// <summary>
        /// 设置页区域
        /// </summary>
        public static readonly string SettingsViewRegionName = "SettingsViewRegionName";

    }

左侧导航菜单栏对应后端逻辑代码 实现

SettingsViewModel.cs

public class SettingsViewModel: BindableBase
{
    public SettingsViewModel(IRegionManager regionManager)
    {
        MenuBars=new ObservableCollection<MenuBar>();
        NavigateCommand = new DelegateCommand<MenuBar>(Navigate);
        this.regionManager = regionManager;
        CreateMenuBar();
    }
    /// <summary>
    /// 导航命令
    /// </summary>
    public DelegateCommand<MenuBar> NavigateCommand { get; private set; }


    private ObservableCollection<MenuBar> menuBars;
    private readonly IRegionManager regionManager;
    /// <summary>
    /// 导航日志
    /// </summary>
    private IRegionNavigationJournal journal;
    public ObservableCollection<MenuBar> MenuBars
    {
        get { return menuBars; }
        set { menuBars = value; RaisePropertyChanged(); }
    }
    void CreateMenuBar()
    {
        MenuBars.Add(new MenuBar() { Icon = "Bowling", Title = "个性化", NameSpace = "SkinView" });
        MenuBars.Add(new MenuBar() { Icon = "CogOutline", Title = "系统设置", NameSpace = "" });
        MenuBars.Add(new MenuBar() { Icon = "InformationOutline", Title = "关于更多", NameSpace = "AboutView" });
    }
    /// <summary>
    /// 导航方法
    /// </summary>
    /// <param name="bar">菜单</param>
    private void Navigate(MenuBar bar)
    {
        //命名空间为空，不进行导航
        if (bar == null || string.IsNullOrEmpty(bar.NameSpace)) return;

        regionManager.Regions[PrismManager.SettingsViewRegionName].RequestNavigate(bar.NameSpace);
    }
}

完成以上步骤后，就能显示左侧菜单导航栏了。

2.左侧菜单点击时，右侧区域需动态展示对应的内容

  • 当点击对应的导航菜单，例如个性化或系统设置或关于更多时，右侧需要根据不同的导航菜单，动态展现不同的内容。
  • 需要创建右侧内容区域对应的视图(V)-业务逻辑(VM)-实体类(M)，俗称MVVM 模式。

以个性化 （SkinView）为例：只需要创建SkinView.xaml 和 SkinViewModel。

创建完毕后，需要在 App.xaml.cs 中，进行模块注入。

 containerRegistry.RegisterForNavigation<SkinView, SkinViewModel>();

 二.个性化（SkinView）页面功能实现

  1. 个性化内容页面分上下2行，只需要创建一个2行即可。 
  2. 添加命名空间  xmlns:materialDesignColors="clr-namespace:MaterialDesignColors;assembly=MaterialDesignColors"
  3. UserControl.Resources 表示当前用户控件的资源文件（当前窗口的资源文件）
  4. RelativeSource={RelativeSource AncestorType=local:SkinView} 表示的是查找绑定，需要绑定到当前的SkinView
  5. 添加颜色转换器
  6. 转换器命名空间 xmlns:converters="clr-namespace:MyToDo.Common.Converters"

SkinView.xaml

<UserControl x:Class="MyToDo.Views.SkinView"
             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:MyToDo.Views"
             xmlns:materialDesignColors="clr-namespace:MaterialDesignColors;assembly=MaterialDesignColors"
             xmlns:converters="clr-namespace:MyToDo.Common.Converters"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <!--当前窗口的资源文件-->
    <UserControl.Resources>
        <converters:ColorToBrushConverter x:Key="ColorToBrushConverter" />
        <DataTemplate x:Key="SwatchColorTemplate" DataType="{x:Type Color}">
            <Button Width="40"
          Height="40" BorderThickness="0" Margin="1"
          Background="{Binding Converter={StaticResource ColorToBrushConverter}}"
          Command="{Binding DataContext.ChangeHueCommand, RelativeSource={RelativeSource AncestorType=local:SkinView}}"
          CommandParameter="{Binding}">
            </Button>
        </DataTemplate>
    </UserControl.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition />
        </Grid.RowDefinitions>

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

        <ItemsControl Grid.Row="1" 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>
    </Grid>
</UserControl>

SkinViewModel.cs

public class SkinViewModel: BindableBase
{
    public SkinViewModel()
    {
        ChangeHueCommand = new DelegateCommand<object>(ChangeHue);
    }
    private bool _isDarkTheme=true;
    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();
    private void ChangeHue(object? obj)
    {
        var hue = (Color)obj!;

        Theme theme = (Theme)paletteHelper.GetTheme();

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

        paletteHelper.SetTheme(theme);
    }
    private static void ModifyTheme(Action<Theme> modificationAction)
    {
        PaletteHelper paletteHelper = new PaletteHelper();
        Theme theme = (Theme)paletteHelper.GetTheme();

        modificationAction?.Invoke(theme);

        paletteHelper.SetTheme(theme);
    }
}

ColorToBrushConverter.cs   颜色转换器

    [ValueConversion(typeof(Color), typeof(Brush))]
    public class ColorToBrushConverter : IValueConverter
    {
        public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
        {
            if (value is Color color)
            {
                SolidColorBrush rv = new(color);
                rv.Freeze();
                return rv;
            }
            return Binding.DoNothing;
        }

        public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
        {
            if (value is SolidColorBrush brush)
            {
                return brush.Color;
            }
            return default(Color);
        }
    }

三.系统设置页以及关于更多页

  • 系统设置页是空，可根据需求开发
  • 关于更多页，也就是一些简介

例如，关于更多页设计。第一步，添加一个 用户控件，并且名称为AboutView.xaml。第二步，对用户控件进行注入。然后写功能。。。

注：个性化页面代码，均从Md框架中搬运过来的！！！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1363723.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

CHS_02.1.1.2+操作系统的特征

CHS_02.1.1.2+操作系统的特征

CHS_02.1.1.2操作系统的特征 操作系统的四个特征并发这个特征为什么并发性对于操作系统来说是一个很重要的基本特性资源共享虚拟异步性 各位同学 大家好 在这个小节当中 我们会学习 操作系统的四个特征 操作系统有并发 共享 虚拟和异部这四个基本的特征 其中 并发和共享是两个…
阅读更多...
1871_什么是PCB

1871_什么是PCB

Grey 全部学习内容汇总&#xff1a; https://github.com/GreyZhang/g_hardware_basic 1871_什么是PCB 简单的PCB的缩写自然很容易理解&#xff0c;不过PCB涉及到的一些概念性的知识会比一个简单的缩写多得多。这里根据AD官方上的一个页面来整理一下这方面的基础知识点。 主…
阅读更多...
【⭐AI工具⭐】AI工具导航推荐

【⭐AI工具⭐】AI工具导航推荐

目录 零 工具导航&#x1f449;【[AI工具集导航](https://ai-bot.cn/)】&#x1f448;&#x1f449;【[iForAI](https://iforai.com/)】&#x1f448;&#x1f449;【[AInav](https://www.ainav.cn/)】&#x1f448;&#x1f449;【[Navi AI 导航](https://www.naviai.cn/)】&a…
阅读更多...
YTM32的低功耗PowerDown模式及唤醒管理器WKU模块

YTM32的低功耗PowerDown模式及唤醒管理器WKU模块

文章目录 Introduction专门的唤醒源管理器WKU外部的唤醒引脚内部的触发信号 进入PowerDown模式的操作流进入低功耗模式配合使用的其他模块 性能指标低功耗电流唤醒时间 Conclusion Introduction YTM32的低功耗系统中有设计了多种工作模式&#xff0c;功耗从高到低&#xff0c;…
阅读更多...
大数据时代必备技能！Shell脚本学习网站助你一臂之力！

大数据时代必备技能！Shell脚本学习网站助你一臂之力！

介绍&#xff1a;Shell脚本是一种用于自动化任务的脚本语言&#xff0c;它使用Shell命令来执行一系列操作。Shell脚本通常以.sh为扩展名&#xff0c;并使用#!/bin/bash作为第一行来指定使用的Shell解释器。 在Shell脚本中&#xff0c;我们可以使用各种命令和控制结构来实现自动…
阅读更多...
【大数据】Flink CDC 的概览和使用

【大数据】Flink CDC 的概览和使用

Flink CDC 的概览和使用 1.什么是 CDC2.什么是 Flink CDC3.Flink CDC 前生今世3.1 Flink CDC 1.x3.2 Flink CDC 2.x3.3 Flink CDC 3.x 4.Flink CDC 使用5.Debezium 标准 CDC Event 格式详解 1.什么是 CDC CDC&#xff08;Change Data Capture&#xff0c;数据变更抓取&#xf…
阅读更多...
汽车电子行业的 C 语言编程标准

汽车电子行业的 C 语言编程标准

前言 之前分享了一些编程规范相关的文章&#xff0c;有位读者提到了汽车电子行业的MISRA C标准&#xff0c;说这个很不错。 本次给大家找来了一篇汽车电子行业的MISRA C标准的文章一同学习下。 什么是MISRA&#xff1f; MISRA (The Motor Industry Software Reliability Ass…
阅读更多...
Linux-文件系统管理实验2

Linux-文件系统管理实验2

1、将bin目录下的所有文件列表放到bin.txt文档中&#xff0c;并将一共有多少个命令的结果信息保存到该文件的最后一行。统计出文件中以b开头的所有命令有多少个&#xff0c;并将这些命令保存到b.txt文档中。将文档中以p结尾的所有命令保存到p.txt文件中&#xff0c;并统计有多少…
阅读更多...
【linux】Ubuntu 22.04.3 LTS截屏

【linux】Ubuntu 22.04.3 LTS截屏

一、快捷键 交互式录屏 ShiftCtrltAltR 交互式截图 Print 对窗口进行截图 AltPrint 截图 ShiftPrint 快捷键可能取决于使用的桌面环境和个人的键盘快捷键设置。如果上述快捷键不起作用&#xff0c;可能需要检查系统设置中的键盘快捷键部分&#xff0c;以了解系统中截图的…
阅读更多...
法线变换矩阵的推导

法线变换矩阵的推导

背景 在冯氏光照模型中&#xff0c;其中的漫反射项需要我们对法向量和光线做点乘计算。 从顶点着色器中读入的法向量数据处于模型空间&#xff0c;我们需要将法向量转换到世界空间&#xff0c;然后在世界空间中让法向量和光线做运算。这里便有一个问题&#xff0c;如何将法线…
阅读更多...
问答领域的基本了解

问答领域的基本了解

问答领域是人工智能领域中的一个重要研究方向&#xff0c;旨在让计算机能够理解人类提出的问题&#xff0c;并以自然语言形式回答这些问题。问答系统可以应用于各种场景&#xff0c;包括搜索引擎、虚拟助手、智能客服等。 一.目标 目标&#xff1a; 问答系统的主要目标是使计…
阅读更多...
逆向一个Go程序

逆向一个Go程序

前奏 事先声明&#xff0c;自导自演&#xff0c;纯属为了演示基本的逆向思维 用Go写一段模拟登录的代码&#xff1a; package mainimport ("fmt" )func main() {pass : ""fmt.Print("input password:")fmt.Scan(&pass)if pass "hel…
阅读更多...
基于YOLOv3开发构建道路交通场景下CCTSDB2021交通标识检测识别系统

基于YOLOv3开发构建道路交通场景下CCTSDB2021交通标识检测识别系统

交通标志检测是交通标志识别系统中的一项重要任务。与其他国家的交通标志相比&#xff0c;中国的交通标志有其独特的特点。卷积神经网络&#xff08;CNN&#xff09;在计算机视觉任务中取得了突破性进展&#xff0c;在交通标志分类方面取得了巨大的成功。CCTSDB 数据集是由长沙…
阅读更多...
柠檬Lemon测评机的配置和测试方法

柠檬Lemon测评机的配置和测试方法

柠檬Lemon测评机的配置和测试方法 只需3步，即可配置好柠檬 第一步：选择g++，点击下一步 第二步：找到g++的目录，添加编译器，点击下一步 第三步：检查结果，点击完成。（此时，配置完成） 只需3步，即可用柠檬做考试测试 第一步：新建比赛
阅读更多...
如何实现公网访问GeoServe Web管理界面共享空间地理信息【内网穿透】

如何实现公网访问GeoServe Web管理界面共享空间地理信息【内网穿透】

文章目录 前言1.安装GeoServer2. windows 安装 cpolar3. 创建公网访问地址4. 公网访问Geo Servcer服务5. 固定公网HTTP地址 前言 GeoServer是OGC Web服务器规范的J2EE实现&#xff0c;利用GeoServer可以方便地发布地图数据&#xff0c;允许用户对要素数据进行更新、删除、插入…
阅读更多...
普中STM32-PZ6806L开发板(资料收集...)

普中STM32-PZ6806L开发板(资料收集...)

简介 逐渐收集一些开发过程中使用到的文档资料数据手册 DS18B20 数据手册 DS18B20 Datasheet 开发文档 STM32F1各种文档 https://www.st.com/en/embedded-software/stm32cubef1.html#documentation HAL库文档开发文档 你使用的HAL文档, 在STM32CubeMX生成过程的最下面有…
阅读更多...
uniapp 解决安卓App使用uni.requestPayment实现沙箱环境支付宝支付报错

uniapp 解决安卓App使用uni.requestPayment实现沙箱环境支付宝支付报错

背景&#xff1a;uniapp与Java实现的安卓端app支付宝支付&#xff0c;本想先在沙箱测试环境测支付&#xff0c;但一直提示“商家订单参数异常&#xff0c;请重新发起付款。”&#xff0c;接着报错信息就是&#xff1a;{ "errMsg": "requestPayment:fail [pa…
阅读更多...
基于springboot智慧食堂管理系统源码和论文

基于springboot智慧食堂管理系统源码和论文

随着Internet的发展&#xff0c;人们的日常生活已经离不开网络。未来人们的生活与工作将变得越来越数字化&#xff0c;网络化和电子化。网上管理&#xff0c;它将是直接管理“智慧食堂”系统的最新形式。本论文是以构建“智慧食堂”系统为目标&#xff0c;使用java技术制作&…
阅读更多...
Spring之循环依赖底层源码（一）

Spring之循环依赖底层源码（一）

文章目录 一、简介1. 回顾2. 循环依赖3. Bean的生命周期回顾4. 三级缓存5. 解决循环依赖的思路 二、源码分析三、相关问题1. Async情况下的循环依赖解析2. 原型Bean情况下的循环依赖解析3. 构造方法导致的循环依赖解析 一、简介 1. 回顾 前面首先重点分析了Spring Bean的整个…
阅读更多...
消息队列-RocketMQ-概览与搭建

消息队列-RocketMQ-概览与搭建

RocketMQ 领域模型 RockeMQ整体结构预览 RocketMQ 中的一些概念 Topic&#xff1a;主题&#xff0c;可以理解为类别、分类的概念 MessageQueue&#xff1a;消息队列&#xff0c;存储数据的一个容器&#xff08;队列索引数据&#xff09;&#xff0c;默认每个 Topic 下有 4 个队…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023