• MVVM_UI和逻辑分离(事件利用命令替换),命令代替事件,命令传递事件参数,附完整demo


    近期公司重构了些界面,因为换肤和界面定制的缘故,需要把样式和逻辑分开;所以记录下关键的操作;主要是利用命令代替事件,利用命令传递事件的参数...

    先大致看下效果:

    主要是利用 Prism 库,可直接利用 nuget 添加

    下面是详细代码:

     1 <Window x:Class="Demo_MVVM.MainWindow"
     2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     4         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     5         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     6         xmlns:local="clr-namespace:Demo_MVVM"
     7         xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
     8         xmlns:prism="http://www.codeplex.com/prism"
     9         mc:Ignorable="d"
    10         Title="MainWindow"
    11         WindowStartupLocation="CenterScreen"
    12         Height="350" 
    13         Width="400"
    14         DataContext="{DynamicResource vm}"
    15         >
    16     <Window.Resources>
    17         <local:ReverseBool x:Key="ReverseBool" />
    18 
    19         <DataTemplate x:Key="Template1">
    20             <TextBlock Text="{Binding IsTemplate1,StringFormat=我是模板1:{0}}"/>
    21         </DataTemplate>
    22 
    23         <DataTemplate x:Key="Template2">
    24             <TextBlock Text="{Binding IsTemplate1,StringFormat=我是模板2:{0}}"/>
    25         </DataTemplate>
    26 
    27         <local:MainWindowViewModel x:Key="vm"/>
    28     </Window.Resources>
    29     <Grid>
    30         <StackPanel>
    31             <TextBlock Text="采用mvvm,UI和逻辑分离" />
    32             <StackPanel Orientation="Horizontal">
    33                 <RadioButton Content="模板1" IsChecked="{Binding IsTemplate1}" GroupName="mb" />
    34                 <RadioButton Content="模板2" IsChecked="{Binding IsTemplate1,Converter={StaticResource ReverseBool}}" GroupName="mb" />
    35             </StackPanel>
    36             <ContentControl Content="{Binding}">
    37                 <ContentControl.Style>
    38                     <Style TargetType="ContentControl">
    39                         <Setter Property="ContentTemplate" Value="{StaticResource Template1}" />
    40                         <Style.Triggers>
    41                             <DataTrigger Binding="{Binding IsTemplate1}" Value="false">
    42                                 <Setter Property="ContentTemplate" Value="{StaticResource Template2}" />
    43                             </DataTrigger>
    44                         </Style.Triggers>
    45                     </Style>
    46                 </ContentControl.Style>
    47             </ContentControl>
    48 
    49             <TextBox Text="这里面实现了鼠标滚动获取滚动向量" Height="100" >
    50                 <i:Interaction.Triggers>
    51                     <i:EventTrigger EventName="PreviewMouseWheel">
    52                         <prism:InvokeCommandAction Command="{Binding MouseWheelCommand}"/>
    53                     </i:EventTrigger>
    54                 </i:Interaction.Triggers>
    55             </TextBox>
    56         </StackPanel>
    57         <i:Interaction.Triggers>
    58             <i:EventTrigger EventName="Loaded">
    59                 <prism:InvokeCommandAction Command="{Binding InitCommand}"/>
    60             </i:EventTrigger>
    61         </i:Interaction.Triggers>
    62     </Grid>
    63 </Window>
     1 using Prism.Commands;
     2 using System;
     3 using System.Collections.Generic;
     4 using System.ComponentModel;
     5 using System.Linq;
     6 using System.Text;
     7 using System.Threading.Tasks;
     8 using System.Windows;
     9 using System.Windows.Input;
    10 
    11 namespace Demo_MVVM
    12 {
    13     class MainWindowViewModel : INotifyPropertyChanged
    14     {
    15         private bool isTemplate1 = true;
    16 
    17         public event PropertyChangedEventHandler PropertyChanged;
    18 
    19         public ICommand InitCommand { get; private set; }
    20         public DelegateCommand<object> MouseWheelCommand { get; set; }
    21 
    22         public bool IsTemplate1
    23         {
    24             get => isTemplate1;
    25             set
    26             {
    27                 isTemplate1 = value;
    28                 PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(IsTemplate1)));
    29             }
    30         }
    31 
    32 
    33         public MainWindowViewModel()
    34         {
    35             InitCommand = new DelegateCommand(Init);
    36             MouseWheelCommand = new DelegateCommand<object>(MouseWheel);
    37         }
    38 
    39         void Init()
    40         {
    41             MessageBox.Show("初始化完成!");
    42         }
    43 
    44         void MouseWheel(object obj)
    45         {
    46             if (obj is MouseWheelEventArgs eventArgs)
    47             {
    48                 MessageBox.Show("滚动了:" + eventArgs.Delta);
    49             }
    50         }
    51     }
    52 }

    有需要完整demo的,包含所需要的库,请移步下载

  • 相关阅读:
    防抖和节流
    关于keep-alive的学习
    elementUI上传图片前判断图片的尺寸大小
    vue 判断线上环境还是本地环境
    elementUi table表格的拖拽功能
    获取文件的md5值
    element ui上传腾讯云,更新视频时长
    js音视频文件的时长
    手写一个移动端带惯性的轮播图vue组件
    这个用来总结一些常用的工具函数
  • 原文地址:https://www.cnblogs.com/xuling-297769461/p/12522580.html
Copyright © 2020-2023  润新知