一、用户控件介绍
定义：
- 用户控件是由一组现有的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
