HandyControl控件之 进度条按钮 MVVMlight应用实例

4 篇文章 0 订阅
3 篇文章 2 订阅

接前文,咱们继续开源WPF控件探索HandyControl,本文主要写给如我这种新人菜鸟、

首先我们新建一个WPF项目,HandyControlEasyDemo

使用Nuget来安装我们需要引用的两个重要工具HandyControl  以及MVVMlight组件(MVVMlight是WPF项目下一个很好用的框架,MVVM相关资料写得非常好的 推荐大家看翁智华的  利刃 MVVMLight 1:MVVMLight介绍以及在项目中的使用 - 翁智华 - 博客点此处直达

 

初步安装好MVVMlight后的解决方案样子

安装后,我们先来配置下MVVMlight ,首先新建两个文件夹 Model  View 以后我们的模型均放置在Model命名空间下,视图均放置在View命名空间下,入下图,三个文件夹中的大写字母依次是MVVM 这难道就是MVVM的由来 哈哈

在Model 文件夹新建TestModel类,类声明如下 public class TestModel: ObservableObject 

将MainViewModel拖放到View文件下
主页面这么写

<Window
    x:Class="HandyControlEasyDemo.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:HandyControl.Controls;assembly=HandyControl"
    DataContext="{Binding Main,Source={StaticResource Locator}}"
    mc:Ignorable="d"
    Title="MainWindow"
    Height="450"
    Width="800">
    <Grid>
        <StackPanel
            HorizontalAlignment="Left">
            <controls:ProgressButton
                Height="30"
                Width="100"
                Margin="5"
                Background="#20B2AA"
                Style="{StaticResource ProgressButtonPrimary}"
                IsChecked="{Binding IsUploading,Mode=TwoWay}"
                Progress="{Binding ProcessValue}"
                Content="{Binding IsUploading,Converter={StaticResource Boolean2StrConverter},ConverterParameter='上传数据;上传数据中'}"
                Command="{Binding Source={StaticResource Locator},Path = Main.UpLoadDataCmd}" />
        </StackPanel>
    </Grid>
</Window>
using System.Threading;
using GalaSoft.MvvmLight;
using HandyControlEasyDemo.Common;

namespace HandyControlEasyDemo.Model
{
    public class TestModel: ObservableObject
    {
        public BackgroundTaskWork BackTaskWork
        {
            get => _pBackTaskWork;
            set
            {
                _pBackTaskWork = value;
                RaisePropertyChanged(() => BackTaskWork);
            }
        }
        private BackgroundTaskWork _pBackTaskWork = new BackgroundTaskWork();

        internal void StartTask()
        {
            BackTaskWork.DoBackTask(UploadScanData);
        }

        private bool UploadScanData()
        {
            bool result = true;

            // 2.初始化数据、进度条及相关功能
            BackTaskWork.UpdateProcess(this, 100, 1, "提交扫码数据");
            for (int x = 0; x < 100; x++)
            {
                // 模拟任务处理
                Thread.Sleep(20);
                BackTaskWork.UpdateProcess(this, 100, x, x + "/" + 100);
            }

            return result;
        }

    }
}

上面代码中用到的异步线程处理类我放在项目中了,感兴趣的亲们可以直接下载项目实际看下,这个简单的DEMO亮点在进度条按钮的属性处理,相关代码取自HandyControl的DEMO,加上了一些自己的辅助类,感兴趣的亲可以参考下

DEMO下载链接 https://download.csdn.net/download/qqwe13/11003244

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
MVVMLight是一个用于构建基于MVVM(Model-View-ViewModel)模式的应用程序的开源框架。这个框架提供了许多工具和类,帮助开发人员更容易地实现MVVM模式的应用程序。 在引用中的示例中,展示了一个使用MVVMLight框架的WPF应用程序的示例。这个示例中定义了一个MainViewModel类,继承自ViewModelBase类,这是MVVMLight框架提供的基类。在MainViewModel类中,有一个名为Temp的整数类型属性,以及一个名为GetTemp的RelayCommand类型属性,这是MVVMLight框架提供的用于处理命令的类。在MainViewModel的构造函数中,Temp属性被初始化为10,同时为GetTemp属性创建了一个RelayCommand实例,并指定了ShowTemp方法作为命令的执行逻辑。ShowTemp方法会通过MessageBox显示Temp属性的值。 在引用中的示例中,展示了一个使用MVVMLight框架的Silverlight应用程序的示例。这个示例中也有一个MainViewModel类,继承自ViewModelBase类。不同的是,Temp属性被定义为一个自定义类MyData的实例,这个类包含了三个整数类型的属性:NumberOne、NumberTwo和NumberThree。在MainViewModel的构造函数中,Temp属性被初始化为一个MyData实例,并为GetTemp属性创建了一个RelayCommand实例,同样指定了ShowTemp方法作为命令的执行逻辑。 这些示例展示了如何在MVVMLight框架中创建和使用ViewModel,并绑定到界面上的控件。通过将数据绑定到ViewModel的属性,可以实现界面与数据的分离,使得开发更加灵活和易于维护。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [WPF MVVM Light使用示例](https://blog.csdn.net/qq_43024228/article/details/105566552)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [MVVM开发模式实例解析](https://blog.csdn.net/dangercheng/article/details/8499636)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值