当前位置:网站首页 / WPF / 正文

写给自己的WPF4.5 25[DataGrid 1/3 ]

时间:2015年04月28日 | 作者 : aaronyang | 分类 : WPF | 浏览: 4184次 | 评论 0

DataGrid分3篇讲,这是第一篇,很基础,介绍了 各种列的使用,详细讲解了Combobox列

DEMO下载: 链接:http://pan.baidu.com/s/1mgMLEOw 密码:rqjw


前台代码,就是一个布局代码,放了一个DataGrid

<Window x:Class="ListDataDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="800" Width="1400" Loaded="Window_Loaded">
    <UniformGrid Columns="2" Rows="2">
        <DockPanel Grid.Column="0" Grid.Row="0" Background="#FFF7F6F6" LastChildFill="True" x:Name="demo1">
            <Grid DockPanel.Dock="Top" Background="AliceBlue" Height="28">
                <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">DEMO1 DataGrid</TextBlock>
            </Grid>

            <Grid DockPanel.Dock="Bottom" Height="28"  HorizontalAlignment="Stretch"  Background="AliceBlue" >
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" >
                    
                </StackPanel>
            </Grid>

            <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <DataGrid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" AutoGenerateColumns="True" x:Name="dg1" >
                    
                </DataGrid>
            </Grid>
        </DockPanel>


        <DockPanel Grid.Column="0" Grid.Row="1">

        </DockPanel>
        <DockPanel Grid.Column="1" Grid.Row="0">

        </DockPanel>
        <DockPanel Grid.Column="1" Grid.Row="1" Background="#FFF7F6F6">

        </DockPanel>
    </UniformGrid>
</Window>

设置datagrid的AutoGenerateColumns为true,然后后台绑定ItemsSource

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace ListDataDemo
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            //创建数据源
            DateTime dt = DateTime.Now.AddHours(-12);
            BlogCollection b = new BlogCollection();
            Random rand = new Random();
            for (int i = 1; i <= 100; i++)
            {
                AyBlog ay = new AyBlog();
                ay.Name = "wpf的博客" + i;
                ay.Content = "正在研发Ay.Framework.WPF框架,已经过去了第" + i+"天";
                ay.CreateTime = dt.AddMinutes(i);
                ay.ReadCount = rand.Next(100,1000000);
                b.Add(ay);
            }
            dg1.ItemsSource = b;
        }

    }
    public class AyBlog
    {
        public string Name { get; set; }
        public string Content { get; set; }

        public DateTime CreateTime { get; set; }

        public int ReadCount { get; set; }
    }

    public class BlogCollection : ObservableCollection<AyBlog>
    {

    }
}

效果图:默认文本框可以编辑的.

Image 1.png

改变列宽,默认是SizeToCells 

Image 3.png

SizeToCells是单向的,比如描述列,可能太长,前几个比较短,滚轮向下滚动,datagrid会智能加宽cell的宽度方便显示,但是是单向的,当再向上滚动时候,列宽是回不去的.

11.gif

禁用默认的行为,比如排序,拖动列调整顺序,调整列宽.

Image 4.png

自定义列

DataGrid.ColumnWidth是设置全局列宽, DataGridColumn.Width设置一列.  

我们设置AutoGenerateColumns=false

新建一个新的DataGrid,供我们折腾.

  <DataGrid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" AutoGenerateColumns="false" x:Name="dg2" >
                    
                </DataGrid>

Image 6.png这一点很像asp.net

文本列,这里Width,我故意用的*,是想说明,除了具体值,还可以百分比设置列宽

<DataGrid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" AutoGenerateColumns="false" x:Name="dg2" >
                    <DataGrid.Columns>
                        <DataGridTextColumn Header="博客标题" Width="*" Binding="{Binding Name}">
                            
                        </DataGridTextColumn>
                        <DataGridTextColumn Header="博客点击数" Width="0.5*" Binding="{Binding ReadCount,StringFormat={}{0:C}}">

                        </DataGridTextColumn>
                    </DataGrid.Columns>
                </DataGrid>

效果图:

Image 7.png

DataGridCheckBoxColumn

增加一个    public bool IsPublish { get; set; }属性用来显示checkbox

数据创建添加值

           ay.IsPublish=rand.Next(100) % 2==0;

效果图:

Image 8.png

DataGridHyperlinkColumn

DataGrid需要放置在Frame或者NavigationWindow种,自动导航才生效

我们添加string类型的Address属性

列增加

 <DataGridHyperlinkColumn Header="阅读" Width="*" Binding="{Binding Address}"/>

这里运行时候点击没有效果的.我们使用DataGridTemplateColumn,定义它里面的CellTemplate,重新改name那列

 <DataGridTemplateColumn>
                            <DataGridTemplateColumn.CellTemplate>
                                <DataTemplate>
                                    <TextBlock><Hyperlink NavigateUri="{Binding Address}" RequestNavigate="Hyperlink_RequestNavigate"><TextBlock Text="{Binding Name}"></TextBlock></Hyperlink></TextBlock>
                                </DataTemplate>
                            </DataGridTemplateColumn.CellTemplate>
                        </DataGridTemplateColumn>

后台打开浏览器

   private void Hyperlink_RequestNavigate(object sender, RequestNavigateEventArgs e)
        {
            Process.Start(new ProcessStartInfo(e.Uri.AbsoluteUri));

            e.Handled = true;
        }

效果图:

23.gif

DataGridComboBoxColumn

为了让代码更质量,我们新建个 目录类,有id和name,而不是单纯的string,然后指定blogcatagory的itemssource

    public class BlogCatagory {
        public int Id { get; set; }
        public string CatagoryName { get; set; }
    }
  <DataGridComboBoxColumn Header="博文分类" Width="0.5*" x:Name="blogcatagory">
                            
                        </DataGridComboBoxColumn>
   public ObservableCollection<BlogCatagory> catagories = new ObservableCollection<BlogCatagory>();
        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            catagories.Add(new BlogCatagory { CatagoryName = "ayjs.net独家", Id = 1 });
            catagories.Add(new BlogCatagory { CatagoryName = "WPF技术", Id = 2 });
            catagories.Add(new BlogCatagory { CatagoryName = "WPF分享", Id =3 });
            catagories.Add(new BlogCatagory { CatagoryName = "aaronyang分享", Id =4 });
             blogcatagory.ItemsSource = catagories;
             //默认分类id都是赋值为 3
        }
    public class AyBlog
    {
        public string Name { get; set; }
        public string Content { get; set; }

        public string Address { get; set; }

        public DateTime CreateTime { get; set; }

        public int ReadCount { get; set; }

        public bool IsPublish { get; set; }

        public int CatagoryId { get; set; }

    }
    public class BlogCatagory {
        public int Id { get; set; }
        public string CatagoryName { get; set; }
    }

接下来,我们具体介绍下DataGridComboBoxColumn的部分属性

    <DataGridComboBoxColumn Header="博文分类" Width="0.5*" x:Name="blogcatagory" 
                                                  SelectedValueBinding="{Binding Path=CatagoryId}"  SelectedValuePath="Id" DisplayMemberPath="CatagoryName" >
                            
                        </DataGridComboBoxColumn>

SelectedValueBinding指定整个DataGrid数据中 需要绑定的列名字,就是AyBlog对象,SelectedValuePath和DisplayMemberPath就是和Combobox一样的,选中后用哪个属性返回值,显示哪个值

33.gif

如何默认展示 就是下拉框呢? 而不是点击时候是下拉框呢?

表示建议使用DataGridTemplateColumn,但是DataGridTemplateColumn没有DataContext属性,且DataTemplate中的控件设置name,后台也无法拿到,那怎么给DataTemplate中的控件赋值呢

第一种方法思路,给datagrid的实体对象,设置需要的属性,然后 DataTemplate中绑定.

第二种思路,这里我使用Combobox,我需要数据源,我使用ObjectDataProvider,然后Combobox绑定这个ObjectDataProvider,表示这种方法不太灵活.

我们按照第一个思路:

给AyBlog类增加Catagories属性

Image 9.png

在创建数据的时候,给对象赋值   ay.Catagories = catagories;

前台使用模板列方式

    <DataGridTemplateColumn Width="0.5*" >
                            <DataGridTemplateColumn.CellTemplate>
                                <DataTemplate >
                                    <ComboBox SelectedValue="{Binding CatagoryId}"
                                         IsEditable="False"
                                         SelectedValuePath="Id"
                                         DisplayMemberPath="CatagoryName"
                                         x:Name="blogcatagory2"
                                        ItemsSource="{Binding Catagories}"
                                         />
                                </DataTemplate>
                            </DataGridTemplateColumn.CellTemplate>
                        </DataGridTemplateColumn>

我们可以在上一个ComboboxColumn中添加双向绑定,当值变化,即修改集合的值,此时右侧模板列种的下拉框也会跟着变化

   <DataGridComboBoxColumn Header="博文分类" Width="0.5*" x:Name="blogcatagory" 
                                                  SelectedValueBinding="{Binding Path=CatagoryId,Mode=TwoWay}"  SelectedValuePath="Id" DisplayMemberPath="CatagoryName" >

效果图:

45.gif

到这里 DataGrid上集讲解先到这里


推荐您阅读更多有关于“WPF4.5,”的文章

猜你喜欢

额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

  查看权限

抖音:wpfui 工作wpf,目前主maui

招聘合肥一枚WPF工程师,跟我一个开发组,10-15K,欢迎打扰

目前在合肥市企迈科技就职

AYUI8全源码 Github地址:前往获取

杨洋(AaronYang简称AY,安徽六安人)AY唯一QQ:875556003和AY交流

高中学历,2010年开始web开发,2015年1月17日开始学习WPF

声明:AYUI7个人与商用免费,源码可购买。部分DEMO不免费

不是从我处购买的ayui7源码,我不提供任何技术服务,如果你举报从哪里买的,我可以帮你转正为我的客户,并送demo

查看捐赠

AYUI7.X MVC教程 更新如下:

第一课 第二课 程序加密教程

标签列表