WPF ListView DataTemplate & ItemsControl
效果如图:
关键代码
ListView的DataTemplate是一个单一折叠项的内容
ItemsControl是一个列表的内容,之前列表使用DataGrid,但加载速度慢,所以改为ItemsControl
<ListView Name="listView" HorizontalAlignment="Center" ItemsSource="{Binding }">
<ListView.ItemTemplate>
<DataTemplate>
<Expander Name="expander" Width="1400" ExpandDirection="Down" HorizontalAlignment="Stretch" IsExpanded="True">
<Expander.Header>
<TextBlock Text="{Binding DataModelEdition.TableChineseName}" FontWeight="Bold"/>
</Expander.Header>
<Expander.Content>
<Grid HorizontalAlignment="Stretch" Width="1400">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal" Visibility="{Binding DataModelEdition.RowVisibility}">
<TextBlock Text="单选RadioButton" Margin="0,0,5,0"></TextBlock>
<RadioButton Content="RadioButton选择1" VerticalAlignment="Center" Margin="0,0,3,0" GroupName="{Binding DataModelEdition.GroupName}" IsEnabled="{Binding DataModelEdition.IsCanModify}" IsChecked="{Binding DataModelEdition.OneToOneIsChecked,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"></RadioButton>
<RadioButton Content="RadioButton选择2" VerticalAlignment="Center" GroupName="{Binding DataModelEdition.GroupName}" IsEnabled="{Binding DataModelEdition.IsCanModify}" IsChecked="{Binding DataModelEdition.ManyToOneIsChecked,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"></RadioButton>
</StackPanel>
<ItemsControl Grid.Row="1" Name="dataList" ItemsSource="{Binding DataModelItems}">
<ItemsControl.Template>
<ControlTemplate TargetType="{x:Type ItemsControl}">
<ControlTemplate.Resources>
<Style TargetType="Border">
<Setter Property="BorderThickness" Value="1"></Setter>
<Setter Property="BorderBrush" Value="#e9e9ea"></Setter>
<Setter Property="Background" Value="#bbc3de" />
</Style>
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="14"></Setter>
<Setter Property="VerticalAlignment" Value="Center"></Setter>
<Setter Property="HorizontalAlignment" Value="Center"></Setter>
</Style>
</ControlTemplate.Resources>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Height="45">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Grid.Column="0">
<TextBlock Text="显示字段1" />
</Border>
<Border Grid.Column="1">
<TextBlock Text="显示字段2" />
</Border>
<Border Grid.Column="2">
<TextBlock Text="下拉框1" />
</Border>
<Border Grid.Column="3" >
<TextBlock Text="输入框1" />
</Border>
<Border Grid.Column="4" >
<TextBlock Text="下拉框2" />
</Border>
<Border Grid.Column="5">
<TextBlock Text="输入框2" />
</Border>
<Border Grid.Column="6">
<TextBlock Text="输入框3" />
</Border>
<Border Grid.Column="7">
<TextBlock Text="输入框4" />
</Border>
<Border Grid.Column="8">
<TextBlock Text="输入框5" />
</Border>
</Grid>
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Grid.Row="1">
<!--ItemTemplate数据-->
<ItemsPresenter></ItemsPresenter>
</ScrollViewer>
</Grid>
</Border>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemTemplate>
<DataTemplate>
<DataTemplate.Resources>
<Style TargetType="Border">
<Setter Property="BorderThickness" Value="1"></Setter>
<Setter Property="BorderBrush" Value="#e9e9ea"></Setter>
<Setter Property="Background" Value="#ffffff" />
</Style>
</DataTemplate.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Grid.Column="0">
<TextBlock Text="{Binding TableChineseName}" />
</Border>
<Border Grid.Column="1">
<TextBlock Text="{Binding FieldChineseName}" />
</Border>
<Border Grid.Column="2">
<ComboBox Margin="5" SelectedItem="{Binding FillTypeSelectItem,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" ItemsSource="{Binding FillTypeEnumInfos}" DisplayMemberPath="Description" IsEnabled="{Binding IsCanFillTypeChange}"></ComboBox>
</Border>
<Border Grid.Column="3">
<TextBox Text="{Binding SpecifiedValue,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" Visibility="{Binding IsSpecifiedValueVisibility,Mode=OneWay,UpdateSourceTrigger=PropertyChanged}" IsEnabled="{Binding IsCanModify}"></TextBox>
</Border>
<Border Grid.Column="4">
<ComboBox Margin="5" SelectedItem="{Binding IsUniqueKeySelectItem,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" ItemsSource="{Binding IsUniqueKeyEnumInfos}" DisplayMemberPath="Description" IsEnabled="{Binding IsCanIsUniqueKeyChange}"></ComboBox>
</Border>
<Border Grid.Column="5">
<TextBox Text="{Binding MinCount,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" IsEnabled="{Binding IsCanModify}" Visibility="{Binding CountVisibility,Mode=OneWay,UpdateSourceTrigger=PropertyChanged}"></TextBox>
</Border>
<Border Grid.Column="6">
<TextBox Text="{Binding MaxCount,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" IsEnabled="{Binding IsCanModify}" Visibility="{Binding CountVisibility,Mode=OneWay,UpdateSourceTrigger=PropertyChanged}"></TextBox>
</Border>
<Border Grid.Column="7">
<TextBox Text="{Binding MinSize,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" IsEnabled="{Binding IsCanModify}" Visibility="{Binding SizeVisibility,Mode=OneWay,UpdateSourceTrigger=PropertyChanged}"></TextBox>
</Border>
<Border Grid.Column="8">
<TextBox Text="{Binding MaxSize,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" IsEnabled="{Binding IsCanModify}" Visibility="{Binding SizeVisibility,Mode=OneWay,UpdateSourceTrigger=PropertyChanged}"></TextBox>
</Border>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</Expander.Content>
</Expander>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
示例代码
参考资料
其他实现方式
How to: Group, sort, and filter data in the DataGrid control
学习技术最好的文档就是【官方文档】,没有之一。
还有学习资料【Microsoft Learn】、【CSharp Learn】、【My Note】。
如果,你认为阅读这篇博客让你有些收获,不妨点击一下右下角的【推荐】按钮。
如果,你希望更容易地发现我的新博客,不妨点击一下【关注】。