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}\"");
        }

效果

 结论

        文章为本人记录学习使用，如有不当之处请多多执教。