WPF實(shí)現(xiàn)DataGrid內(nèi)部畫(huà)線

需要實(shí)現(xiàn)如下效果圖


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="序號(hào)"/>
                    <DataGridTextColumn Header="型號(hào)"/>
                    <DataGridTextColumn Header="類(lèi)別"/>
                    <DataGridTextColumn Header="姓名" Binding="{Binding Username}"/>
                    <DataGridTextColumn Header="代號(hào)" 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>
        /// 自動(dòng)畫(huà)線
        /// </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)
        {
            //默認(rèn)一條藍(lán)色的線條
            Line nLine = new Line();
            nLine.Stroke = brush;
            nLine.StrokeThickness = 5;
            nLine.X1 = x1;  // count-2  保證 line的起始點(diǎn)為點(diǎn)集合中的倒數(shù)第二個(gè)點(diǎn)。  
            nLine.Y1 = 0;
            // 終點(diǎn)X,Y 為當(dāng)前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)
        {
            //獲取上調(diào)先
            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();

        }
    }
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,355評(píng)論 25贊 708
  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案？ 參考答案 (1)瀏覽器兼容問(wèn)題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,200評(píng)論 1贊 92
  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 136,711評(píng)論 19贊 139
  • 【為愛(ài)朗讀堅(jiān)持365天第71天】#大V店家庭閱讀訓(xùn)練第19天#。餅干狗系列作為英語(yǔ)啟蒙真的不錯(cuò)呢，一只可愛(ài)而又活潑...
    大V店_做更好的父母閱讀 217評(píng)論 0贊 0
  • 作為一個(gè)前端，要學(xué)習(xí)的技術(shù)實(shí)在是太多了。所以準(zhǔn)備現(xiàn)在開(kāi)始寫(xiě)點(diǎn)技術(shù)博客，不為別的就是希望以后忘記這個(gè)技術(shù)點(diǎn)時(shí)...
    Session_dc1a閱讀 321評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容