WPF实现时间轴(仿Gitee)

    
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
    }}

<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.286zPathGeometry>
        <SolidColorBrush x:Key="BorderBrushItem">#fe7708SolidColorBrush>
        <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>

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{    /// 
    /// MainWindow.xaml 的交互逻辑    ///     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));        }    }}