zoukankan      html  css  js  c++  java
  • 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>
    

    示例代码

    ItemsControls

    参考资料

    ItemsControl 解析

  • 相关阅读:
    【动态规划】 EditDistance
    招聘
    算法01 C语言设计
    keras04
    电影《邪不压正》打动我的
    Eclipse
    6.面向对象编程(下)2
    获取一个1-100之间的随机数
    java如何使用帮助文档api
    3.java基础语法(下)
  • 原文地址:https://www.cnblogs.com/Lulus/p/13384389.html
Copyright © 2011-2022 走看看