您的位置:

WPF GridView详解

一、WPF GridView样式

GridView是WPF中最重要的数据控件之一,可以以很多不同的样式展示数据。WPF GridView可以使用Style属性自定义样式。

下面是一个自定义GridView的样例,包括两个行定义和两个列定义:

<ListView.View>
    <GridView AllowsColumnReorder="False">
        <GridView.Columns>
            <GridViewColumn Header="First Name" Width="120" DisplayMemberBinding="{Binding FirstName}"></GridViewColumn>
            <GridViewColumn Header="Last Name" Width="120" DisplayMemberBinding="{Binding LastName}"></GridViewColumn>
        </GridView.Columns>
    </GridView>
</ListView.View>

上面的代码指定了两个列,第一个使用"FirstName"属性作为标题和列中的每一行的展示项,第二个类似。在这个样例中,无法拖动列,因为AllowsColumnReorder="False"。

二、WPF GridViewColumn

WPF GridViewColumn控件定义了WPF GridView的列。我们可以使用HeaderTemplate属性定制列头,CellTemplate属性定制列的数据单元格。

下面是一个WPF GridViewColumn的样例:

<GridView AllowsColumnReorder="False">
    <GridViewColumn Header="First Name" Width="120">
        <GridViewColumn.HeaderTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding}" FontWeight="Bold" TextAlignment="Left" Foreground="Blue"/>
            </DataTemplate>
        </GridViewColumn.HeaderTemplate>
    </GridViewColumn>
</GridView>

三、WPF GridView 行号

WPF GridView控件不支持自动添加行号。要在GridView中添加行号,需要添加一个额外的列。该列应该显示当前行的行号。我们可以使用如下代码来创建一个包含行号的GridView:

<GridView x:Name="gridView">
    <GridView.Columns>
        <GridViewColumn Header="#" Width="50" DisplayMemberBinding="{Binding index}" />
        ...
    </GridView.Columns>
</GridView>

下面是在代码中为WPF GridView添加行号的方法:

for (int i = 0; i < gridView.Items.Count; i++)
{
   var gridViewRow = (GridViewRow)gridView.ItemContainerGenerator.ContainerFromIndex(i);
   if (gridViewRow != null)
   {
      var cell = new TextBlock();
      cell.Text = (i + 1).ToString();
      cell.HorizontalAlignment = HorizontalAlignment.Center;
      cell.VerticalAlignment = VerticalAlignment.Center;
      cell.FontWeight = FontWeights.Bold;
      gridViewRow.Header = cell;
   }
}

四、WPF GridView横向

GridView的默认行为是竖向排列。要将GridView设置为横向,请添加以下样式代码:

<GridView.LayoutTransform>
    <RotateTransform Angle="-90"/>
</GridView.LayoutTransform>

五、WPF GridView Wrap

GridView默认不支持数据的折叠。要在WPF GridView中开启这个特性,我们需要使用ItemTemplate属性。通过设置ItemTemplate,我们可以控制如何显示每一行中的数据。下面是一个WrapPanel内的GridView示例:

<GridView x:Name="gridView">
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel />
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
    <GridView.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding Image}" Width="100" Height="100" />
                <TextBlock Text="{Binding Name}" Margin="10,0,0,0" />
            </StackPanel>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

六、WPF GridView固定列

要固定GridView中一列,我们需要在该列上设置固定宽度并将其锁定在屏幕的左侧或右侧。下面是一个ColumnDefinition中锁定一列的样例:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <ListView Grid.Column="1" ItemsSource="{Binding Items}">
        <ListView.View>
            <GridView>
                <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}" Width="100" />
                <GridViewColumn Header="Description" DisplayMemberBinding="{Binding Description}" />
            </GridView>
        </ListView.View>
    </ListView>
</Grid>

七、WPF GridView大量刷新

当GridView中的数据发生变化,我们需要刷新整个GridView以更新UI。在大量数据的情况下,刷新整个控件可能很慢。对于这种情况,我们可以使用以下代码优化刷新过程:

var gridView = (GridView)listView.View;
gridView.Columns.Clear();
AddColumns(gridView);
listView.Items.Refresh();

八、WPF GridView设置行高

要设置GridView的行高,我们可以使用RowHeight属性。以下是设置GridView行高为25的示例:

<GridView RowHeight="25">
...
</GridView>

九、WPF GridView列加悬浮框

WPF GridView列可以添加悬浮框。我们可以在GridViewColumnHeader上添加你的用于显示悬浮框的控件。以下是一个GridView列添加悬浮框的示例:

<GridViewColumn Header="First Name">
    <GridViewColumnHeader.ContentTemplate>
        <DataTemplate>
            <TextBlock Text="First Name" />
        </DataTemplate>
    </GridViewColumnHeader.ContentTemplate>
    <GridViewColumnHeader.ToolTip>
        <StackPanel>
            <TextBlock Text="Column Information" FontWeight="Bold" />
            <TextBlock Text="Column displays the first name." Margin="10,0,0,0" />
        </StackPanel>
    </GridViewColumnHeader.ToolTip>
</GridViewColumn>

以上是WPF GridView的一些常用技术,在实际开发中可以根据需求进行相应的应用。