AI 助理
备案控制台
开发者社区 云计算 文章 正文

ListView、TreeView和DataGrid。

2018-08-15 1261
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原文:ListView、TreeView和DataGrid。1、ListView。 ListView继承自简单的没有特色的ListBox，并使用View属性进行扩展。增加了对基于列显示的支持，并增加了快速切换视图或显示模式的能力，而不需要重新绑定数据以及重新构建列表。
原文: ListView、TreeView和DataGrid。

1、ListView。

ListView继承自简单的没有特色的ListBox，并使用View属性进行扩展。增加了对基于列显示的支持，并增加了快速切换视图或显示模式的能力，而不需要重新绑定数据以及重新构建列表。其中View属性是是一个扩展点，用于创建内容丰富的列表，如果没有设置View属性，ListView控件的行为就类似于功能较少的祖先ListBox控件的行为。ListView目前只提供了GridView视图，用于创建多列是非常有用的。GridView类继承自ViewBase类，表示具有多列的列表视图，通过为GridView.Columns集合添加GridViewColumn对象可定义这些列。

GridView和GridViewColumn都提供了一些有用的方法，可使用这些方法定制列表的显示外观。为创建最简单、最直观的列表，只需要为每个GridViewColumn对象设置两个属性：Header属性和DisplayMemberBinding，Header属性提供放在顶部的文本，而DIsplayMemberBinding属性包含一个绑定，该绑定从每个数据项提取希望显示的信息。

1.1)、通过ListView显示数据。

xaml代码： 

<ListView Name="listView1">
    <!--通过listView视图-->
    <ListView.View>
        <!--通过设置提供的GridView视图-->
        <GridView>
            <GridView.Columns>
                <!--设置Header属性和DisplayMemberBinding属性-->
                <GridViewColumn Header="产品编号" DisplayMemberBinding="{Binding Path=ProId}"></GridViewColumn>
                <GridViewColumn Header="产品名字" DisplayMemberBinding="{Binding Path=ProName}"></GridViewColumn>
                <GridViewColumn Header="产品价格" DisplayMemberBinding="{Binding Path=ProPrice, StringFormat={}{0:C}}"></GridViewColumn>
                <GridViewColumn Header="产品描述" DisplayMemberBinding="{Binding Path=ProDescribe}"></GridViewColumn>
                <GridViewColumn Header="产品图片路径" DisplayMemberBinding="{Binding Path=ProImagePath}"></GridViewColumn>
            </GridView.Columns>
        </GridView>
    </ListView.View>
</ListView>

后台代码：

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        this.Loaded += MainWindow_Loaded;
    }

    Bll.ProductBll productBll = App.ProductBll;
    void MainWindow_Loaded(object sender, RoutedEventArgs e)
    {
        this.listView1.ItemsSource = productBll.GetCollectionProduct2();
    }
}

效果图：

1.2)、改变列的尺寸。

可为GridViewColumn设置width属性来改变列的宽度。这种设置只是确定了列的初始宽度，不会组织用户通过单机列标题边缘来修改列宽。如果希望完全禁止修改列的尺寸，唯一的选择就是为GridViewColumn的标题提供新模板。 

<GridViewColumn Width="80" Header="产品编号" DisplayMemberBinding="{Binding Path=ProId}"></GridViewColumn>

1.3)、单元格模板。

在为单元格中显示数据，GridViewColumn.DisplayMemberBinding属性并不是唯一的选择，而另一个选择是使用CellTemplate属性，该属性使用的是是数据模板。注意：如果同时为GridViewColumn设置了DisplatyMemberBinding和CellTemplate属性，那么默认会使用DisplayMemberBinding属性为单元格设置内容并完全忽略模板。

<!--不使用DisplayMemberBinding属性，使用CellTemplate属性，效果是一样的。-->
<GridViewColumn Header="产品名字">
    <GridViewColumn.CellTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Path=ProName}"></TextBlock>
        </DataTemplate>
    </GridViewColumn.CellTemplate>
</GridViewColumn>

1.4)、单元格中显示图片。

xaml代码： 

<GridViewColumn Header="产品图片">
    <GridViewColumn.CellTemplate>
        <DataTemplate>
            <Image Width="50" Height="50">
                <Image.Source>
                    <Binding Path="ProImagePath">
                        <Binding.Converter>
                            <local:ImagePathConverter></local:ImagePathConverter>
                        </Binding.Converter>
                    </Binding>
                </Image.Source>
            </Image>
        </DataTemplate>
    </GridViewColumn.CellTemplate>                            
</GridViewColumn>

效果图：

1.5)、自定义列标题。

如果不希望保持灰色的列标题方框，可以通过通过以下几种方式设置他们。

a)、通过HeaderTemplate模板进行设置，这个数据模板可以绑定到在GridViewColumn.Header属性中指定的任何对象。

<GridViewColumn Width="70" DisplayMemberBinding="{Binding Path=ProId}">
    <GridViewColumn.Header>                                
        <Border CornerRadius="3" Background="Salmon">
            <TextBlock>产品名称</TextBlock>
        </Border>
        <!--如果直接在HeadTemplate中定义数据模板是行不通的-->
        <!--<DataTemplate>
            <TextBlock>产品名称</TextBlock>
        </DataTemplate>-->
    </GridViewColumn.Header>
</GridViewColumn>

效果图：

b)、如果重新格式化特定的标题，可使用GridViewColumn.HeaderContainerStyle属性提供的样式。如果希望以相同的方式重新格式化所有的列标题，就需要改用GridView.ColumnHeaderContainerStyle属性。

c)、如果希望完全改变标题的外观，可以通过设置GridViewColumn.HeaderTemplaterSelector或GridViewColumnTemplaterSelector属性，使用模板选择器为特定的标题设置正确的模板。

 

 

 

 

3、DataGrid控件。

DataGrid控件是用来显示数据的控件，从对象集合获取信息并在具有行和单元格的网格中显示信息。每行和单独的对象相对应，并且在每列和对象的某个属性相对应。

3.1)、为DataGrid控件添加数据。

xaml代码： 

<Grid>
    <DataGrid Name="dataGrid1"></DataGrid>
</Grid>

 后台代码：

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        this.Loaded += MainWindow_Loaded;
    }
    Bll.ProductBll productBll = App.ProductBll;
    void MainWindow_Loaded(object sender, RoutedEventArgs e)
    {
        this.dataGrid1.ItemsSource = productBll.GetCollectionProduct2();   
    }
}

 效果图：

 

3.2)、DataGridView控件的基本属性。

DataGrid控件的基本显示属性
名称 说明
RowBackground DataGrid中的行的背景颜色。
AlternationRowBackground 交替行背景色。
ColumnHeaderHeight 标题列的高度。
RowHeaderWidth 具有行标题头的宽度。
ColumnWidth 每列的宽度。
RowHeight 每行的高度。
GridLinesVisibility 确定是否显示网格线。
VerticalGridLinesBrush 用于绘制列之间的网格线的画刷。
HorizontalGrdiLinesBrush 用于绘制行之间网格线的画刷。
HeadersVisibility 确定显示哪个题头的DataGridHeaders。
HorizontalScrollBarVisibility 是否显示水平滚动条。
VerticalScrollBarVisibility 是否显示垂直滚动条。
CanUserResizeColumns 阻止用户通过拖动边缘来改变大小。
CanUserReorderColumns 阻止用户从一个位置拖动到另外一个位置。
AutoGenerateColumns 关闭自动生成列功能。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3.3)、定义列。

使用自动生成的列，可快速创建显示所有数据的DataGrid控件，但放弃了一些控制能力。例如，不能控制列的顺序，每列的宽度，以及如何格式化列中的值以及列中的标题。DataGrid控件支持以下几种类型的列。

a)、DataGridTextColumn。这种类对于大部分数据类型是标准选择。

b)、DataGridCheckBoxColumn。这种列用于显示复选框。

c)、DataGridHyperlinkColumn。这种列显示可单机的列。

d)、DataGridComboBox。这种列用于显示下拉框的ComboBox。

e)、DataGridTemplateColumn。这种列功能非常强大。

3.3.1)、DataGridTextColumn。

有两个常用属性：Visibility属性和DisplayIndex。其中Visibility属性来动态地显示和隐藏列，DisplayIndex用于来设置列的位置。

DataGridTextColumn普通写法： 

<DataGrid Name="dataGrid1" CanUserResizeColumns="False" CanUserReorderColumns="False" AutoGenerateColumns="False">
    <DataGrid.Columns>
        <!--设置Header属性和Binding属性。-->
        <DataGridTextColumn Header="商品价格" Binding="{Binding Path=ProPrice,StringFormat={}{0:C}}">
    </DataGridTextColumn>
</DataGrid>

 效果图：

DataGridTextColumn的其他用法：

<DataGrid Name="dataGrid1" CanUserResizeColumns="False" CanUserReorderColumns="False" AutoGenerateColumns="False">
    <DataGrid.Columns>
        <DataGridTextColumn Header="商品编号" Binding="{Binding Path=ProId}"></DataGridTextColumn>        
        <DataGridTextColumn Header="商品名称" Binding="{Binding Path=ProName}"></DataGridTextColumn>
        <DataGridTextColumn>
            <!--设置Header属性。-->
            <DataGridTextColumn.Header>
                <!--设置圆角-->
                <Border CornerRadius="5" Background="Blue">
                    <TextBlock Foreground="BlueViolet">商品价格</TextBlock>
                </Border>
            </DataGridTextColumn.Header>
            <!--设置Binding属性。-->
            <DataGridTextColumn.Binding>
                <Binding Path="ProPrice" StringFormat="{}{0:C}"></Binding>
            </DataGridTextColumn.Binding>                    
        </DataGridTextColumn>        
    </DataGrid.Columns>
</DataGrid>

 效果图：

 3.3.2)、DataGridCheckBoxColumn。

与DataGridTextColumn一样，使用Binding属性提取数据。是用于设置内部CheckBox元素的IsChecked属性的true或者false值。

<DataGridCheckBoxColumn Header="选中状态" Binding="{Binding Path=ProIsDrag}"> </DataGridCheckBoxColumn> 

效果图：

 3.3.3)、DataGridHyperlinkColumn。

 3.3.4)、DataGridComboBoxColumn。

 3.3.4)、DataGridTemplateColumn。]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]有待完善！！！！！！！！！！！！！

3.4)、设置列的格式和样式。

可通过ElementStyle属性创建应用于DataGrid单元格内部的元素的样式。对于简单的DataGridTextColumn，该元素是TextBlock，对于DataGridCheckBoxColumn，单元格内部的元素是复选框。对于DataGridTemplateColumn，单元格内部的元素是在数据模板中创的任何元素。

xaml代码： 

<!--设置换行样式，要设置列的宽度。-->
<DataGridTextColumn Header="商品描述" Binding="{Binding Path=ProDescribe}" Width="60">                    
    <DataGridTextColumn.ElementStyle>
        <!--设置样式。-->
        <Style TargetType="TextBlock">
            <!--设置TextBlock元素的TextWrapping属性。-->
            <Setter Property="TextBlock.TextWrapping" Value="Wrap"></Setter>
        </Style>                        
    </DataGridTextColumn.ElementStyle>                    
</DataGridTextColumn>

效果图：

其中，ElementStyle提供了设置特定列中所有单元格的格式的方法。然而在某些情况下，可能希望为每一列中的每个单元格应用格式化设置。完成该工作的最简单的方式是为DataGrid.RowStyle属性设置样式，DataGrid控件还提供了少部分用于设置网络其他部分(如列标题头和行标题头)格式的额外属性。

基于样式的DataGrid属性
属性 样式的适用范围
ColumnHeaderStyle 样式的适用范围
RowHeaderStyle 位于网格顶部的列标题的TextBlock。
RowStyle 用于普通行(在列种没有遇到通过列的ElementStyle属性确定制过的行为)的TextBlock。
DragIndicatorStyle 当用户正在将列标题头拖动到新位置时用于列标题头的TextBlock。

 

 

 

 

 

 

3.5)、设置行的格式(e.Row.Background)。

很多情况下，标识包含特定数据的行更有用，例如，可强调价格较高的产品和到期的货运，可通过处理DataGrid.LoadingRow事件已编程的方式应用此类格式。这个时候需要使用DataGridTemplate和自定义值转换器。

每当一行的数据出现在屏幕上时，都会立即为该行为引发LoadingRow事件，这种方式的优点是应用程序不必永远格式化整个网络；相反，只为当前可见的行为引发LoadingRow事件，但也有缺点，当用户在网格中滚动时，会连续引发LoadingRow事件。因此在LoadingRow方法中不能放置耗时的代码。

后台代码：

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        this.Loaded += MainWindow_Loaded;
    }

    Bll.ProductBll productBll = App.ProductBll;
    void MainWindow_Loaded(object sender, RoutedEventArgs e)
    {
        this.dataGrid1.ItemsSource = productBll.GetCollectionProduct2();
    }

    //突出背景。
    private SolidColorBrush highLightBrush = new SolidColorBrush(Colors.Orange);

    //默认背景。
    private SolidColorBrush defaultlBrush = new SolidColorBrush(Colors.White);

    /// <summary>
    /// LoadingRow事件。
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    private void dataGrid1_LoadingRow(object sender, DataGridRowEventArgs e)
    {
        try
        {
            //将行对象转换成Product对象。
            Models.Product product = (Models.Product)e.Row.DataContext;
            //如果价钱大于5就为每一行设置背景色为橘黄色。
            if (product.ProPrice > 5)
            {
                e.Row.Background = highLightBrush;
            }
            else
            {
                //设置行背景色为白色。
                e.Row.Background = defaultlBrush;
            }
        }
        catch (Exception)
        {

        }
    }
}

效果图：

3.6)、显示行细节(RowDetailsTemplate)。

可通过设置RowDetailsVisibilityMode属性来配置行细节区域的显示行为。默认情况下是VisibleWhenSelected，如果设置成Visible就会立即可看到。

xaml代码： 

<Grid>
     <DataGrid Name="dataGrid1" LoadingRow="dataGrid1_LoadingRow">
        <!--RowDetailsTemplate模板 -->
        <DataGrid.RowDetailsTemplate>
            <DataTemplate>
                <Border Margin="10" Padding="10" BorderBrush="SteelBlue" BorderThickness="3" CornerRadius="5">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition></ColumnDefinition>
                            <ColumnDefinition></ColumnDefinition>
                            <ColumnDefinition></ColumnDefinition>
                            <ColumnDefinition Width="2*"></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <TextBlock Grid.Column="0" Text="{Binding Path=ProId}"></TextBlock>
                        <TextBlock Grid.Column="1" Text="{Binding Path=ProName}"></TextBlock>
                        <TextBlock Grid.Column="2" Text="{Binding Path=ProPrice, StringFormat={}{0:C}}"></TextBlock>
                        <Image Grid.Column="3" Width="50" Height="50" VerticalAlignment="Top">
                            <Image.Source>
                                <Binding Path="ProImagePath">
                                    <Binding.Converter>
                                        <local:ImagePathConverter></local:ImagePathConverter>
                                    </Binding.Converter>
                                 </Binding>
                            </Image.Source>
                        </Image>
                    </Grid>
                </Border>
            </DataTemplate>
        </DataGrid.RowDetailsTemplate>
    </DataGrid>
View Code

 后台代码不变，效果图：

3.7)、冻结列。

用FrozenColumnCount属性表示。如果设置FrozenColumnCount 属性 = 1，就说明是第1列被冻结了。

<!--设置DataGrid的第1列为冻结。-->
<DataGrid Name="dataGrid1" LoadingRow="dataGrid1_LoadingRow" RowDetailsVisibilityMode="VisibleWhenSelected" FrozenColumnCount="1">

效果图：

3.8)、选择。

与普通的列表控件类似，DataGrid控件允许用户选择单个项，当选择一项时，可以响应SelectionChanged事件。为找到当前选择的数据对象，可使用SelectedItem属性。如果希望用户能够选择多行，可将SelectionMode属性设置为Extended(默认是Single)，为了选择多行，用户必须按下shift或Ctrl键，可从SelectedItems属性中检索选项的集合。

xaml代码： 

<Grid>        
    <!--DataGrid 的SelectionChanged事件。-->
    <DataGrid Name="dataGrid1" SelectionChanged="dataGrid1_SelectionChanged"> </DataGrid>   
</Grid>

 后台代码：

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        this.Loaded += MainWindow_Loaded;
    }

    Bll.ProductBll productBll = App.ProductBll;

    void MainWindow_Loaded(object sender, RoutedEventArgs e)
    {
        this.dataGrid1.ItemsSource = productBll.GetCollectionProduct2();
    }

    //事件代理函数。
    private void dataGrid1_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        //转换成Product对象。
        Models.Product product = (Models.Product)this.dataGrid1.SelectedItem;
        //弹出信息。
        MessageBox.Show(product.ProName);
    }
}

 效果图：

 

3.9)、排序。

可通过设置列的SortMemberPath属性从绑定的数据对象中选择不同的属性，可以通过设置CanUserSortColumns属性设置为false来禁用排序。

3.10)、编辑。

DataGrid控件最方便之处在于支持编辑，当用户双击DataGrid单元格时，该单元格会切换到编辑模式，但可以通过以下几种方式进行控制：

a)、DataGrid.IsReadOnly属性设置为 True 时，用户不能编辑。

b)、DataGridColumn.IsReadOnly属性设置为true时，用户不能编辑。

c)、只读属性。如果数据对象具有没有属性设置器的属性，DataGrid控件足够智能，它能够注意到该细节，并且进制编辑列。

 

 

 

 

 

 

 

 

  

 

杰克.陈
目录
相关文章
世无争
|
7月前
|
C# 数据库
40.c#：TreeView 控件
40.c#：TreeView 控件
世无争
73 1
kdyonly
|
数据处理 C#
C#-TreeView
TreeView是一个树形结构的控件，能够表现出对象的层级关系，比如文件夹目录展示经常使用。
kdyonly
110 0
camellia。
|
存储 C#
C#（三十）之C#comboBox ListView treeView
本篇内容记录了comboBox下拉列表框属性、ListView 列表视图属性、ListView 列表视图事件、treeView树状视图属性。
camellia。
275 0
C#（三十）之C#comboBox ListView treeView
杰克.陈
|
C# Windows
WPF ItemsControl ListBox ListView比较
原文:WPF ItemsControl ListBox ListView比较 在进行列表信息展示时，WPF中提供多种列表可供选择。这篇博客将对WPF ItemsControl, ListBox, ListView进行比较。
杰克.陈
1169 0
最美的回忆
TreeView控件
最美的回忆
1052 0
余二五
2-10 TreeView 控件
余二五
1293 0
余二五
2-10 TreeView 控件 2
余二五
1035 0
技术小甜
TreeView
技术小甜
998 0
技术小甜
|
Web App开发 SQL 前端开发
精通GridView(C#) （一）
技术小甜
1194 0
技术小甜
|
Web App开发 前端开发 JavaScript
精通GridView(C#) （二）
技术小甜
913 0