Wpf 使用 Prism 实战开发Day03

这篇具有很好参考价值的文章主要介绍了Wpf 使用 Prism 实战开发Day03。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

 一.实现左侧菜单绑定

效果图:Wpf 使用 Prism 实战开发Day03,WPF入门,wpfWpf 使用 Prism 实战开发Day03,WPF入门,wpf


1.首先需要在项目中创建 mvvm 的架构模式

Wpf 使用 Prism 实战开发Day03,WPF入门,wpf

  •   创建 Models ,放置实体类。

实体类需要继承自Prism 框架的 BindableBase,目的是让实体类支持数据的动态变更!

  •  例如: 系统导航菜单实体类
/ <summary>
	/// 系统导航菜单实体类
	/// </summary>
public class MenuBar:BindableBase
 {
		private string icon;

		/// <summary>
		/// 菜单图标
		/// </summary>
		public string Icon
		{
get { return icon; }
set { icon = value; }
		}

		private string title;

		/// <summary>
		/// 菜单名称
		/// </summary>
		public string Title
		{
get { return title; }
set { title = value; }
		}

		private string nameSpace;

		/// <summary>
		/// 菜单命名空间
		/// </summary>
		public string NameSpace
		{
get { return nameSpace; }
set { nameSpace = value; }
		}

	}

  • 创建View文件夹  放置前端显示页面 。例如:创建首页:MainView.xaml
  • 创建ViewModel 文件夹,放置前端逻辑处理类。意思是:有前端页面同时,也要有对应的后台业务逻辑处理类。例如:MainViewModel

 Wpf 使用 Prism 实战开发Day03,WPF入门,wpf

  1. 使用了Prism 框架,一些视图或类的定义都是有约定的。例如:视图统一使用xxxView 结尾。视图模形统一使用xxxViewModel 结尾。这样做的原因是:第一规范,第二,方便使用 Prism 进行动态的方式绑定上下文的时候,能自动找到对应类。
  2. Prism 动态上下文绑定方式,引入命名空间,把 AutoWireViewModel 设置成 True
 xmlns:prism="http://prismlibrary.com/"
 prism:ViewModelLocator.AutoWireViewModel="True"

2.创建MainViewModel 逻辑处理类

MainViewModel 类同样也需要继承自Prism 框架的 BindableBase 

  •  创建左侧菜单的数据,需要使用到一个动态的属性集合 ObservableCollection 来存放菜单的数据

Wpf 使用 Prism 实战开发Day03,WPF入门,wpf

  • 创建菜单数据
    public class MainViewModel: BindableBase
    {
        public MainViewModel()
        {
            MenuBars=new ObservableCollection<MenuBar>();
            CreateMenuBar();
        }
        private ObservableCollection<MenuBar> menuBars;

        public ObservableCollection<MenuBar> MenuBars
        {
            get { return menuBars; }
            set { menuBars = value; RaisePropertyChanged(); }
        }
        void CreateMenuBar()
        {
            MenuBars.Add(new MenuBar() { Icon="Home",Title="首页",NameSpace="IndexView"});
            MenuBars.Add(new MenuBar() { Icon = "NotebookCheckOutline", Title = "待办事项", NameSpace = "ToDoView" });
            MenuBars.Add(new MenuBar() { Icon = "NotebookPlusOutline", Title = "忘备录", NameSpace = "MemoView" });
            MenuBars.Add(new MenuBar() { Icon = "Cog", Title = "设置", NameSpace = "SettingsView" });
        }
    }
  • NameSpace:主要用于导航
  • Icon:是Material DesignThemes UI 框架里面的图标名称

3.MainView.xaml 前端绑定数据

  •  列表数据的绑定,使用ListBox 的自定义模板,也就是 ListBox.ItemTemplate,并且写法是固定的
<!--列表-->
<ListBox>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <!--在这里添加内容数据-->
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>
  • 例如:结合上面创建MainViewModel 类,给MainView.xaml 渲染数据
<!--列表-->
<ListBox ItemsSource="{Binding MenuBars}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <materialDesign:PackIcon Kind="{Binding Icon}" Margin="15,0" />
                <TextBlock Text="{Binding Title}" Margin="10,0"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>
  •  MainView.xaml 添加动态绑定 上下文
xmlns:prism="http://prismlibrary.com/"
prism:ViewModelLocator.AutoWireViewModel="True"

注意:项目中的MainWindow.xaml 已经改成了MainView.xaml,并且把启动页设置成 MainView了

Wpf 使用 Prism 实战开发Day03,WPF入门,wpf

  • 最终项目结构 

Wpf 使用 Prism 实战开发Day03,WPF入门,wpf

 4.左侧菜单样式调整

  • 在App.xaml 资源文件中,更改默认的主题颜色

Wpf 使用 Prism 实战开发Day03,WPF入门,wpf

  • 更改左侧列表选择的样式 

 重写自定义样式

  • 在App.xaml 文件中 资源字典 ResourceDictionary 节点中,设置Style 属性来进行样式重写

Style 使用方式

  1.  TargetType :设置作用的目标类型
  2.  Setter :设计器,里面有2个常用属性,分别是Property 和Value。用来改变设置作用的目标类型一些属性的值
  3. key: 通过指定的key 来使用重写的样式

例如:设置ListBoxItem 属性中的最小行高为40

<Style TargetType="ListBoxItem">
    <Setter Property="MinHeight" Value="40"/>
</Style>

     3. Property 中有一个特别的属性:Template。用于改变控件的外观样式。并且也有固定的写法

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type ListBoxItem}">
            
        </ControlTemplate>
    </Setter.Value>
</Setter>

 TargetType 有2种写法

  1. 一种是直接用Style 设置一些属性,可以这样写 TargetType="ListBoxItem"
  2. 另外一种写法是,当需要使用到自定义模板,也就是要改变控件的外观样式时,Property 设置的值为 Template,里面TargetType 写法就变成这样 TargetType="{x:Type ListBoxItem}"
  3. 使用自定义的模板时,需要使用到一个属性 ContentPresenter,把原有模板的属性原封不动的投放到自定义模板。

    4. 触发器,它按条件应用属性值或执行操作

 如果使用Template 自定义控件样式后,需要搭配触发器进行使用。

例如:

<ControlTemplate TargetType="{x:Type ListBoxItem}">
    <Grid>
        <!--内容最左侧的样式-->
        <Border x:Name="borderHeader"/>
        <!--内容选中的样式-->
        <Border x:Name="border"/>
        <!--内容呈现,使用自定义模板时,不加该属性,原先的内容无法呈现-->
        <ContentPresenter 
            HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    </Grid>
     <!--触发器-->
    <ControlTemplate.Triggers>
        <!--如果是选中状态-->
        <Trigger Property="IsSelected" Value="True">
            <!--第一个Border 设置边框样式-->
            <Setter Property="BorderThickness" TargetName="borderHeader" Value="4,0,0,0"/>
            <!--第一个Border 设置边框颜色,value 动态绑定主要是为了适应主题颜色更改时,边框也着变-->
            <Setter Property="BorderBrush" TargetName="borderHeader" Value="{DynamicResource PrimaryHueLightBrush}"/>
            <!--第二个border 设置选中的样式-->
            <Setter Property="Background" TargetName="border" Value="{DynamicResource PrimaryHueLightBrush}"/>
            <!--第二个border 设置选中的透明度-->
            <Setter Property="Opacity" TargetName="border" Value="0.2"/>
        </Trigger>
        <!--鼠标悬停触发器,如果鼠标悬停时-->
        <Trigger Property="IsMouseOver" Value="True">
            <!--第二个border 设置选中的样式-->
            <Setter Property="Background" TargetName="border" Value="{DynamicResource PrimaryHueLightBrush}"/>
            <!--第二个border 设置选中的透明度-->
            <Setter Property="Opacity" TargetName="border" Value="0.2"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

   5. 样式写完后,需要在MainView.xmal 的ListBox中使用这个样式资源文件,通过指定Key 来使用。

Wpf 使用 Prism 实战开发Day03,WPF入门,wpf文章来源地址https://www.toymoban.com/news/detail-714195.html

 二.源码

1.MainView.xaml

<Window x:Class="MyToDo.Views.MainView"
        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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:MyToDo"
        xmlns:prism="http://prismlibrary.com/"
        prism:ViewModelLocator.AutoWireViewModel="True"
        WindowStyle="None" WindowStartupLocation="CenterScreen" AllowsTransparency="True"
         Style="{StaticResource MaterialDesignWindow}"
        TextElement.Foreground="{DynamicResource MaterialDesignBody}"
        Background="{DynamicResource MaterialDesignPaper}"
        TextElement.FontWeight="Medium"
        TextElement.FontSize="14"
        FontFamily="{materialDesign:MaterialDesignFont}"
        mc:Ignorable="d"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        Title="MainWindow" Height="768" Width="1280">
    <materialDesign:DialogHost DialogTheme="Inherit"
                           Identifier="RootDialog"
                           SnackbarMessageQueue="{Binding ElementName=MainSnackbar, Path=MessageQueue}">

        <materialDesign:DrawerHost IsLeftDrawerOpen="{Binding ElementName=MenuToggleButton, Path=IsChecked}">
            <!--左边菜单-->
            <materialDesign:DrawerHost.LeftDrawerContent>
                <DockPanel MinWidth="220" >
                 
                    <!--头像-->
                    <StackPanel DockPanel.Dock="Top" Margin="0,20">
                        <Image Source="/Images/user.jpg" Width="50" Height="50">
                            <Image.Clip>
                                <EllipseGeometry Center="25,25" RadiusX="25" RadiusY="25" />
                            </Image.Clip>
                        </Image>
                        <TextBlock Text="WPF gg" Margin="0,10" HorizontalAlignment="Center" />
                    </StackPanel>
                    
                    <!--列表-->
                    <ListBox ItemContainerStyle="{StaticResource MyListBoxItemStyle}" ItemsSource="{Binding MenuBars}">
                        <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>
                    
                    
                </DockPanel>
            </materialDesign:DrawerHost.LeftDrawerContent>

            <DockPanel >
                <!--导航条色块-->
                <materialDesign:ColorZone Padding="16" x:Name="ColorZone"
                                materialDesign:ElevationAssist.Elevation="Dp4"
                                DockPanel.Dock="Top"
                                Mode="PrimaryMid">
                    <DockPanel LastChildFill="False">
                        <!--上左边内容-->
                        <StackPanel Orientation="Horizontal">
                            <ToggleButton x:Name="MenuToggleButton"
                          AutomationProperties.Name="HamburgerToggleButton"
                          IsChecked="False"
                          Style="{StaticResource MaterialDesignHamburgerToggleButton}" />

                            <Button Margin="24,0,0,0"
                    materialDesign:RippleAssist.Feedback="{Binding RelativeSource={RelativeSource Self}, Path=Foreground, Converter={StaticResource BrushRoundConverter}}"
                    Command="{Binding MovePrevCommand}"
                    Content="{materialDesign:PackIcon Kind=ArrowLeft,
                                                      Size=24}"
                    Foreground="{Binding RelativeSource={RelativeSource AncestorType={x:Type FrameworkElement}}, Path=(TextElement.Foreground)}"
                    Style="{StaticResource MaterialDesignToolButton}"
                    ToolTip="Previous Item" />

                            <Button Margin="16,0,0,0"
                    materialDesign:RippleAssist.Feedback="{Binding RelativeSource={RelativeSource Self}, Path=Foreground, Converter={StaticResource BrushRoundConverter}}"
                    Command="{Binding MoveNextCommand}"
                    Content="{materialDesign:PackIcon Kind=ArrowRight,
                                                      Size=24}"
                    Foreground="{Binding RelativeSource={RelativeSource AncestorType={x:Type FrameworkElement}}, Path=(TextElement.Foreground)}"
                    Style="{StaticResource MaterialDesignToolButton}"
                    ToolTip="Next Item" />
                            <TextBlock Margin="16,0,0,0"
                             HorizontalAlignment="Center"
                             VerticalAlignment="Center"
                             AutomationProperties.Name="Material Design In XAML Toolkit"
                             FontSize="22"
                             Text="笔记本" />
                        </StackPanel>
                        <!--上右边图标-->
                        <StackPanel DockPanel.Dock="Right" Orientation="Horizontal">
                            <Image Source="/Images/user.jpg" Width="25" Height="25">
                                <Image.Clip>
                                    <EllipseGeometry Center="12.5,12.5" RadiusX="12.5" RadiusY="12.5" />
                                </Image.Clip>
                            </Image>
                            <Button x:Name="btnMin" Style="{StaticResource MaterialDesignFlatMidBgButton}">
                                <materialDesign:PackIcon Kind="MoveResizeVariant" />
                            </Button>
                            <Button x:Name="btnMax" Style="{StaticResource MaterialDesignFlatMidBgButton}">
                                <materialDesign:PackIcon Kind="CardMultipleOutline" />
                            </Button>
                            <Button x:Name="btnClose" Style="{StaticResource MaterialDesignFlatMidBgButton}" Cursor="Hand">
                                <materialDesign:PackIcon Kind="WindowClose" />
                            </Button>
                        </StackPanel>
                    </DockPanel>

                </materialDesign:ColorZone>


            </DockPanel>
        </materialDesign:DrawerHost>
    </materialDesign:DialogHost>
</Window>

2.MainViewModel

namespace MyToDo.ViewModels
{
    public class MainViewModel: BindableBase
    {
        public MainViewModel()
        {
            MenuBars=new ObservableCollection<MenuBar>();
            CreateMenuBar();
        }
        private ObservableCollection<MenuBar> menuBars;

        public ObservableCollection<MenuBar> MenuBars
        {
            get { return menuBars; }
            set { menuBars = value; RaisePropertyChanged(); }
        }
        void CreateMenuBar()
        {
            MenuBars.Add(new MenuBar() { Icon="Home",Title="首页",NameSpace="IndexView"});
            MenuBars.Add(new MenuBar() { Icon = "NotebookCheckOutline", Title = "待办事项", NameSpace = "ToDoView" });
            MenuBars.Add(new MenuBar() { Icon = "NotebookPlusOutline", Title = "忘备录", NameSpace = "MemoView" });
            MenuBars.Add(new MenuBar() { Icon = "Cog", Title = "设置", NameSpace = "SettingsView" });
        }
    }
}

3.App.xaml

<prism:PrismApplication x:Class="MyToDo.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:MyToDo"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             xmlns:prism="http://prismlibrary.com/">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <materialDesign:BundledTheme BaseTheme="Dark" PrimaryColor="DeepPurple" SecondaryColor="Lime" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
            </ResourceDictionary.MergedDictionaries>
            <Style x:Key="MyListBoxItemStyle" TargetType="ListBoxItem">
                <Setter Property="MinHeight" Value="40"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ListBoxItem}">
                            <Grid>
                                <!--内容最左侧的样式-->
                                <Border x:Name="borderHeader"/>
                                <!--内容选中的样式-->
                                <Border x:Name="border"/>
                                <!--内容呈现,使用自定义模板时,不加该属性,原先的内容无法呈现-->
                                <ContentPresenter 
                                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Grid>
                             <!--触发器-->
                            <ControlTemplate.Triggers>
                                <!--如果是选中状态-->
                                <Trigger Property="IsSelected" Value="True">
                                    <!--第一个Border 设置边框样式-->
                                    <Setter Property="BorderThickness" TargetName="borderHeader" Value="4,0,0,0"/>
                                    <!--第一个Border 设置边框颜色,value 动态绑定主要是为了适应主题颜色更改时,边框也着变-->
                                    <Setter Property="BorderBrush" TargetName="borderHeader" Value="{DynamicResource PrimaryHueLightBrush}"/>
                                    <!--第二个border 设置选中的样式-->
                                    <Setter Property="Background" TargetName="border" Value="{DynamicResource PrimaryHueLightBrush}"/>
                                    <!--第二个border 设置选中的透明度-->
                                    <Setter Property="Opacity" TargetName="border" Value="0.2"/>
                                </Trigger>
                                <!--鼠标悬停触发器,如果鼠标悬停时-->
                                <Trigger Property="IsMouseOver" Value="True">
                                    <!--第二个border 设置选中的样式-->
                                    <Setter Property="Background" TargetName="border" Value="{DynamicResource PrimaryHueLightBrush}"/>
                                    <!--第二个border 设置选中的透明度-->
                                    <Setter Property="Opacity" TargetName="border" Value="0.2"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ResourceDictionary>
    </Application.Resources>
</prism:PrismApplication>

到了这里,关于Wpf 使用 Prism 实战开发Day03的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Wpf 使用 Prism 实战开发Day14

    备忘录控制器(MemoController)和待办事项控制器 (ToDoController)功能实现差不多一样。基本套路就是: 定义控制器(Controller) 定义数据传输层(Dto) 配置实体类(Entity)和数据传输类(Dto) 关系映射(Auto Mapper) 定义服务接口(IService) 实现服务接口 (Service) 把服务注入控

    2024年01月22日
    浏览(46)
  • Wpf 使用 Prism 实战开发Day11

     仓储(rep):仓储接口定义了对实体类访问数据库及操作的方法。它统一管理数据访问的逻辑,并与业务逻辑层进行解耦。 简单的理解就是对访问数据库的一层接口封装。 工作单元(uow):用来保证我们处理业务逻辑的,稳定性,完整性。防止在业务操作过程中,涉及对数据

    2024年02月02日
    浏览(49)
  • Wpf 使用 Prism 实战开发Day19

    由于待办事项功能页,数据已正常渲染出来了。但页面新增,查询,修改,删除等功能还未实现。本章节来实现页面的请求后台实现CURD(增删改查) 根据渲染出来的待办事项,点击对应的待办事项时,查找出该条数据,显展示在编辑窗口中。 同时在搜索框中输入的参数或选

    2024年04月23日
    浏览(37)
  • Wpf 使用 Prism 实战开发Day13

    在上一节  ToDoController 控制器,或 IToDoService 服务接口中,方法的传参都是直接传的实体类。但在实际开发过程中,这样是不允许的。标准且规范的做法是,定义一个数据传输层,即Dto层。 1. 创建 BaseDto 基类,用于存放共用属性。 2. 创建待办事项 Dto类,并继承自 BaseDto 基类

    2024年01月20日
    浏览(45)
  • Wpf 使用 Prism 实战开发Day08

    1.效果图 MemoView.xaml 页面代码      1. 在  ItemsControl 中,添加滚动条  ScrollViewer  这样使用 ScrollViewer 把内容区域包裹起来,就能让内容区域支持滚动了        2 . 添加滚动条后的效果图如下:  使用md 中的一个自带动画 md:TransitioningContent 来实现该功能  需要设置一个属性,

    2024年02月03日
    浏览(38)
  • WPF超好用的框架Prism入门使用,上位机赶紧学起来!

    WPF框架Prism是一种用于开发模块化、可重用和可测试的WPF应用程序的框架。它提供了一种简单而强大的方式来管理复杂应用程序的代码和构建高度可扩展的应用程序。 如果您想使用Prism框架来开发WPF应用程序,需要学习以下几个方面: MVVM模式 :Prism基于MVVM模式,因此需要了

    2024年02月01日
    浏览(39)
  • WPF开发学生信息管理系统【WPF+Prism+MAH+WebApi】(四)

    最近通过WPF开发项目,为了对WPF知识点进行总结,所以利用业余时间,开发一个学生信息管理系统【Student Information Management System】。前三篇文章进行了框架搭建和模块划分,后台WebApi接口编写,以及课程管理模块开发,本文在前三篇基础之上,继续深入开发学生信息管理系统

    2024年02月04日
    浏览(46)
  • WPF开发之Prism详解【内附源码】

    在实际应用开发中,随着项目业务逐渐复杂,耦合度会越来越高,维护成本也会直线上升,所以解耦也变得越来越重要。Prism框架为WPF开发中解耦提供了非常便捷的应用。今天主要以一个简单的小例子,简述WPF开发中Prism框架的简单应用,如有不足之处,还请指正。 Prism是一个

    2023年04月16日
    浏览(42)
  • WPF Prism的简单使用

    新建 WPF 项目,我是基于 .net 5.0-windows 创建的。 引入 Prism.DryIoc(8.1.97) 的 Nuget 包。 App.xaml 中引入命名空间。 将 App.xaml 中 Application 标签更改成 prism:PrismApplication 并去除 StartUri 属性,将 App.xaml.cs 中 Application 更改成 PrismApplication 。 实现 PrismApplication (实际上是 PrismApplicationBas

    2023年04月14日
    浏览(76)
  • WPF框架Prism的使用 二

    这是第二篇关于Prism-WPF的介绍,第一篇中我们简单介绍了Prism,然后讲述了如何搭建一个MVVM的简单页面程序。其实我写的文章就是把github上面的官方例子摘出来自己跑了一遍,然后加上了一些自己的理解,简单给大家分享一下。 下面放上传送门: 第一篇的链接 官方提供的示

    2024年04月10日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包