WPF实现时间轴(仿Gitee)

Posted dotNET跨平台

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了WPF实现时间轴(仿Gitee)相关的知识,希望对你有一定的参考价值。

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

 前言,接着上一篇圆形菜单。

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

01

效果预览

效果预览(更多效果请下载源码体验):

02


代码如下

一、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

以上是关于WPF实现时间轴(仿Gitee)的主要内容,如果未能解决你的问题,请参考以下文章

WPF实现雷达图(仿英雄联盟)

WPF教程005 - Timeline时间轴控件的实现

CardView+RecyclerView实现仿探探UI

CardView+RecyclerView实现仿探探UI

C# winform 怎么实现如图这样的时间轴?

可缩放时间轴和录像片段选择器的实现