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

<BlendCom:Arc Width="340" Height="340" StartAngle="-136"

EndAngle="136" Stretch="None" ArcThickness="60">

<BlendCom:Arc.Fill>

</LinearGradientBrush>

</BlendCom:Arc.Fill>

</BlendCom:Arc>

<Rectangle Width="1" Height="8" VerticalAlignment="Top"

Fill="White" HorizontalAlignment="Center"

RenderTransformOrigin="0.5,18.05">

<Rectangle.RenderTransform>

</TransformGroup>

</Rectangle.RenderTransform>

</Rectangle>

</Grid>

<Rectangle Width="1" Height="16" VerticalAlignment="Top"

Fill="White" HorizontalAlignment="Center"

RenderTransformOrigin="0.5,9.53">

<Rectangle.RenderTransform>

</TransformGroup>

</Rectangle.RenderTransform>

</Rectangle>

<Rectangle Width="1" Height="16" VerticalAlignment="Top"

Fill="White" HorizontalAlignment="Center"

RenderTransformOrigin="0.5,9.53">

<Rectangle.RenderTransform>

</TransformGroup>

</Rectangle.RenderTransform>

</Rectangle>

<Rectangle Width="1" Height="16" VerticalAlignment="Top"

Fill="White" HorizontalAlignment="Center"

RenderTransformOrigin="0.5,9.53">

<Rectangle.RenderTransform>

</TransformGroup>

</Rectangle.RenderTransform>

</Rectangle>

<Rectangle Width="1" Height="16" VerticalAlignment="Top"

Fill="White" HorizontalAlignment="Center"

RenderTransformOrigin="0.5,9.53">

<Rectangle.RenderTransform>

</TransformGroup>

</Rectangle.RenderTransform>

</Rectangle>

<Rectangle Width="1" Height="16" VerticalAlignment="Top"

Fill="White" HorizontalAlignment="Center"

RenderTransformOrigin="0.5,9.53">

<Rectangle.RenderTransform>

</TransformGroup>

</Rectangle.RenderTransform>

</Rectangle>

</Grid>

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

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

<Border.OpacityMask>

</Border.OpacityMask>

<BlendCom:Arc Width="370" Height="370" StartAngle="-135"

EndAngle="135" Stretch="None" ArcThickness="10">

<BlendCom:Arc.Fill>

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

</Path.RenderTransform>

<Path.Effect>

</Path.Effect>

</Path>

<TextBlock x:Name="TbkValue" Text="0.0" Foreground="White" HorizontalAlignment="Center"

VerticalAlignment="Bottom" Margin="0,0,0,130"/>

</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);

}

WPF - 简单的UI框架 - 仪表盘的更多相关文章

WPF - 简单的UI框架
实现了一个简单的WPF应用程序UI框架 ,分享出来.界面效果图如下: 运行效果如下: 喜欢的可以下载源码参考:https://github.com/DuelWithSelf/WPFEffects 左侧 ...
laya fgui 超简单的UI框架
FairyGUI 超简单的UI框架 Laya使用fgui的超简单UI框架使用场景:用于使用fgui进行layaUI开发的程序人员整个框架分为3个模块,共有4个类: FGUIManager :FGU ...
【设计和开发一套简单自己主动化UI框架】
!有兴趣的朋友请直接移步Github,本帖子已经不做更新,框架的详细的实现已经做了优化和代码整理,本文仅仅介绍了详细的设计思路! 目标:编写一个简单通用UI框架用于管理页面和完毕导航跳转终于的实现效 ...
【转】发布一个基于NGUI编写的UI框架
发布一个基于NGUI编写的UI框架 1.加载,显示,隐藏,关闭页面,根据标示获得相应界面实例 2.提供界面显示隐藏动画接口 3.单独界面层级,Collider,背景管理 4.根据存储的导航信息完成界面 ...
造轮子，模仿WPF的UI框架，还没完善。。。
Wtf(暂时命名,随便起的 = _=),模仿WPF的框架,还没有完善,只有简单的基础元素,支持数据绑定.虽然支持mono但是mono有bug 写这个只是兴趣爱好,感觉也没多大意义了,如果这个UI框架完 ...
WPF简单导航框架（Window与Page互相调用）
相当多的WPF程序都有着丰富的页面和功能,如何使程序在不同页面间转换并降低资源占用,选择适合自己的导航框架就很重要了.最近花了一点时间做了一个简单的导航框架,并在这个过程中对Window.Page.U ...
(转载)基于Unity~UGUI的简单UI框架（附UIFramework源码）
此博客跟随siki老师的课程笔记生成,感谢siki老师的辛勤付出! 此框架功能较简单,适用于学习,可以很好的锻炼我们的设计思想框架源码地址: UIFramework litjson.dll下载地址: ...
关于几种UI框架简单总结
最近两年多的时间先后做过几款终端程序,UI框架从MFC转向过WxWidgets,之后再转向Qt.三种框架精通远谈不上,用起来还是没什么问题. 简单聊聊三种框架的优缺点. 1.MFC 似乎作为一种饱受批 ...
免费UI框架推荐--Charisma UI
基于Jquery.Bootstrap的后台管理免费UI框架推荐--Charisma UI 在项目设计和开发工作中,做过一些后台管理系统的设计和开发,用的很多都是比较传统的UI框架. 老是走在这个圈子里 ...

随机推荐

Git submodule 拉取子模块
$ git clone https://code.Xcode.com.client.git Cloning into 'vipkid-pc-client'... Username for 'https ...
Tuleap administration 管理员页面中项目的配置页面
1) 进入Administration界面,点击[Browse All] 2) 所有的项目会在项目页面中展示出来 3)在Details后面点击按钮,选择 [go to project administ ...
CTF-Decrypt-the-Message-writeup
Decrypt-the-Message 题目信息: 解密这段信息! 附件: The life that I have Is all that I have And the life that I ha ...
python从图片中找图
import aircv as ac def matcha(bb,aa):#从bb查找aa,如果有则返回其坐标位置 yuan=ac.imread(bb) mubi=ac.imread(aa) resu ...
python mysql类
import pymysql class MysqlHelper(object): conn = None def __init__(self, host, username, password, d ...
Spring中定时任务@Scheduled的一点小小研究
最近做一个公众号项目,微信公众号会要求服务端找微信请求一个access_token,获取的过程: access_token是公众号的全局唯一接口调用凭据,公众号调用各接口时都需使用access_tok ...
React 组件间通信总结
组件间通信 5.1.1. 方式一: 通过props传递 1) 共同的数据放在父组件上, 特有的数据放在自己组件内部(state) 2) 通过props可以传递一般数据和 ...
常用js代码积累
1,js判断进入可视区,参考(亲测不行):https://www.cnblogs.com/Marydon20170307/p/8830069.html 重点学习的话,可参考: js计算元素距离顶部的高 ...
POJ1944
poj1944 一道我不会做的贪心题. (思维才是OI的重点) 但是if您也不会,那就来听我瞎扯吧. 首先,这个图是一个圈,只能连接邻点,使所有求的点联通. 我们先不考虑环,那么就可以想出一个假的做法 ...
深入刨析tomcat 之---第1篇,解决第1,2章bug 页面不显示内容Hello. Roses are red.
writedby 张艳涛, 第一个问题是不显示index.html网页 19年才开始学java的第二个月,就开始第一遍看这本书,我估计当初,做第一章的一个案例,自己写代码,和验证就得一天吧,当初就发现 ...

WPF - 简单的UI框架 - 仪表盘

WPF - 简单的UI框架 - 仪表盘的更多相关文章

随机推荐

热门专题