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)的主要内容，如果未能解决你的问题，请参考以下文章