zoukankan      html  css  js  c++  java
  • WPF之DataGrid用法(一)

     

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
    本文链接:https://blog.csdn.net/lk13962517093/article/details/22896073

    介绍数据表格DataGrid的基础用法。

    DataGrid可用AutoGenerateColumns属性控制列的生成。Column包含DataGridTextColumn、DataGridCheckBoxColumn、DataGridComboBoxColumn、DataGridHyperlinkColumn、DataGridTemplateColumn等5中格式。

    1.DataGridTextColumn

    DataGridTextColumn最常用,不再做介绍。
     

    2.DataGridCheckBoxColumn

    DataGridCheckBoxColumn是勾选框数据列。效果如下:
    主要XAML代码:
    1.  
      <DataGridCheckBoxColumn Binding="{Binding Selected,NotifyOnSourceUpdated=True,UpdateSourceTrigger=PropertyChanged}"
    2.  
      HeaderStyle="{StaticResource DataGridColumnHeaderStyle1}">
    3.  
      <DataGridCheckBoxColumn.Header>
    4.  
      <CheckBox IsChecked="{Binding IsAllSelected,RelativeSource={RelativeSource AncestorType={x:Type local:DataGridCheckBoxColumn}}}"/>
    5.  
      </DataGridCheckBoxColumn.Header>
    6.  
      </DataGridCheckBoxColumn>
    其中列头选择框居中需要修改HeaderStyle属性,修改ContentPresenter的HorizontalAlignment="Center"即可。修改样式通常使用Blend完成,这里就不在详细介绍。
    另外,通过设置NotifyOnSourceUpdated=True,当数据选择框选择更改时来触发消息,而后用DataGrid的SourceUpdated事件来捕获,在事件中处理列头选择框的状态。
     

    3.DataGridComboBoxColumn

    若要填充下拉列表,请首先使用下列选项之一设置 ComboBox 的 ItemsSource 属性。
    • 静态资源。 
    • x:Static 代码实体。
    • ComboBoxItem 类型的内联集合。
    实现效果如下:
    如需使用非静态资源,则需要使用DataGridComboBoxColumn的EditingElementStyle样式修改编辑样式,通过ElementStyle修改正常显示(非编辑状态)样式。
    主要XAML代码如下:
    1.  
      <DataGrid x:Name="grd" ItemsSource="{Binding StuList3}" AutoGenerateColumns="False">
    2.  
      <DataGrid.Columns>
    3.  
      <DataGridTextColumn Binding="{Binding No}" Header="学号"/>
    4.  
      <DataGridTextColumn Binding="{Binding Name}" Header="姓名"/>
    5.  
      <!--使用普通List集合-->
    6.  
      <DataGridComboBoxColumn x:Name="cmb" Header="性别">
    7.  
      <DataGridComboBoxColumn.EditingElementStyle>
    8.  
      <Style TargetType="ComboBox">
    9.  
      <Setter Property="ItemsSource" Value="{Binding Path=DataContext.SexList,ElementName=grd}" />
    10.  
      <Setter Property="DisplayMemberPath" Value="Name" />
    11.  
      <Setter Property="SelectedValuePath" Value="Name" />
    12.  
      <Setter Property="SelectedValue" Value="{Binding Sex,UpdateSourceTrigger=PropertyChanged}" />
    13.  
      </Style>
    14.  
      </DataGridComboBoxColumn.EditingElementStyle>
    15.  
      <DataGridComboBoxColumn.ElementStyle>
    16.  
      <Style TargetType="ComboBox">
    17.  
      <Setter Property="ItemsSource" Value="{Binding Path=DataContext.SexList,ElementName=grd}" />
    18.  
      <Setter Property="DisplayMemberPath" Value="Name" />
    19.  
      <Setter Property="SelectedValuePath" Value="Name" />
    20.  
      <Setter Property="SelectedValue" Value="{Binding Sex}" />
    21.  
      </Style>
    22.  
      </DataGridComboBoxColumn.ElementStyle>
    23.  
      </DataGridComboBoxColumn>
    24.  
      <!--使用静态资源-->
    25.  
      <DataGridComboBoxColumn Header="性别(静态资源)" ItemsSource="{Binding Source={StaticResource myEnum}}"
    26.  
      TextBinding="{Binding Sex}"
    27.  
      SelectedItemBinding="{Binding Sex,UpdateSourceTrigger=PropertyChanged}">
    28.  
      </DataGridComboBoxColumn>
    29.  
      <!--使用x:Static扩展标记-->
    30.  
      <DataGridComboBoxColumn Header="性别(x:Static)" ItemsSource="{x:Static local:ViewModel.SexList2}"
    31.  
      TextBinding="{Binding Sex}"
    32.  
      SelectedItemBinding="{Binding Sex,UpdateSourceTrigger=PropertyChanged}">
    33.  
      </DataGridComboBoxColumn>
    34.  
      <!--使用内联集合-->
    35.  
      <DataGridComboBoxColumn Header="性别(内联集合)"
    36.  
      TextBinding="{Binding Sex}"
    37.  
      SelectedItemBinding="{Binding Sex,UpdateSourceTrigger=PropertyChanged}">
    38.  
      <DataGridComboBoxColumn.ItemsSource>
    39.  
      <col:ArrayList>
    40.  
      <sys:String>男</sys:String>
    41.  
      <sys:String>女</sys:String>
    42.  
      </col:ArrayList>
    43.  
      </DataGridComboBoxColumn.ItemsSource>
    44.  
      </DataGridComboBoxColumn>
    45.  
      </DataGrid.Columns>
    46.  
      </DataGrid>


     

    4.DataGridHyperlinkColumn

    使用 DataGridHyperlinkColumn 来显示包含 Uri 的数据,如 HTTP 地址或电子邮件地址。只有在 Hyperlink 的直接或间接父级是导航主机时,才会发生 Hyperlink 导航。 导航主机的例子包括 NavigationWindow、 Frame、或任何可以承载 XBAPs(如 Microsoft Internet Explorer 6 或更高版本以及 Firefox 2.0 或更高版本)的浏览器。
    实现效果如下:
    主要XAML代码:
    <DataGridHyperlinkColumn Binding="{Binding Http}" ContentBinding="{Binding Name}" Header="网址"/>

    5.DataGridTemplateColumn

    借助于 DataGridTemplateColumn 类型,可以通过指定用于显示和编辑值的单元格模板来创建您自己的列类型。
    DataGridTemplateColumn可实现以上任何功能,包括checkbox,combobox等。
    现实现如下效果:
    通过修改显示模板和编辑模板来实现功能,主要XMAL代码如下:
    1.  
      <!--显示模板-->
    2.  
      <DataTemplate x:Key="DateTemplate" >
    3.  
      <StackPanel Width="60" Height="30">
    4.  
      <Border Background="LightBlue" BorderBrush="Black" BorderThickness="1,1,1,0">
    5.  
      <TextBlock Text="{Binding Birth, StringFormat={}{0:MMM d}}" FontSize="10" HorizontalAlignment="Center" />
    6.  
      </Border>
    7.  
      <Border Background="White" BorderBrush="Black" BorderThickness="1">
    8.  
      <TextBlock Text="{Binding Birth, StringFormat={}{0:yyyy}}" FontSize="10" FontWeight="Bold" HorizontalAlignment="Center" />
    9.  
      </Border>
    10.  
      </StackPanel>
    11.  
      </DataTemplate>
    12.  
      <!--编辑模板-->
    13.  
      <DataTemplate x:Key="EditingDateTemplate">
    14.  
      <DatePicker SelectedDate="{Binding Birth}" />
    15.  
      </DataTemplate>


     
     

    作者:FoolRabbit
    出处:http://blog.csdn.net/rabbitsoft_1987
    欢迎任何形式的转载,未经作者同意,请保留此段声明!

     
  • 相关阅读:
    vue-quill-editor 注册行高样式
    vue-quill-editor + + antd 组件封装(包含图片上传)
    uniapp
    unipp
    uniapp
    uniapp
    简单实现数据双向绑定
    使用canvas + hammer.js 手势库 制作海报
    如何在jquery 中动态添加 !important 样式
    基于极光 实现在线聊天
  • 原文地址:https://www.cnblogs.com/robertyao/p/11727452.html
Copyright © 2011-2022 走看看