WPF ItemsControl定义数据模板实现后台动态生成卡片
前言
有时候需要制作设备监控页面,实时显示设备一下参数的实时值。为了避免设备参数变更导致需要更改上位机程序。因此想着能不能做一个模板,在后台配置数据库实现。设备参数的更新。
代码
定义
定义一个ViewModel类,这里实现接口
public class ValveVM : INotify
{
public ObservableCollection<ValveMappingModel> _valveList;
public ObservableCollection<ValveMappingModel> ValveList
{
get { return _valveList; }
set
{
if (_valveList == value) return;
_valveList = value;
OnPropertyChanged();
}
}
}
继承了INotify类,实现INotifyPropertyChanged接口
public class INotify : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged([CallerMemberName] string propertyName = "")
{
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
再建一个实体类用于数据模板
public class ValveMappingModel
{
public string ProjectType { get; set; }
public string ProCode { get; set; }
public string ProName { get; set; }
public string AddressType { get; set; }
public string DataType { get; set; }
public int? Address { get; set; }
public int? Lengths { get; set; }
public int? IsUsing { get; set; }
public int? Indexs { get; set; }
public string Unit { get; set; }
private int? _isReadOnly=0;
public int? IsReadOnly
{
get { return _isReadOnly; }
set
{
_isReadOnly = value;
OnPropertyChanged();
}
}
public string Remarks { get; set; }
}
前端代码,
这里控件模板使用UniformGrid布局,按钮增加tag属性存储数据模板数据,用于后台按钮获取当前卡片的信息。
<ItemsControl ItemsSource="{Binding ValveList,Mode=OneWay,UpdateSourceTrigger=PropertyChanged}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<!--<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>-->
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Height="60" Margin="5,5,5,5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120" />
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="60" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Center">
<TextBlock Text="{Binding ProName,StringFormat={}{0:F0}:}" Foreground="White" VerticalAlignment="Center" FontSize="16" HorizontalAlignment="Center"></TextBlock>
</StackPanel>
<KT:MetroTextBox Required="True" Grid.Column="1"
Width="100"
IsReadOnly="True"
VerticalAlignment="Center"
Text="{Binding Values ,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged ,StringFormat={}{0:F3},TargetNullValue=--}" Foreground="Black"
>
</KT:MetroTextBox>
<TextBlock Grid.Column="2" Text="{Binding Unit}" Foreground="White" VerticalAlignment="Center" FontSize="16" HorizontalAlignment="Center"></TextBlock>
<KT:KTButton Content="修改" Grid.Column="3"
Tag="{Binding}" Visibility="{Binding IsReadOnly ,Converter={StaticResource IsReadConv}}" Style="{StaticResource BtnStytle}" Grid.Row="0" x:Name="btn_Updata" Click="btn_Updata_Click" ></KT:KTButton>
<Border BorderBrush="#FF286FD6" BorderThickness="0,0,0,1" Grid.ColumnSpan="4" Margin="0,0,0,0">
</Border>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
后台代码
按钮事件,获取按钮中tag的属性,转换成数据模板的实体类
public partial class ValueMonitoring : UserControl
{
public ValueMonitoring()
{
InitializeComponent();
DataResources = new ValveVM();
this.DataContext = DataResources;
}
ValveVM DataResources;
}
private void btn_Updata_Click(object sender, RoutedEventArgs e)
{
//这里可以看出Tag是object,可以存放任意数据类型
ValveMappingModel tag = (sender as Button).Tag as ValveMappingModel;
//MessageBox.Show($"Tag的内容是\"{tag.ProName}\"");
}
效果
结论
文章为本人记录学习使用,如有不当之处请多多执教。