WPF优秀组件推荐之Stylet(一)

一、简介

 Stylet是基于WPF的一款MVVM组件,虽然WPF本身是自带MVVM功能的,但实现起来不是很方便 ,通过Stylet,用户可以用很少的代码就能享受MVVM带来的舒适体验。

目前Stylet支持:.Net Framerwork 4.5、.Net Core 3.0、.Net 5以上版本。 

 

二、搭建基本框架

 1、新建项目工程后,通过Nuget添加以下几个组件:

  

2、新建窗口MainShellView,新建类MainShellViewModel

public class MainShellViewModel : Stylet.Screen
{
}

Stylet对视图和模型有命名要求,必须为XXXView、XXXViewModel形式成对出现。

 

3、新建类Bootstrapper

    public class Bootstrapper : Bootstrapper<MainShellViewModel>
    {
        protected override void ConfigureIoC(IStyletIoCBuilder builder)
        {
            // Configure the IoC container in here
        }

        protected override void Configure()
        {
            // Perform any other configuration before the application starts
        }
    }

 

4、编辑App.xmal,删除StartupUri="MainWindow.xaml",如下:

<Application x:Class="NiceComponents.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:NiceComponents"
             xmlns:s="https://github.com/canton7/Stylet">
    <Application.Resources>
        <s:ApplicationLoader>
            <s:ApplicationLoader.Bootstrapper>
                <local:Bootstrapper />
            </s:ApplicationLoader.Bootstrapper>
        </s:ApplicationLoader>
    </Application.Resources>
</Application>
View Code

然后编译运行即可。

此时项目根目录的MainWindow.xaml已经没有用了,可以删除。

 

三、基本用法

1、绑定

XMAL:
<ProgressBar Value="{Binding ProgressValue}" Visibility="{Binding ProgressVisibility}" Maximum="100" />
<Slider Value="{Binding ProgressValue}" Maximum="100" />
<CheckBox Content="Show" IsChecked="{Binding IsProgressShow}"/>

CODE:
public class MainShellViewModel : Stylet.Screen
{
    public int ProgressValue { get; set; }
    public bool IsProgressShow { get; set; } = true;
    public Visibility ProgressVisibility => IsProgressShow ? Visibility.Visible : Visibility.Collapsed;
}

 以上代码实现一个ProgressBar 控件和一个Slider 控件的联动,同时通过一个CheckBox控件来控制ProgressBar 是否显示,代码非常简洁,充分体现了MVVM的优雅。

 

2、命令

XMAL:
  <TextBox Text="{Binding InputString, UpdateSourceTrigger=PropertyChanged}"/>
  <TextBlock  Text="{Binding OutputString}"/>
  <Button Content="Show" Command="{s:Action ShowString}" />

CODE:
public class MainShellViewModel : Stylet.Screen
 { 
        public string InputString { get; set; }
        public string OutputString { get; set; }
        public void ShowString()
        {
            OutputString = $"Your string is : {InputString}";
        }
        public bool CanShowString => !string.IsNullOrEmpty(InputString);
}

通过Command="{s:Action ShowString}"来调用后台的方法。在方法名称前加一个Can表示防卫属性,通过CanShowString属性可以控制该按钮的IsEnabled状态。

某些控件没有Command属性,也是用同样方法调用:

<TextBox TextChanged="{s:Action TextChanged}" IsEnabled={Binding IsTextBoxEnabled} />

public void TextChanged()
{
      Debug.WriteLine("TextChanged");
}

 此时,防卫属性是不能用的,如果需要,可以定义一个普通的bool类型变量Binding到控件的IsEnabled属性即可。

 

3、绑定列表

XMAL:
  <ListBox ItemsSource="{Binding StringList}" SelectedItem="{Binding SelectedString}" />
  <Button Content="Add String" Command="{s:Action AddString}" />
  <Button Content="Delete String" Command="{s:Action DeleteString}" />
    
CODE:
    public class MainShellViewModel : Stylet.Screen
    {
public List<string> StringList { get; set; } = new List<string>(); public string SelectedString { get; set; } public void AddString() { StringList.Add($"Item{StringList.Count + 1}"); } public void DeleteString() { StringList.Remove(SelectedString); } public bool CanDeleteString => SelectedString != null; }

WPF中有不少控件绑定的数据类型是列表,比如:ListBox、ComboBox、DataGrid等。以上代码实现一个列表的增加和删除。

运行以上代码,你会发现程序不能正确运行,通过Debug会发现AddString方法已经执行了,StringList列表数量也增加了,但界面上的ListBox没有变化。对于MVVM框架而言,这是一个非常常见的问题,也是非常容易犯的错误。

当我们改变一个对象时,Fody框架会自动调用PropertyChanged方法,前台收到PropertyChanged事件才会更新界面,对于List而言,调用其Add方法只是改变了对象的属性,并没有改变对象本身,所以没有产生PropertyChanged事件。

要解决这个问题,可以采用BindingList来取代List,该类在内容发生变化时也会发送PropertyChanged事件,另外,Stylet框架专门提供一个BindableCollection类来装载需要动态绑定的列表,应优先使用这个类。

以上代码下载地址:NiceComponents · Bruce/Learn WPF - 码云 - 开源中国 (gitee.com)

下一节,将会介绍一些Stylet框架的更复杂一些应用。

posted @ 2022-03-07 14:57  seabluescn  阅读(5097)  评论(4编辑  收藏  举报