WPF用户控件User Control的使用-在MVVM架构下实现能量条效果

一、用户控件介绍

定义：

• 用户控件是由一组现有的WPF控件组成，并在一个XAML文件中定义的可重用的控件。
• 它可以包含多个控件、布局和行为，形成一个独立的、可在应用程序中多次使用的模块。

特点：

• 可重用性：用户控件的设计目的是提高代码的重用性，使得界面元素的组合和布局能够在应用程序中重复利用。
• 模块化：通过将界面划分为多个独立的用户控件，可以实现更好的模块化设计，有助于代码的维护和管理。
• 易于扩展：用户控件可以根据需要轻松地进行扩展，包括添加新的控件、更改布局或修改逻辑等。

二、效果展示

 

通过数据绑定添加相关的逻辑，实现能量条的动态显示。

三、实现过程

1.创建用户控件

根据下图在项目中创建用户控件

2.编辑用户控件

在用户控件的Xaml文件中编辑添加所需要的元素

<StackPanel Orientation="Vertical">
    <ProgressBar Orientation="Vertical" Maximum="{Binding Max}" Minimum="0" Value="{Binding Value}" Height="300" Width="100"/>
</StackPanel>

3.把用户控件放入主窗口

在用户控件编辑完成后，注意需要对项目进行重新生成，然后打开工具箱，就可将用户控件拖入主窗口

<Grid Background="White">
    <local:UserControl1 HorizontalAlignment="Left" Margin="300,60,0,0" VerticalAlignment="Top" DataContext="{Binding Page4Model.Count[0]}"/>
</Grid>

 4.在model中创建数据类型数据

public class Page4Model : NotifyBase
 {
     private Dictionary<int, Detail> _count = new Dictionary<int, Detail>();
     public Dictionary<int, Detail> Count
     {
         get { return _count; }
         set { _count = value; OnPropertyChanged(nameof(Count)); }
     }


 }

 public class Detail : NotifyBase
 {
     private int value;

     public int Value { get => value; set {this.value = value; OnPropertyChanged(nameof(value));}}
     

     private int max;
     public int Max { get => max; set {max = value; OnPropertyChanged(nameof(Max)); } }
 }

你如果没有INotifyPropertyChanged接口，可以用这个

  public class NotifyBase:INotifyPropertyChanged
  {
      //数值更改进行界面的同时
      public event PropertyChangedEventHandler? PropertyChanged;
      public void OnPropertyChanged(string propertyName)
      {
          if (PropertyChanged != null)
          {
              PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
          }
      }
  }

5.创建ViewModel，对数据进行赋值更新

public class Page4ViewModel
{        
    public Page4Model Page4Model { get; set; } = new Page4Model();

    bool a=false;

    public Page4ViewModel() 
    {
        Page4Model.Count.Add(0,new Detail() {Max=100, Value=0 });

        Task.Run(async () =>
        {
            while (true)
            {
                await Task.Delay(500);
                if (a)
                {
                    Page4Model.Count[0].Value++;
                    if (Page4Model.Count[0].Value > 99) { a= false; }
                }else { Page4Model.Count[0].Value--;
                    if (Page4Model.Count[0].Value < 1) { a = true; }
                }
                
                //因为Conut是个字典 是属于引用类型 更改引用类型，则需要new 盏内存是不会改变到的
                Page4Model.Count = new Dictionary<int, Detail>(Page4Model.Count);
            }
        });

    }


}

最后不要忘记在xaml.cs调用Viewmodel