Skip to content

ListView DataTemplate & ItemsControl

L edited this page Oct 22, 2020 · 4 revisions

效果如图:
9EC78026-2C8A-4435-998B-5FE4D3FF9FA2

关键代码

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>

示例代码

ItemsControls

参考资料

ItemsControl 解析

其他实现方式

How to: Group, sort, and filter data in the DataGrid control

Clone this wiki locally