WPF实现时间轴(仿Gitee)

WPF开发者QQ群： 340500857 | 微信群 -> 进入公众号主页 加入组织

“ 前言，接着上一篇圆形菜单。”

欢迎转发、分享、点赞、在看，谢谢~。

—

效果预览

效果预览（更多效果请下载源码体验）：

—

代码如下

一、TimeLineItemControl.cs 代码如下

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;namespace WpfTimeLineControl
{public class TimeLineItemControl : Control{public bool IsBottom{get { return (bool)GetValue(IsBottomProperty); }set { SetValue(IsBottomProperty, value); }}public static readonly DependencyProperty IsBottomProperty =DependencyProperty.Register("IsBottom", typeof(bool), typeof(TimeLineItemControl), new PropertyMetadata(false));public ItemTypeEnum ItemType{get { return (ItemTypeEnum)GetValue(ItemTypeProperty); }set { SetValue(ItemTypeProperty, value); }}public static readonly DependencyProperty ItemTypeProperty =DependencyProperty.Register("ItemType", typeof(ItemTypeEnum), typeof(TimeLineItemControl));public string Text{get { return (string)GetValue(TextProperty); }set { SetValue(TextProperty, value); }}public static readonly DependencyProperty TextProperty =DependencyProperty.Register("Text", typeof(string), typeof(TimeLineItemControl), new PropertyMetadata(string.Empty));public string Head{get { return (string)GetValue(HeadProperty); }set { SetValue(HeadProperty, value); }}public static readonly DependencyProperty HeadProperty =DependencyProperty.Register("Head", typeof(string), typeof(TimeLineItemControl), new PropertyMetadata(string.Empty));public DataTemplate CommonTemplate{get { return (DataTemplate)GetValue(CommonTemplateProperty); }set { SetValue(CommonTemplateProperty, value); }}public static readonly DependencyProperty CommonTemplateProperty =DependencyProperty.Register("CommonTemplate", typeof(DataTemplate), typeof(TimeLineItemControl));public DataTemplate TextTemplate{get { return (DataTemplate)GetValue(TextTemplateProperty); }set { SetValue(TextTemplateProperty, value); }}public static readonly DependencyProperty TextTemplateProperty =DependencyProperty.Register("TextTemplate", typeof(DataTemplate), typeof(TimeLineItemControl));public Brush BackgroundColor{get { return (Brush)GetValue(BackgroundColorProperty); }set { SetValue(BackgroundColorProperty, value); }}public static readonly DependencyProperty BackgroundColorProperty =DependencyProperty.Register("BackgroundColor", typeof(Brush), typeof(TimeLineItemControl), new PropertyMetadata(null));static TimeLineItemControl(){DefaultStyleKeyProperty.OverrideMetadata(typeof(TimeLineItemControl), new FrameworkPropertyMetadata(typeof(TimeLineItemControl)));}}public enum ItemTypeEnum{Time,Name,Fork,Star}
}

二、App.xaml代码如下

<Application x:Class="WpfTimeLineControl.App"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="clr-namespace:WpfTimeLineControl"StartupUri="MainWindow.xaml"><Application.Resources><PathGeometry x:Key="PathStar">M649.714 573.714l174.857-169.714-241.143-35.429-108-218.286-108 218.286-241.143 35.429 174.857 169.714-41.714 240.571 216-113.714 215.429 113.714zM950.857 369.714q0 12.571-14.857 27.429l-207.429 202.286 49.143 285.714q0.571 4 0.571 11.429 0 28.571-23.429 28.571-10.857 0-22.857-6.857l-256.571-134.857-256.571 134.857q-12.571 6.857-22.857 6.857-12 0-18-8.286t-6-20.286q0-3.429 1.143-11.429l49.143-285.714-208-202.286q-14.286-15.429-14.286-27.429 0-21.143 32-26.286l286.857-41.714 128.571-260q10.857-23.429 28-23.429t28 23.429l128.571 260 286.857 41.714q32 5.143 32 26.286z</PathGeometry><SolidColorBrush x:Key="BorderBrushItem">#fe7708</SolidColorBrush><DataTemplate x:Key="TimeContent"><Ellipse Stroke="{StaticResource BorderBrushItem}" Fill="White" VerticalAlignment="Top"StrokeThickness="2" Width="10" Height="10"/></DataTemplate><DataTemplate x:Key="NameContent"><Grid><Ellipse Fill="{Binding BackgroundColor, RelativeSource={RelativeSource AncestorType={x:Type local:TimeLineItemControl}}}" Width="30" Height="30"/><TextBlock Text="{Binding Head, RelativeSource={RelativeSource AncestorType={x:Type local:TimeLineItemControl}}}"FontSize="16"HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White"/></Grid></DataTemplate><DataTemplate x:Key="TextTime"><TextBlock Margin="{Binding Padding, RelativeSource={RelativeSource AncestorType={x:Type local:TimeLineItemControl}}}" Text="{Binding Text, RelativeSource={RelativeSource AncestorType={x:Type local:TimeLineItemControl}}}"VerticalAlignment="Top"FontWeight="Black" Foreground="Black"FontSize="16"/></DataTemplate><DataTemplate x:Key="TextName"><TextBlock Margin="{Binding Padding, RelativeSource={RelativeSource AncestorType={x:Type local:TimeLineItemControl}}}" Text="{Binding Text, RelativeSource={RelativeSource AncestorType={x:Type local:TimeLineItemControl}}}"VerticalAlignment="Center"FontWeight="Black" Foreground="#005980"FontSize="16"/></DataTemplate><DataTemplate x:Key="TextStar"><WrapPanel Margin="{Binding Padding, RelativeSource={RelativeSource AncestorType={x:Type local:TimeLineItemControl}}}"><Path Data="{StaticResource PathStar}" Height="15" Width="15" Fill="Gray" Stretch="Fill"/><TextBlock Margin="4,0" Text="Star 了" FontSize="12" VerticalAlignment="Center"/><TextBlock Text="{Binding Text, RelativeSource={RelativeSource AncestorType={x:Type local:TimeLineItemControl}}}"VerticalAlignment="Center" Foreground="#005980"FontSize="12"/></WrapPanel></DataTemplate><Style TargetType="{x:Type local:TimeLineItemControl}"><Setter Property="Background" Value="Transparent" /><Setter Property="BorderBrush" Value="{Binding BorderBrush, RelativeSource={RelativeSource AncestorType={x:Type local:TimeLineControl}}}" /><Setter Property="BorderThickness" Value="0" /><Setter Property="Foreground" Value="{Binding Foreground, RelativeSource={RelativeSource AncestorType={x:Type local:TimeLineControl}}}" /><Setter Property="Padding" Value="15,0,15,0" /><Setter Property="MinHeight" Value="50" /><Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type local:TimeLineControl}}}" /><Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type local:TimeLineControl}}}" /><Setter Property="SnapsToDevicePixels" Value="True" /><Setter Property="UseLayoutRounding" Value="True" /><Setter Property="CommonTemplate" Value="{StaticResource TimeContent}"/><Setter Property="TextTemplate" Value="{StaticResource TextTime}"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type local:TimeLineItemControl}"><Grid><Grid.RowDefinitions><RowDefinition Height="auto" /><RowDefinition Height="*" /></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="auto" /><ColumnDefinition Width="*" /></Grid.ColumnDefinitions><Rectangle x:Name="PART_Rectangle" Grid.RowSpan="2" Width="1"Fill="{TemplateBinding BorderBrush}"/><ContentPresenter x:Name="PART_ContentPresenter" ContentTemplate="{TemplateBinding CommonTemplate}"Content="{TemplateBinding Head}" Width="30" Height="30"/><ContentPresenter x:Name="PART_ContentPresenterText" ContentTemplate="{TemplateBinding TextTemplate}"Content="{TemplateBinding Text}" Grid.Row="0" Grid.Column="1"/></Grid><ControlTemplate.Triggers><Trigger Property="ItemType" Value="{x:Static local:ItemTypeEnum.Name}"><Setter Property="CommonTemplate" Value="{StaticResource NameContent}"/><Setter Property="TextTemplate" Value="{StaticResource TextName}"/></Trigger><Trigger Property="ItemType" Value="{x:Static local:ItemTypeEnum.Star}"><Setter Property="CommonTemplate" Value="{x:Null}"/><Setter Property="TextTemplate" Value="{StaticResource TextStar}"/></Trigger><Trigger Property="IsBottom" Value="true"><Setter Property="Visibility" TargetName="PART_Rectangle" Value="Collapsed"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter>
</Style><Style TargetType="{x:Type local:TimeLineControl}"><Setter Property="Background" Value="Transparent" /><Setter Property="BorderBrush" Value="Gray" /><Setter Property="BorderThickness" Value="0" /><Setter Property="Foreground" Value="Black" /><Setter Property="HorizontalContentAlignment" Value="Left" /><Setter Property="VerticalContentAlignment" Value="Top" /><Setter Property="SnapsToDevicePixels" Value="True" /><Setter Property="UseLayoutRounding" Value="True" /><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type local:TimeLineControl}"><Border Background="{TemplateBinding Background}"BorderBrush="{TemplateBinding BorderBrush}"BorderThickness="{TemplateBinding BorderThickness}"SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"UseLayoutRounding="{TemplateBinding UseLayoutRounding}"><ScrollViewer VerticalScrollBarVisibility="Auto"><ItemsPresenter /></ScrollViewer></Border></ControlTemplate></Setter.Value></Setter>
</Style></Application.Resources>
</Application>

三、MainWindow.xaml.cs代码如下

using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Text;
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 WpfTimeLineControl
{/// <summary>/// MainWindow.xaml 的交互逻辑/// </summary>public partial class MainWindow : Window{public MainWindow(){InitializeComponent();}int num = 0;private void AddButton_Click(object sender, RoutedEventArgs e){num++;switch (num){case 1:this.TimeLineControl.Items.Add(new TimeLineItemControl() { Text = DateTime.Now.ToString("yyyy-MM-dd"), ItemType = ItemTypeEnum.Time });this.TimeLineControl.Items.Add(new TimeLineItemControl() { Text = "我是骗人布010", Head = "我", ItemType = ItemTypeEnum.Name, BackgroundColor = new SolidColorBrush(GetRandomColor()) });this.TimeLineControl.Items.Add(new TimeLineItemControl() { Text = "闫驚鏵/WPFDevelopers", ItemType = ItemTypeEnum.Star });break;case 2:this.TimeLineControl.Items.Add(new TimeLineItemControl() { Text = DateTime.Now.AddDays(-1).ToString("yyyy-MM-dd"), ItemType = ItemTypeEnum.Time });this.TimeLineControl.Items.Add(new TimeLineItemControl() { Text = "风云大陆", Head = "风", ItemType = ItemTypeEnum.Name, BackgroundColor = new SolidColorBrush(GetRandomColor()) });break;case 3:this.TimeLineControl.Items.Add(new TimeLineItemControl() { Text = DateTime.Now.AddDays(-2).ToString("yyyy-MM-dd"), ItemType = ItemTypeEnum.Time });this.TimeLineControl.Items.Add(new TimeLineItemControl() { Text = "王羲之", Head = "王", ItemType = ItemTypeEnum.Name, BackgroundColor = new SolidColorBrush(GetRandomColor())});this.TimeLineControl.Items.Add(new TimeLineItemControl() { Text = "闫驚鏵/WPFDevelopers", ItemType = ItemTypeEnum.Star });break;case 4:this.TimeLineControl.Items.Add(new TimeLineItemControl() { Text = DateTime.Now.AddDays(-3).ToString("yyyy-MM-dd"), ItemType = ItemTypeEnum.Time });this.TimeLineControl.Items.Add(new TimeLineItemControl() { Text = "花雨", Head = "花", ItemType = ItemTypeEnum.Name, BackgroundColor = new SolidColorBrush(GetRandomColor()) });this.TimeLineControl.Items.Add(new TimeLineItemControl() { Text = "闫驚鏵/WPFDevelopers", ItemType = ItemTypeEnum.Star });break;case 5:this.TimeLineControl.Items.Add(new TimeLineItemControl() { Text = DateTime.Now.AddDays(-6).ToString("yyyy-MM-dd"), ItemType = ItemTypeEnum.Time });this.TimeLineControl.Items.Add(new TimeLineItemControl() { Text = "纪春庆", Head = "纪", ItemType = ItemTypeEnum.Name, BackgroundColor = new SolidColorBrush(GetRandomColor()) });this.TimeLineControl.Items.Add(new TimeLineItemControl() { Text = "闫驚鏵/WPFDevelopers", ItemType = ItemTypeEnum.Star });break;default:break;}}Color GetRandomColor(){var random = new Random();return Color.FromRgb((byte)random.Next(0, 255), (byte)random.Next(0, 255), (byte)random.Next(0, 255));}}
}

源码地址

github：https://github.com/yanjinhuagood/WPFDevelopers.git

gitee：https://gitee.com/yanjinhua/WPFDevelopers.git

WPF开发者QQ群： 340500857

blogs： https://www.cnblogs.com/yanjinhua

Github：https://github.com/yanjinhuagood

出处：https://www.cnblogs.com/yanjinhua

版权：本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。

转载请著名作者出处 https://github.com/yanjinhuagood