WPF中MVVM结构以及Command绑定到事件（WPF写七牛云空间管理工具）

最新推荐文章于 2024-01-02 16:40:18 发布
最新推荐文章于 2024-01-02 16:40:18 发布
阅读量539 收藏 1
点赞数
分类专栏： C# 文章标签： wpf mvvm command c#
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44448313/article/details/103585484
版权

文章目录

项目简介

本项目想写一个七牛云空间管理的工具，省去每次都要登录网页管理的繁琐，也是为了学习一下WPF开发的MVVM架构和思想，降低代码耦合度（降低UI层和BLL层的代码耦合度）。前后端只要约定好命令名和参数即可，让搞UI的专心搞UI，搞后台的专心写后台逻辑。

项目主要架构

考虑到对XP系统的友好支持，使用了.Net 4

  • MahApps.Metro
  • PropertyChanged.Fody
  • Microsoft.Bcl
  • Qiniu

新建项目QiniuDiskManager

在这里插入图片描述

NuGet安装

Install-Package MahApps.Metro
Install-Package MahApps.Metro.SimpleChildWindow
Install-Package MahApps.Metro.IconPacks -Version 2.3.0
Install-Package Microsoft.Bcl -Version 1.1.8
Install-Package Microsoft.Bcl.Async -Version 1.0.168
Install-Package Microsoft.Bcl.Build -Version 1.0.14
Install-Package Newtonsoft.Json -Version 11.0.1
Install-Package ControlzEx -Version 3.0.2.4
Install-Package Qiniu
Install-Package PropertyChanged.Fody

新建项目结构文件夹

  • Bases
  • Commands
  • Models
  • Pages
  • ViewModels

新建必要文件

  • ViewModelBase.cs
  • DelegateCommand.cs
using System.ComponentModel;

namespace QiniuDiskManager.Bases
{
    public class ViewModelBase : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        public void OnPropertyChanged(string propertyName)
        {
            if (this.PropertyChanged != null)
                this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows.Input;

namespace QiniuDiskManager.Commands
{
    internal class DelegateCommand : ICommand
    {
        private readonly Action _execute;
        private readonly Func<bool> _canExecute;

        public DelegateCommand(Action execute) : this(execute, null) { }
        public DelegateCommand(Action execute, Func<bool> canExecute)
        {
            _execute = execute ?? throw new ArgumentNullException(nameof(execute));
            _canExecute = canExecute;
        }

        public void Execute(object parameter)
        {
            _execute();
        }
        public bool CanExecute(object parameter)
        {
            if (_canExecute == null) return true;
            return _canExecute();
        }


        public event EventHandler CanExecuteChanged
        {
            add => CommandManager.RequerySuggested += value;
            remove => CommandManager.RequerySuggested -= value;
        }
    }

    internal class DelegateCommand<T> : ICommand
    {
        private readonly Action<T> _execute;
        private readonly Func<bool> _canExecute;

        public DelegateCommand(Action<T> execute) : this(execute, null) { }
        public DelegateCommand(Action<T> execute, Func<bool> canExecute)
        {
            _execute = execute ?? throw new ArgumentNullException(nameof(execute));
            _canExecute = canExecute;
        }

        public void Execute(object parameter)
        {
            _execute((T)parameter);
        }
        public bool CanExecute(object parameter)
        {
            if (_canExecute == null) return true;
            return _canExecute();
        }


        public event EventHandler CanExecuteChanged
        {
            add => CommandManager.RequerySuggested += value;
            remove => CommandManager.RequerySuggested -= value;
        }
    }
}

应用MahApps.Metro框架

添加资源字典

添加资源字典到项目中，修改App.xaml，在<Application.Resources>中添加对应的资源字典

<Application x:Class="QiniuDiskManager.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:QiniuDiskManager"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

修改MainWindow界面

xaml文件中引用命名空间

xmlns:controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"

MainWindow的根节点由Window修改为controls:MetroWindow

<controls:MetroWindow x:Class="QiniuDiskManager.MainWindow"
        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:controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
        mc:Ignorable="d"
        Title="Qiniu Disk Manager" Height="450" Width="800" controls:TitleCaps="False" WindowStartupLocation="CenterScreen">
    <!-- 右上角菜单按钮 -->
    <controls:MetroWindow.RightWindowCommands>
        <controls:WindowCommands x:Name="window_cmds">
            <Button x:Name="btn_login_out" Content="退出账号" Padding="0 0 0 0" Cursor="Hand" Margin="5 0 5 0"/>
            <TextBlock x:Name="txt_name" Text="用户：NULL" Margin="5 0 5 0" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
        </controls:WindowCommands>
    </controls:MetroWindow.RightWindowCommands>
    <Grid>
        <controls:MetroAnimatedSingleRowTabControl x:Name="tab_shouye" Margin="0 0 0 0" TabStripPlacement="Top">
            <controls:MetroTabItem Header="Files" Tag="-1" Padding="0" controls:ControlsHelper.HeaderFontSize="16">
                <controls:MetroTabItem.HeaderTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding}" Margin="0 0 0 0" Width="{Binding}" Padding="10 5 5 5"></TextBlock>
                    </DataTemplate>
                </controls:MetroTabItem.HeaderTemplate>
                <Frame x:Name="frame_files" Source="./Pages/FilesPage.xaml" Padding="0" Margin="0" NavigationUIVisibility="Hidden" BorderThickness="0 1 0 0" BorderBrush="#1DADD7"></Frame>
            </controls:MetroTabItem>

            <controls:MetroTabItem Header="Downloads" Tag="-1" Padding="0" controls:ControlsHelper.HeaderFontSize="16">
                <controls:MetroTabItem.HeaderTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding}" Margin="0 0 0 0" Width="{Binding}" Padding="5 5 5 5"></TextBlock>
                    </DataTemplate>
                </controls:MetroTabItem.HeaderTemplate>
                <Frame x:Name="frame_downloads" Source="./Pages/DownloadsPage.xaml" Padding="0" Margin="0" NavigationUIVisibility="Hidden" BorderThickness="0 1 0 0" BorderBrush="#1DADD7"></Frame>
            </controls:MetroTabItem>

            <controls:MetroTabItem Header="Config" Tag="-1" Padding="0" controls:ControlsHelper.HeaderFontSize="16">
                <controls:MetroTabItem.HeaderTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding}" Margin="0 0 0 0" Width="{Binding}" Padding="5 5 10 5"></TextBlock>
                    </DataTemplate>
                </controls:MetroTabItem.HeaderTemplate>
                <Frame x:Name="frame_config" Source="./Pages/ConfigPage.xaml" Padding="0" Margin="0" NavigationUIVisibility="Hidden" BorderThickness="0 1 0 0" BorderBrush="#1DADD7"></Frame>
            </controls:MetroTabItem>
        </controls:MetroAnimatedSingleRowTabControl>
    </Grid>
</controls:MetroWindow>

在Pages文件夹下新建页面

  • ConfigPage.xaml
  • DownloadsPage.xaml
  • FilesPage.xaml
<Page x:Class="QiniuDiskManager.Pages.ConfigPage"
      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:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
      xmlns:vm="clr-namespace:QiniuDiskManager.ViewModels"
      mc:Ignorable="d" 
      d:DesignHeight="450" d:DesignWidth="800"
      Title="Config">
    <Page.DataContext>
        <vm:ConfigPageModel />
    </Page.DataContext>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="30"></RowDefinition>
            <RowDefinition Height="30"></RowDefinition>
        </Grid.RowDefinitions>
        <TextBlock Grid.Row="0" x:Name="txt_hello" Text="{Binding ContentText, UpdateSourceTrigger=PropertyChanged}" VerticalAlignment="Center" Margin="5 0 0 0"></TextBlock>
        <Button Grid.Row="1" Height="26" Margin="5 0 5 0" Content="修改">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <i:InvokeCommandAction Command="{Binding SayHello}" CommandParameter="{Binding ElementName=txt_hello}"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
    </Grid>
</Page>

<Page x:Class="QiniuDiskManager.Pages.DownloadsPage"
      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:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
      xmlns:vm="clr-namespace:QiniuDiskManager.ViewModels"
      mc:Ignorable="d" 
      d:DesignHeight="450" d:DesignWidth="800"
      Title="DownloadsPage">
    <Page.DataContext>
        <vm:DownloadsPageModel />
    </Page.DataContext>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="30"></RowDefinition>
            <RowDefinition Height="30"></RowDefinition>
        </Grid.RowDefinitions>
        <TextBlock Grid.Row="0" x:Name="txt_hello" Text="{Binding ContentText, UpdateSourceTrigger=PropertyChanged}" VerticalAlignment="Center" Margin="5 0 0 0"></TextBlock>
        <Button Grid.Row="1" Height="26" Margin="5 0 5 0" Content="修改">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <i:InvokeCommandAction Command="{Binding SayHello}" CommandParameter="{Binding ElementName=txt_hello}"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
    </Grid>
</Page>

<Page x:Class="QiniuDiskManager.Pages.FilesPage"
      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:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
      xmlns:vm="clr-namespace:QiniuDiskManager.ViewModels"
      mc:Ignorable="d" 
      d:DesignHeight="450" d:DesignWidth="800"
      Title="FilesPage">
    <Page.DataContext>
        <vm:FilesPageModel />
    </Page.DataContext>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="30"></RowDefinition>
            <RowDefinition Height="30"></RowDefinition>
        </Grid.RowDefinitions>
        <TextBlock Grid.Row="0" x:Name="txt_hello" Text="{Binding ContentText, UpdateSourceTrigger=PropertyChanged}" VerticalAlignment="Center" Margin="5 0 0 0"></TextBlock>
        <Button Grid.Row="1" Height="26" Margin="5 0 5 0" Content="修改">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <i:InvokeCommandAction Command="{Binding SayHello}" CommandParameter="{Binding ElementName=txt_hello}"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
    </Grid>
</Page>

在ViewModels文件夹下新建页面模型

  • ConfigPageModel.cs
  • DownloadsPageModel.cs
  • FilesPageModel.cs
using QiniuDiskManager.Bases;
using QiniuDiskManager.Commands;
using System.Windows.Controls;
using System.Windows.Input;

namespace QiniuDiskManager.ViewModels
{
    public class ConfigPageModel : ViewModelBase
    {
        public string ContentText { get; set; }

        public ConfigPageModel()
        {
            ContentText = "Config Page";
        }

        public ICommand SayHello
        {
            get
            {
                return new DelegateCommand<TextBlock>((txt) =>
                {
                    ContentText = "Hello " + ContentText;
                });
            }
        }
    }
}

using QiniuDiskManager.Bases;
using QiniuDiskManager.Commands;
using System.Windows.Controls;
using System.Windows.Input;

namespace QiniuDiskManager.ViewModels
{
    public class DownloadsPageModel : ViewModelBase
    {
        public string ContentText { get; set; }

        public DownloadsPageModel()
        {
            ContentText = "Downloads Page";
        }

        public ICommand SayHello
        {
            get
            {
                return new DelegateCommand<TextBlock>((txt) =>
                {
                    ContentText = "Hello " + ContentText;
                });
            }
        }
    }
}

using QiniuDiskManager.Bases;
using QiniuDiskManager.Commands;
using System.Windows.Controls;
using System.Windows.Input;

namespace QiniuDiskManager.ViewModels
{
    public class FilesPageModel : ViewModelBase
    {
        public string ContentText { get; set; }

        public FilesPageModel()
        {
            ContentText = "Files Page";
        }

        public ICommand SayHello
        {
            get
            {
                return new DelegateCommand<TextBlock>((txt) =>
                {
                    ContentText = "Hello " + ContentText;
                });
            }
        }
    }
}

运行效果

单击每个页面的“修改”按钮，实现在原有字符串变量前添加“Hello ”，通过Binding绑定实现对应TextBlock控件的Text内容的通知更新，实现效果如下：
在这里插入图片描述

总结

现在前后台只需要约定好控件的绑定属性名称、命令名称及参数，然后各自写各自的代码，前端只需要修改xaml文件里的内容，后端只需要修改对应ViewModel的cs文件，最后通过版本控制器（SVN或Git）提交自己修改的代码文件，便可以直接运行。比如A提交了xaml文件，B提交了cs文件，然后C从SVN拉下A和B提交的代码后可以直接运行。

0564丶Kang
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
WPF实现MVVM的事件绑定
01-17
WPF实现MVVM的事件绑定的两种非常规方式。 参考博客：https://blog.csdn.net/IQQQQU/article/details/86530285 1、重写InvokeCommandAction来扩充返回的参数 2、运用Behavior来实现事件，可以通过两种方式来获取...
WPF纯MVVM事件绑定+事件参数 完美示例
12-03
WPF 纯MVVM模式 任意事件绑定 获取EventArgs 完美取代原生事件+=模式 只需要引用System.Windows.Interactivity
【转】【WPF】MVVM模式的3种command
weixin_33941350的博客
07-28 414
1.DelegateCommand 2.RelayCommand 3.AttachbehaviorCommand 因为MVVM模式适合于WPF和SL，所以这3种模式中也有一些小差异，比如RelayCommand下面的CommandManager方法就是WPF下面的，SL下面无法使用，不过我认为这3种方法中的基本思路都如出一辙，都是出自那位外国牛人的文章里面。主要的区别在于和VIEW中的控件的...
从PRISM开始学WPF（六）MVVM（二）Command-更新至Prism7.1
weixin_30298497的博客
04-02 263
命令绑定（Command） [7.1updated]这一节除了基础app部分，并没有什么变化 什么是Command？ 先看下微软官方的说明： Commanding is an input mechanism in Windows Presentation Foundation (WPF) which provides input handling at a more semantic level...
WPF真入门教程24--MVVM模式Command命令
hqwest的专栏
12-25 1391
当创建自己的命令时，不能直接实现ICommand接口，而是要使用System.Windows.Input.RouteCommand类，该类已经实现了ICommand接口，所有WPF命令都是RouteCommand类的实例。MVVM的目的是为了最大限度地降低了Xaml文件和CS文件的耦合度，分离界面和业务逻辑，所以我们要通过命令(Command)的来将Button的事件分离出来。在 WPF 中定义这样一个接口的目的是为了实现 MVVM 的框架设计，换一种的说法就是为了解耦。比如，在假期中使用滴滴打车。
WPF MVVM模式Command命令
qq_40098572的博客
03-06 464
public class RelayCommand : ICommand { public event EventHandler CanExecuteChanged; /// <summary> /// 用来帮助命令呼叫者判断命令能不能执行 /// </summary> /// <param name="parameter"></param> .
WPF自学入门（十一）WPF MVVM模式Command命令 WPF自学入门（十）WPF MVVM简单介绍...
04-07 1050
WPF自学入门（十一）WPF MVVM模式Command命令 在WPF自学入门（十）WPFMVVM简单介绍中的示例似乎运行起来没有什么问题，也可以进行更新。但是这并不是我们使用MVVM的正确方式。正如上一篇文章中在开始说的，MVVM的目的是为了最大限度地降低了Xaml文件和CS文件的耦合度，分离界面和业务逻辑，所以我们要尽可能的在View后台不写代码。但...
WPF MVVM Command的简单使用
dxm809的博客
03-07 727
1 新建wpf应用 2 新建Views,Models,ViewModels文件夹 3 新建Base文件夹，并在其里面新建CommandBase类 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Input; namespace WpfApp1.Base { publi
wpf mvvm框架调用Command时如何进行参数传参，多个参数怎么传参
最新发布
qq_35320456的博客
01-02 2305
介绍如何在WPF的MVVM框架中传递命令参数，包括单个参数和多个参数的传递。
WPF MVVM无Command属性的控件绑定事件
07-03
我们在WPF开发中应用MVVM开发模式时，一般用来绑定Button 的Command命令，但是有很多控件MS没有给出Command命令，我们需要添加一个DLL来增加绑定时的属性。
WPF MVVM COMMAND
11-15
两个关于mvvm的小例子，希望能给初学者一些启发 本来想不要分的，不知道为什么最低也要2分了。
WPF MVVM Command 01
10-22
WPF MVVM Command
MahApps.Metro.SimpleChildWindow, 用于 MahApps.Metro的简单子窗口.zip
10-10
MahApps.Metro.SimpleChildWindow, 用于 MahApps.Metro的简单子窗口 MahApps.Metro. SimpleChildWindow 一个用于 MahApps.Metro的简单子窗口。 是，这意味着你需要 MahApps.Metro 来使用这里控件。软件包包含一个
MahApps.Metro.Mvvm:针对常见 MahApps.Metro 问题的面向 MVVM 的解决方案的手册
06-09
MahApps.Metro.Mvvm 针对常见 MahApps.Metro 问题的面向 MVVM 的解决方案的手册 背景 是一个开源项目，可为您的 WPF 应用程序带来 Metro 风格。 MA.M 的主要贡献者表示，该库对用户的后端实现（MVVM、MVC、直接代码隐藏）抱有偏见。 这提供了很大的灵活性，并使 MA.M 的入门变得简单。 但是，更高级的 UI 主题存在细微差别，这将受益于对模型-视图-视图模型 (MVVM) 的明确偏好。 MVVM 是设计 WPF 应用程序方法但正确执行它显然是一个挑战。 该项目将作为结合 MA.M 和 MVVM 的最佳实践资源。 项目主题 对话框 弹出窗口 视图模型间通信 MVVM 框架 MVVM灯 Caliburn.Micro 棱镜（？） 为项目做贡献 我们将使用书籍编写方案的约定来开始编写它。 它将允许我们将这份手稿推送到 LeanPub 并快
WPF的MVVM简单使用-绑定和命令示例
02-21
MVVM 模式就是将其中的View 的状态和行为抽象化，形成数据绑定和命令，将视图 UI 和业务逻辑分开。由ViewModel处理相关的业务逻辑，与View对应，负责获取和更新Model的数据。 绑定和命令示例工程
WPF的MVVM模式下的命令绑定示例
02-23
WPF的MVVM模式下的命令绑定示例，包括普通的Command绑定，和CommandParameter参数传入，还有其他命令通过System.Windows.Interactivity.WPF实现绑定和参数传入
WPF MVVM Command
时意
10-22 575
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="WpfApplication1.MainWindow" x:Name="Window" Title=...
20、wpf之MVVM命令绑定
roujian0985的博客
06-24 2882
Command可以有效降低前后端的耦合，有利于代码的管理和可读性。前端控件的Command有时可能只是简单的执行一个函数，比如Button。但是借助事件转Command实现MVVM模式的控件，就需要通过Command将EventArgs中相关信息传给ViewModel去解析操作。.........
WPF使用MVVM绑定事件
06-07
在WPF中使用MVVM绑定事件的方法有两种：Command和EventToCommand。 1. Command Command是一种实现了ICommand接口的对象，可以在ViewModel中定义并绑定到View中的控件上，当控件触发事件时，Command就会执行相应的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

0564丶Kang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值