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();

        }
    }
}

最后编辑于：2017.12.06 23:16:49

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 205,033评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,725评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,473评论 0赞 338
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,846评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,848评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,691评论 1赞 282
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,053评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,700评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 42,856评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,676评论 2赞 323
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,787评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,430评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,034评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,990评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,218评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,174评论 2赞 352
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,526评论 2赞 343

WPF实现DataGrid内部画线

推荐阅读更多精彩内容