WPF - 简单的UI框架
实现了一个简单的WPF应用程序UI框架 ,分享出来。界面效果图如下:
运行效果如下:
喜欢的可以下载源码参考:https://github.com/DuelWithSelf/WPFEffects
左侧分类导览按钮为自定义的CustomControl, 参照ListBox的模式。 为了偷懒,暂时未深度封装,先用StackPanel承载,先用上再说,效果还不错
<StackPanel x:Name="SpNavItems">
<CustomFrms:ListMenuBox Text="支持作者" IconData="{StaticResource PathData.Heart}"
Key="AboutMe"/>
<CustomFrms:ListMenuBox Text="组件" IconData="{StaticResource PathData.SettingsOutline}">
<CustomFrms:ListMenuItem Text="PathIcon" Key="PathData"/>
</CustomFrms:ListMenuBox>
<CustomFrms:ListMenuBox Text="效果" IconData="{StaticResource PathData.Creation}">
<CustomFrms:ListMenuItem Text="文字效果" Key="TextblockEffect"/>
</CustomFrms:ListMenuBox>
<CustomFrms:ListMenuBox Text="富媒体墙" IconData="{StaticResource PathData.Clover}">
<CustomFrms:ListMenuItem Text="弧形旋转" Key="Carousel"/>
<CustomFrms:ListMenuItem Text="弧形旋转3D" Key="Carousel3D"/>
<CustomFrms:ListMenuItem Text="线点动画" Key="AnimLine"/>
</CustomFrms:ListMenuBox>
<CustomFrms:ListMenuBox Text="图表" IconData="{StaticResource PathData.ChartScatterplotHexbin}">
<CustomFrms:ListMenuItem Text="柱状图" Key="HistogramChart"/>
<CustomFrms:ListMenuItem Text="饼状图" Key="PieChart"/>
<CustomFrms:ListMenuItem Text="弧形图" Key="RadianChart"/>
</CustomFrms:ListMenuBox>
<CustomFrms:ListMenuBox Text="图像处理" IconData="{StaticResource PathData.FileImageRegular}">
<CustomFrms:ListMenuItem Text="图片分隔" Key="ImgCoordinate"/>
</CustomFrms:ListMenuBox>
<CustomFrms:ListMenuBox Text="性能优化" IconData="{StaticResource PathData.BroomSolid}">
<CustomFrms:ListMenuItem Text="图片加载建议" Key="ImagePerformance"/>
<CustomFrms:ListMenuItem Text="图片加载反例" Key="ImagePerformance2"/>
</CustomFrms:ListMenuBox>
<CustomFrms:ListMenuBox Text="穿帮硬广" IconData="{StaticResource PathData.Bullhorn}"
Key="Advertise"/>
</StackPanel>
自定义的样式:
<Style TargetType="{x:Type CustomFrms:ListMenuBox}">
<Setter Property="IconWidth" Value="14"/>
<Setter Property="IconHeight" Value="14"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="NormalBrush" Value="{StaticResource ColorBrush.MiddleWhite}"/>
<Setter Property="FocusBrush" Value="White"/>
<Setter Property="BorderBrush" Value="White"/>
<Setter Property="FocusBackground" Value="{StaticResource ColorBrush.LightWhite}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CustomFrms:ListMenuBox}">
<Border x:Name="Part_BdrContainer" Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<Grid x:Name="Part_Header" Height="40" Background="Transparent" VerticalAlignment="Top">
<Path x:Name="Part_Icon" Margin="15,0,0,0"
Width="{Binding Path=IconWidth, RelativeSource={RelativeSource TemplatedParent}}"
Height="{Binding Path=IconHeight, RelativeSource={RelativeSource TemplatedParent}}"
Data="{Binding Path=IconData, RelativeSource={RelativeSource TemplatedParent}}"
Fill="{Binding Path=NormalBrush, RelativeSource={RelativeSource TemplatedParent}}"
Stretch="Fill" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<TextBlock x:Name="Part_Title" Padding="{Binding Path=TextPadding, RelativeSource={RelativeSource TemplatedParent}}"
FontSize="{Binding Path=FontSize, RelativeSource={RelativeSource TemplatedParent}}"
HorizontalAlignment="Left" VerticalAlignment="Center" Margin="50,0,0,0"
Foreground="{Binding Path=NormalBrush, RelativeSource={RelativeSource TemplatedParent}}"
Text="{Binding Path=Text, RelativeSource={RelativeSource TemplatedParent}}"/>
<Path x:Name="Part_Arrow" Data="M0,20 L10,10 L0,0 L0,1 L9,10 L0,19 L0,20 V20 H10 Z"
Width="6" Height="12" Stretch="Fill"
Fill="{Binding Path=NormalBrush, RelativeSource={RelativeSource TemplatedParent}}"
HorizontalAlignment="Right" Margin="0,0,15,0" VerticalAlignment="Center">
<Path.RenderTransform>
<TransformGroup>
<RotateTransform Angle="0"/>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Grid>
<StackPanel x:Name="Part_ItemsContainer" Margin="0,40,0,0" Height="0">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</StackPanel>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="True">
<Setter TargetName="Part_Icon" Property="Fill"
Value="{Binding Path=FocusBrush, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter TargetName="Part_Title" Property="Foreground"
Value="{Binding Path=FocusBrush, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter TargetName="Part_Arrow" Property="Fill"
Value="{Binding Path=FocusBrush, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter TargetName="Part_BdrContainer" Property="Background"
Value="{Binding Path=FocusBackground, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter TargetName="Part_BdrContainer" Property="BorderThickness"
Value="2,0,0,0"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Part_Icon" Property="Fill"
Value="{Binding Path=FocusBrush, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter TargetName="Part_Title" Property="Foreground"
Value="{Binding Path=FocusBrush, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter TargetName="Part_Arrow" Property="Fill"
Value="{Binding Path=FocusBrush, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter TargetName="Part_BdrContainer" Property="Background"
Value="{Binding Path=FocusBackground, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter TargetName="Part_BdrContainer" Property="BorderThickness"
Value="2,0,0,0"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
打算持续更新,将左侧面板所有功能模块全给实现了。比如已实现的:
WPF - 简单的UI框架的更多相关文章
- WPF - 简单的UI框架 - 仪表盘
源码链接:https://github.com/DuelWithSelf/WPFEffects 参考:https://www.cnblogs.com/duel/p/duel_clock.html 更新 ...
- 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 似乎作为一种饱受批 ...
- 浅谈WPF中的MVVM框架--MVVMFoundation
先科普一下:什么是WPF,请看下图 微软对于WPF技术的构想是很宏大的,可惜普及率不高,不过如果你要做Windows客户端开发的话WPF技术还是值得一学的. 什么是MVVM模式 简单来说它是一种高级的 ...
随机推荐
- 用python画出全球疫情趋势变化图
前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:谦睿科技 PS:如有需要Python学习资料的小伙伴可以加点击下方链接 ...
- F - Distinct Numbers
链接:https://atcoder.jp/contests/abc143/tasks/abc143_f 题解:开两个数组,其中一个arr用来保存每个元素出现的次数,同时再开一个数组crr用来保存出现 ...
- Python函数的返回值和作用域
函数的返回值和作用域 1.返回值 def guess(x): if x > 3: return "> 3" else: retu ...
- 负载均衡服务之HAProxy基础配置(一)
前文我们聊了下haproxy的基础安装,以及怎样去代理后端主机的配置:当然没有很详细的去说配置文件中各指令的意思:有关haproxy的安装和代理后端server可以参考本人博客https://www. ...
- (一)微信小程序:实现引导页
基本目录结构 index目录下文件操作步骤 1.针对index.wxml <!--index.wxml--> <view class="index-container&qu ...
- linq深入
一.匿名类:[ C# 3.0/.NET 3.x 新增特性 ] 1.1 不好意思,我匿了 在开发中,我们有时会像下面的代码一样声明一个匿名类:可以看出,在匿名类的语法中并没有为其命名,而是直接的一个ne ...
- 权威的国际敏捷认证Certified Scrum Master (CSM)
权威的国际敏捷认证Certified Scrum Master (CSM) A. 认证前 在学习Certified Scrum Master (CSM)之前,你需要了解: 什么是CSM CSM认证与其 ...
- 关于go的通信通道channel——chan的一些问题
go版本 1.8 chan类型的声明,有以下几种: var c chan int c := make(chan int) //slice.map.chan都可以通过用make来初始化,其中map.ch ...
- 三本毕业(非科班),四次阿里巴巴面试,终拿 offer(大厂面经)
作者:gauseen 原文:https://github.com/gauseen/blog 公众号:「学前端」,只搞技术不搞广告文,欢迎关注~ 第一次 20:00 电话一面 - 自我介绍 - 对公司工 ...
- 前端开发--ajax
使用ajax,他是有两个模块的,一个是客户端,一个是服务端. 客户端负责发送数据,发送数据的方式有两种,一种是GET,另一种是POST. 服务端是用来接收,处理数据和发送请求的数据. 要想使用ajax ...