WPF实现DataGrid内部画线

作者: Godtoy | 来源:发表于2017-04-21 08:36 被阅读0次

WPF实现DataGrid内部画线
WPF datagrid 行号
【WPF】datagrid隔行变色
WPF DataGrid 基本使用
WPF DataGrid 使用进阶
WPF DataGrid 展示数据
WPF DataGrid 触发器
WPF-动态生成DataGrid
WPF DataGrid 使用数据模板
wpf中的datagrid绑定操作按钮是否显示或者隐藏

需要实现如下效果图

GIF.gif

主要就是用到了模版，还有获取模版里面带有name的子元素

布局文件

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        xmlns:Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero2" x:Class="WpfApp1.MainWindow"
        mc:Ignorable="d"
        Title="MainWindow" WindowStartupLocation="CenterScreen"
        WindowState="Maximized" SnapsToDevicePixels="True">
    <Window.Resources>
        <Style TargetType="{x:Type TextBlock}">
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="TextAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Center"></Setter>
        </Style>

        <Style TargetType="{x:Type DataGrid}">
            <Setter Property="Padding" Value="0"></Setter>
        </Style>

        <Style TargetType="{x:Type TextBlock}" x:Key="DataTimerHeadTextTime">
            <Setter Property="Width" Value="Auto"></Setter>
            <Setter Property="TextAlignment" Value="Center"/>
            <Setter Property="Grid.ColumnSpan" Value="2"/>
            <Setter Property="VerticalAlignment" Value="Center"></Setter>
        </Style>

        <Style TargetType="{x:Type DataGridColumnHeader}" x:Key="DataTimerColumnStyle">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
                        <Border x:Name="buttonBorderOuter"
                        BorderBrush="#fff"
                        BorderThickness="1"
                        Background="#FFF"
                        Width="Auto"
                        Padding="0">
                            <ContentPresenter>
                            </ContentPresenter>
                            <Border.Triggers>
                                <EventTrigger RoutedEvent="MouseEnter">
                                    <BeginStoryboard>
                                        <Storyboard>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger>
                                <EventTrigger RoutedEvent="MouseLeave">
                                    <BeginStoryboard>
                                        <Storyboard>

                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger>
                            </Border.Triggers>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <DataTemplate x:Key="DataTimerTpl">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Border Grid.Row="0" Grid.Column="0" BorderBrush="Black" BorderThickness="0,0,1,0" ></Border>
                <Border Grid.Column="1" BorderBrush="Black" BorderThickness="0,0,1,0" ></Border>
                <Border Grid.Column="2" BorderBrush="Black" BorderThickness="0,0,1,0" ></Border>
                <Border Grid.Column="3" BorderBrush="Black" BorderThickness="0,0,1,0" ></Border>
                <Border Grid.Column="4" BorderBrush="Black" BorderThickness="0,0,1,0" ></Border>
                <Border Grid.Column="5" BorderBrush="Black" BorderThickness="0,0,1,0" ></Border>
                <Border Grid.Column="6" BorderBrush="Black" BorderThickness="0,0,1,0" ></Border>
                <Border Grid.Column="7" BorderBrush="Black" BorderThickness="0,0,1,0" ></Border>
                <Border Grid.Column="8" BorderBrush="Black" BorderThickness="0,0,1,0" ></Border>
                <Border Grid.Column="9" BorderBrush="Black" BorderThickness="0,0,1,0" ></Border>
                <Border Grid.Column="10" BorderBrush="Black" BorderThickness="0,0,1,0" ></Border>
                <Border Grid.Column="11" BorderBrush="Black" BorderThickness="0,0,1,0" ></Border>
                <Border Grid.Column="12" BorderBrush="Black" BorderThickness="0,0,1,0" ></Border>
                <Border Grid.Column="13" BorderBrush="Black" BorderThickness="0,0,1,0" ></Border>
                <Border Grid.Column="14" BorderBrush="Black" BorderThickness="0,0,1,0" ></Border>
                <Border Grid.Column="15" BorderBrush="Black" BorderThickness="0,0,1,0" ></Border>
                <Border Grid.Column="16" BorderBrush="Black" BorderThickness="0,0,1,0" ></Border>
                <Border Grid.Column="17" BorderBrush="Black" BorderThickness="0,0,1,0" ></Border>
                <Grid Name="line" Grid.ColumnSpan="18">
                    <Canvas VerticalAlignment="Center" Name="lineShow">
                    </Canvas>
                </Grid>
            </Grid>
        </DataTemplate>

        <DataTemplate x:Key="DataTimerHeader">
            <Grid Width="Auto">
                <Grid.RowDefinitions>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="7" TextAlignment="Center">8:00</TextBlock>
                <TextBlock Style="{StaticResource DataTimerHeadTextTime}" Grid.Column="0" Grid.Row="1">0</TextBlock>
                <TextBlock Style="{StaticResource DataTimerHeadTextTime}" Grid.Column="1" Grid.Row="1">10</TextBlock>
                <TextBlock Style="{StaticResource DataTimerHeadTextTime}" Grid.Column="2" Grid.Row="1">20</TextBlock>
                <TextBlock Style="{StaticResource DataTimerHeadTextTime}" Grid.Column="3" Grid.Row="1">30</TextBlock>
                <TextBlock Style="{StaticResource DataTimerHeadTextTime}" Grid.Column="4" Grid.Row="1">40</TextBlock>
                <TextBlock Style="{StaticResource DataTimerHeadTextTime}" Grid.Column="5" Grid.Row="1">50</TextBlock>
                <TextBlock Grid.Row="0" Grid.Column="6" Grid.ColumnSpan="7" TextAlignment="Center">09:00</TextBlock>
                <TextBlock Style="{StaticResource DataTimerHeadTextTime}" Grid.Column="6" Grid.Row="1">0</TextBlock>
                <TextBlock Style="{StaticResource DataTimerHeadTextTime}" Grid.Column="7" Grid.Row="1">10</TextBlock>
                <TextBlock Style="{StaticResource DataTimerHeadTextTime}" Grid.Column="8" Grid.Row="1">20</TextBlock>
                <TextBlock Style="{StaticResource DataTimerHeadTextTime}" Grid.Column="9" Grid.Row="1">30</TextBlock>
                <TextBlock Style="{StaticResource DataTimerHeadTextTime}" Grid.Column="10" Grid.Row="1">40</TextBlock>
                <TextBlock Style="{StaticResource DataTimerHeadTextTime}" Grid.Column="11" Grid.Row="1">50</TextBlock>
                <TextBlock Grid.Row="0" Grid.Column="12" Grid.ColumnSpan="7" TextAlignment="Center">10:00</TextBlock>
                <TextBlock Style="{StaticResource DataTimerHeadTextTime}" Grid.Column="12" Grid.Row="1">0</TextBlock>
                <TextBlock Style="{StaticResource DataTimerHeadTextTime}" Grid.Column="13" Grid.Row="1">10</TextBlock>
                <TextBlock Style="{StaticResource DataTimerHeadTextTime}" Grid.Column="14" Grid.Row="1">20</TextBlock>
                <TextBlock Style="{StaticResource DataTimerHeadTextTime}" Grid.Column="15" Grid.Row="1">30</TextBlock>
                <TextBlock Style="{StaticResource DataTimerHeadTextTime}" Grid.Column="16" Grid.Row="1">40</TextBlock>
                <TextBlock Style="{StaticResource DataTimerHeadTextTime}" Grid.Column="17" Grid.Row="1">50</TextBlock>
            </Grid>
        </DataTemplate>

    </Window.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="100"></RowDefinition>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid Grid.Row="0">
            <Line VerticalAlignment="Center" X1="0" Y1="0" X2="100" Y2="0" StrokeThickness="2" Stroke="Red"></Line>
        </Grid>
        <Grid Grid.Row="1">
            <DataGrid x:Name="dataGrid" AutoGenerateColumns="False" CanUserAddRows="False">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="序号"/>
                    <DataGridTextColumn Header="型号"/>
                    <DataGridTextColumn Header="类别"/>
                    <DataGridTextColumn Header="姓名" Binding="{Binding Username}"/>
                    <DataGridTextColumn Header="代号" Binding="{Binding Number}"/>
                    <DataGridTemplateColumn  Width="Auto" 
                                             HeaderStyle="{StaticResource DataTimerColumnStyle}" 
                                           IsReadOnly="True"
                                            CellTemplate="{StaticResource DataTimerTpl}"
                                            HeaderTemplate="{StaticResource DataTimerHeader}"></DataGridTemplateColumn>
                </DataGrid.Columns>
            </DataGrid>
        </Grid>
    </Grid>
</Window>

C#处理文件

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Timers;
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;
using WpfApp1.Models;

namespace WpfApp1
{

    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {

        private Timer updateTimer;
        private float _lineSpeed = 10;

        public MainWindow()
        {
            InitializeComponent();
            this._init();
            this.createTmpData();



        }
        private void createTmpData()
        {
            List<TableDataModel> models = new List<TableDataModel>();

            TableDataModel model1 = new TableDataModel();
            model1.Number = 1;
            model1.Username = "赵俊";
            TableDataModel model2 = new TableDataModel();
            model2.Number = 3;
            model2.Username = "张三";
            TableDataModel model3 = new TableDataModel();
            model3.Number = 4;
            model3.Username = "李四";

            TableDataModel model4 = new TableDataModel();
            model4.Number = 5;
            model4.Username = "王五";


            models.Add(model1);
            models.Add(model2);
            models.Add(model3);
            models.Add(model4);
            dataGrid.ItemsSource = models;

        }

        private void _init()
        {

            this.updateTimer = new Timer();
            updateTimer.Elapsed += Timer_Elapsed;
            updateTimer.Interval = 1000;
            updateTimer.Start();
        }

        /// <summary>
        /// 自动画线
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Timer_Elapsed(object sender, ElapsedEventArgs e)
        {
            this.Dispatcher.Invoke(new Action(() =>
            {
                TableDataModel model = dataGrid.Items.GetItemAt(1) as TableDataModel;
                Canvas obj = this.GetRowCanvas(1);

                if (model.Lines.Count <= 0)
                {
                    Line nline = CreateNewLine(30, 0, Brushes.Blue);
                    model.SwitchBrush();
                    model.Lines.Push(nline);
                    obj.Children.Add(nline);
                    return;
                }
                else
                {
                    Line oldLine = (Line)model.Lines.Peek();
                    oldLine.X2 += _lineSpeed;
                }
            }));
        }

        private TableDataModel GetDataGridModel(int index)
        {
            TableDataModel model = dataGrid.Items.GetItemAt(index) as TableDataModel;
            return model;
        }


        private Canvas GetRowCanvas(int itemIndex)
        {
            FrameworkElement item = dataGrid.Columns[5].GetCellContent(dataGrid.Items[itemIndex]);
            DataGridTemplateColumn temp = (dataGrid.Columns[5] as DataGridTemplateColumn);
            Canvas obj = temp.CellTemplate.FindName("lineShow", item) as Canvas;
            return obj;
        }

        private Line CreateNewLine(double x1, double len, Brush brush)
        {
            //默认一条蓝色的线条
            Line nLine = new Line();
            nLine.Stroke = brush;
            nLine.StrokeThickness = 5;
            nLine.X1 = x1;  // count-2  保证 line的起始点为点集合中的倒数第二个点。  
            nLine.Y1 = 0;
            // 终点X,Y 为当前point的X,Y  
            nLine.X2 = x1 + len;
            nLine.Y2 = 0;
            nLine.Cursor = Cursors.Hand;
            nLine.MouseLeftButtonDown += NLine_MouseLeftButtonDown;
            nLine.VerticalAlignment = VerticalAlignment.Center;
            return nLine;
        }

        private void NLine_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            //获取上调先
            TableDataModel model = GetDataGridModel(1);
            Canvas obj = this.GetRowCanvas(1);
            Line oldLine = (Line)model.Lines.Peek();
            Line nline = CreateNewLine(oldLine.X2, 10, model.LineBrush);
            model.SwitchBrush();
            model.Lines.Push(nline);
            obj.Children.Add(nline);


        }

        private void Grid_KeyDown(object sender, KeyEventArgs e)
        {
            //停止
            this.updateTimer.Stop();

        }
    }
}

WPF实现DataGrid内部画线
需要实现如下效果图主要就是用到了模版，还有获取模版里面带有name的子元素布局文件 C#处理文件
WPF datagrid 行号
WPF datagrid Row number Display DependencyProperty.Regist...
【WPF】datagrid隔行变色
设置这个属性： RowBackground="Red" AlternatingRowBackground="Yel...
WPF DataGrid 基本使用
效果如下： 1. 设计DataGrid展示的数据模型类 public class Song { public i...
WPF DataGrid 使用进阶
数据模型和数据模型创建的数据集代码和上一篇代码一样。只是UI创建的绑定方式不一样，不再默认绑定方式。效果如下：...
WPF DataGrid 展示数据
DataGrid 经常用作数据的展示，例如： 1. UI设计
WPF DataGrid 触发器
Type为数据表中某一列注意：TargetType="DataGridRowHeader"修改的属性是行头的背景颜...
WPF-动态生成DataGrid
在封装自定义组件的时候，看到很多类似表格的控件，表格中的数据都不是固定的，每个表格的表条和内容都不一样，如果直接在...
WPF DataGrid 使用数据模板
1. 创建数据模型类 public class TestPointModel { public int...
wpf中的datagrid绑定操作按钮是否显示或者隐藏
如图，需要在wpf中的datagrid的操作那列有个确认按钮，然后在某些条件下确认按钮可见，某些情况下不可见的，放...