WPF - 简单的UI框架 - 仪表盘
源码链接：https://github.com/DuelWithSelf/WPFEffects
参考：https://www.cnblogs.com/duel/p/duel_clock.html
更新一： 功能导览模块新增Binding用法示例。
更新二：仪表盘效果实现。
Binding用法与ListBox的用法一致：
Xaml定义节点样式； .cs 文件中定义数据：
<DataTemplate x:Key="ListMenuBox.ItemTemplate" DataType="{x:Type local:CatalogOfEffect}">
<Border x:Name="BdrNavItem" Background="Transparent" Height="30"
MouseLeftButtonUp="BdrNavItem_MouseLeftButtonUp">
<TextBlock Margin="60,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center"
Foreground="White" Text="{Binding Path=Name, Mode=TwoWay}"/>
</Border>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=IsSelected}" Value="True">
<Setter TargetName="BdrNavItem" Property="Background"
Value="{StaticResource ColorBrush.LightWhite}"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
public class BaseRecord : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string prop)
{
if (this.PropertyChanged != null)
this.PropertyChanged(this, new PropertyChangedEventArgs(prop));
}
}
public class CatalogOfEffect: BaseRecord
{
private string _Name;
public string Name {
get { return _Name; }
set { _Name = value; this.OnPropertyChanged("Name"); }
}
private bool _IsSelected;
public bool IsSelected
{
get { return _IsSelected; }
set { _IsSelected = value; this.OnPropertyChanged("IsSelected"); }
}
private string _Key;
public string Key
{
get { return _Key; }
set { _Key = value; }
}
}
引用样式：
<CustomFrms:ListMenuBox
x:Name="LmxBinding" Text="Binding示例"
IconData="{StaticResource PathData.TagSolid}"
ItemTemplate="{StaticResource ListMenuBox.ItemTemplate}"/>
指定数据源：
ObservableCollection<CatalogOfEffect> ltCatalogs = new System.Collections.ObjectModel.ObservableCollection<CatalogOfEffect>();
ltCatalogs.Add(new CatalogOfEffect() { Name = "淡入动效", Key="AnimFadeIn" });
ltCatalogs.Add(new CatalogOfEffect() { Name = "淡出动效", Key = "AnimFadeOut" });
ltCatalogs.Add(new CatalogOfEffect() { Name = "翻转动效", Key = "AnimFlip" });
ltCatalogs.Add(new CatalogOfEffect() { Name = "爆炸动效", Key = "AnimExpo" });
this.LmxBinding.ItemsSource = ltCatalogs;
扇形画面有很多码农通过Path、 ArcSegment等方式去构建。 Blend里面有Arc。 官方封装好的直接拿来用，省心省力。 用Path和ArcSegment的方式去实现，无非是用自己的方式再封装出一个Arc，其实没必要。
仪表盘的实现原理请参考Github上的源码。
仪表盘：代码
<UserControl x:Class="WPFEffects.Modules.Chart.ClockChart.ClockSlave2View"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:WPFEffects.Modules.Chart.ClockChart"
xmlns:BlendCom="http://schemas.microsoft.com/expression/2010/drawing"
mc:Ignorable="d" d:DesignHeight="480" d:DesignWidth="480">
<Grid Width="370" Height="370">
<BlendCom:Arc Width="340" Height="340" StartAngle="-136"
EndAngle="136" Stretch="None" ArcThickness="60">
<BlendCom:Arc.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#3300A2FF" Offset="0"/>
<GradientStop Color="#005ED3FF" Offset="1"/>
</LinearGradientBrush>
</BlendCom:Arc.Fill>
</BlendCom:Arc>
<Grid x:Name="GdEllipse" Width="290" Height="290">
<Rectangle Width="1" Height="8" VerticalAlignment="Top"
Fill="White" HorizontalAlignment="Center"
RenderTransformOrigin="0.5,18.05">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="2.7"/>
<TranslateTransform X="-0.5"/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
<Grid x:Name="GdEllipse1" Width="306" Height="306">
<Rectangle Width="1" Height="16" VerticalAlignment="Top"
Fill="White" HorizontalAlignment="Center"
RenderTransformOrigin="0.5,9.53">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="0"/>
<TranslateTransform X="-0.5" Y="0"/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Width="1" Height="16" VerticalAlignment="Top"
Fill="White" HorizontalAlignment="Center"
RenderTransformOrigin="0.5,9.53">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="67.5"/>
<TranslateTransform X="-0.5" Y="0"/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Width="1" Height="16" VerticalAlignment="Top"
Fill="White" HorizontalAlignment="Center"
RenderTransformOrigin="0.5,9.53">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="135"/>
<TranslateTransform X="-0.5" Y="0"/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Width="1" Height="16" VerticalAlignment="Top"
Fill="White" HorizontalAlignment="Center"
RenderTransformOrigin="0.5,9.53">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-67.5"/>
<TranslateTransform X="-0.5" Y="0"/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Width="1" Height="16" VerticalAlignment="Top"
Fill="White" HorizontalAlignment="Center"
RenderTransformOrigin="0.5,9.53">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-135"/>
<TranslateTransform X="-0.5" Y="0"/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
<Grid Width="270" Height="270">
<TextBlock Text="50" HorizontalAlignment="Center" VerticalAlignment="Top"
Foreground="White" FontSize="8" Margin="5"/>
<TextBlock Text="75" HorizontalAlignment="Right" VerticalAlignment="Top"
Foreground="White" FontSize="8" Margin="0,80,16,0"/>
<TextBlock Text="100" HorizontalAlignment="Right" VerticalAlignment="Bottom"
Foreground="White" FontSize="8" Margin="0,0,41,46"/>
<TextBlock Text="0" HorizontalAlignment="Left" VerticalAlignment="Bottom"
Foreground="White" FontSize="8" Margin="42,0,0,42"/>
<TextBlock Text="25" HorizontalAlignment="Left" VerticalAlignment="Top"
Foreground="White" FontSize="8" Margin="14,82,0,0"/>
</Grid>
<Grid Opacity="0">
<Grid Width="370" Height="370" x:Name="ClipProxy">
<Grid Background="Transparent"></Grid>
<BlendCom:Arc Width="370" Height="370" StartAngle="-180"
EndAngle="{Binding Path=DegreeAngle}" Fill="White"
x:Name="ArcProxy" Stretch="None"
ArcThickness="175" >
</BlendCom:Arc>
</Grid>
</Grid>
<Grid>
<Border Width="370" Height="370" Background="Transparent">
<Border.OpacityMask>
<VisualBrush Visual="{Binding ElementName=ClipProxy}"/>
</Border.OpacityMask>
<BlendCom:Arc Width="370" Height="370" StartAngle="-135"
EndAngle="135" Stretch="None" ArcThickness="10">
<BlendCom:Arc.Fill>
<LinearGradientBrush EndPoint="1,1" StartPoint="0,1">
<GradientStop Color="#FF31FF10" Offset="0.01"/>
<GradientStop Color="#FF760F0F" Offset="1"/>
<GradientStop Color="#FFE6BF6B" Offset="0.22"/>
<GradientStop Color="#FFF7876E" Offset="0.444"/>
<GradientStop Color="#FFE22E21" Offset="0.702"/>
</LinearGradientBrush>
</BlendCom:Arc.Fill>
</BlendCom:Arc>
</Border>
<Path Stretch="Fill" Width="4" Height="95" VerticalAlignment="Top"
Margin="0,90,0,0" HorizontalAlignment="Center"
Fill="#FF109B3A" Data="M0,180 L2,184 L4,180 L2 0 v4 z"
RenderTransformOrigin="0.5,0.946">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="{Binding Path=DegreeAngle}"/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
<Path.Effect>
<DropShadowEffect Color="White" Opacity="0.5" ShadowDepth="0" BlurRadius="8"/>
</Path.Effect>
</Path>
<TextBlock x:Name="TbkValue" Text="0.0" Foreground="White" HorizontalAlignment="Center"
VerticalAlignment="Bottom" Margin="0,0,0,130"/>
</Grid>
</Grid>
</UserControl>
---------------------------------------------------------------------------------------------------------------
public partial class ClockSlave2View : UserControl
{
public double DegreeAngle
{
get { return (double)base.GetValue(DegreeAngleProperty); }
set { base.SetValue(DegreeAngleProperty, value); }
}
public static readonly DependencyProperty DegreeAngleProperty =
DependencyProperty.Register("DegreeAngle", typeof(double), typeof(ClockSlave2View),
new FrameworkPropertyMetadata(0d));
public ClockSlave2View()
{
InitializeComponent();
this.CreateNormalBorderMark();
this.DataContext = this;
this.Loaded += ClockSlave2View_Loaded;
this.Unloaded += ClockSlave2View_Unloaded;
}
private void ClockSlave2View_Unloaded(object sender, RoutedEventArgs e)
{
this.FreeSampleTimer();
}
private void ClockSlave2View_Loaded(object sender, RoutedEventArgs e)
{
this.CreateSampleTimer();
}
private void CreateNormalBorderMark()
{
this.GdEllipse.Children.Clear();
double dAngel = 270d / 100d;
for (int i = 1; i <= 100; i++)
{
if (i % 25 != 0)
{
Rectangle rect = new Rectangle();
rect.VerticalAlignment = VerticalAlignment.Top;
rect.HorizontalAlignment = HorizontalAlignment.Center;
rect.Fill = new SolidColorBrush(Colors.White);
rect.Width = 1;
rect.Height = 8;
rect.RenderTransformOrigin = new Point(0.5, 18.05);
TransformGroup transGroup = new TransformGroup();
RotateTransform rotate = new RotateTransform();
rotate.Angle = -135 + i * dAngel;
transGroup.Children.Add(rotate);
TranslateTransform translate = new TranslateTransform();
translate.X = -0.5;
transGroup.Children.Add(translate);
rect.RenderTransform = transGroup;
this.GdEllipse.Children.Add(rect);
}
}
}
private DispatcherTimer TimerSample;
private void CreateSampleTimer()
{
if(this.TimerSample == null)
{
this.TimerSample = new DispatcherTimer();
this.TimerSample.Tick += TimerSample_Tick;
this.TimerSample.Interval = TimeSpan.FromSeconds(1);
}
this.TimerSample.Start();
}
private void FreeSampleTimer()
{
if(this.TimerSample != null)
{
this.TimerSample.Stop();
this.TimerSample.Tick -= TimerSample_Tick;
}
this.TimerSample = null;
}
private void TimerSample_Tick(object sender, EventArgs e)
{
Random random = new Random();
int nData = random.Next(0, 100);
this.TbkValue.Text = nData + "";
double dAngle = -135d + 270d * nData / 100d;
DoubleAnimation anim = new DoubleAnimation(dAngle, TimeSpan.FromSeconds(0.3));
anim.EasingFunction = new ExponentialEase();
this.BeginAnimation(DegreeAngleProperty, anim);
}
}