WPF仿网易云音乐系列(一、左侧菜单栏:Expander+RadioButton)
1.简介
上一篇咱们说到,网易云音乐的左侧菜单栏可以通过Expander+RadioButton来实现,具体如何实现,咱们下面开始干;
首先来一张网易云音乐PC版原图(个人觉得PC版比UWP版左侧菜单好看点):
然后当然是再上以下咱们做出的效果图了:
还原度百分之百有没有。。。
2.上硬菜
首先是无边框窗口方案,这里使用的是DMSkin for WPF,Github地址:https://github.com/944095635/DMSkin-for-WPF
Expander
1 <ControlTemplate x:Key="ExpanderToggleButton" TargetType="ToggleButton"> 2 <Border Name="Border" CornerRadius="2,0,0,0" Background="Transparent" BorderThickness="0,0,1,0"> 3 <Image Name="image" Source="/CloudMusic;component/Images/tabitems/down_normal.png" /> 4 </Border> 5 <ControlTemplate.Triggers> 6 <Trigger Property="IsChecked" Value="true"> 7 <Setter TargetName="image" Property="Source" Value="/CloudMusic;component/Images/tabitems/up_normal.png" /> 8 </Trigger> 9 <Trigger Property="IsChecked" Value="false"> 10 <Setter TargetName="image" Property="Source" Value="/CloudMusic;component/Images/tabitems/down_normal.png" /> 11 </Trigger> 12 <MultiTrigger> 13 <MultiTrigger.Conditions> 14 <Condition Property="IsChecked" Value="true" /> 15 <Condition Property="IsMouseOver" Value="true" /> 16 </MultiTrigger.Conditions> 17 <Setter TargetName="image" Property="Source" Value="/CloudMusic;component/Images/tabitems/up_hover.png" /> 18 </MultiTrigger> 19 <MultiTrigger> 20 <MultiTrigger.Conditions> 21 <Condition Property="IsChecked" Value="false" /> 22 <Condition Property="IsMouseOver" Value="true" /> 23 </MultiTrigger.Conditions> 24 <Setter TargetName="image" Property="Source" Value="/CloudMusic;component/Images/tabitems/down_hover.png" /> 25 </MultiTrigger> 26 </ControlTemplate.Triggers> 27 </ControlTemplate> 28 <Style TargetType="Expander"> 29 <Setter Property="Template"> 30 <Setter.Value> 31 <ControlTemplate TargetType="Expander"> 32 <Grid> 33 <Grid.RowDefinitions> 34 <RowDefinition Height="auto" /> 35 <RowDefinition Name="ContentRow" Height="0" /> 36 </Grid.RowDefinitions> 37 <Border Name="Border" Grid.Row="0" BorderThickness="1" CornerRadius="2,2,0,0"> 38 <Grid Width="140" HorizontalAlignment="Left"> 39 <Grid.ColumnDefinitions> 40 <ColumnDefinition Width="*" /> 41 <ColumnDefinition Width="20" /> 42 </Grid.ColumnDefinitions> 43 <ToggleButton IsChecked="{Binding Path=IsExpanded,Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" 44 OverridesDefaultStyle="True" Template="{StaticResource ExpanderToggleButton}" Grid.Column="1" > 45 46 </ToggleButton> 47 <ContentPresenter Grid.Column="0" Margin="4" ContentSource="Header" RecognizesAccessKey="True" /> 48 </Grid> 49 </Border> 50 <Border Name="Content" Grid.Row="1" CornerRadius="0,0,2,2"> 51 <ContentPresenter /> 52 </Border> 53 54 </Grid> 55 <ControlTemplate.Triggers> 56 <Trigger Property="IsExpanded" Value="True"> 57 <Setter TargetName="ContentRow" Property="Height" Value="{Binding ElementName=Content,Path=DesiredHeight}" /> 58 </Trigger> 59 </ControlTemplate.Triggers> 60 </ControlTemplate> 61 </Setter.Value> 62 </Setter> 63 </Style>
View Code
RadioButton
1 <Style x:Key="McRadioButton" TargetType="RadioButton" > 2 <Setter Property="FontSize" Value="12"></Setter> 3 <Setter Property="Height" Value="25"></Setter> 4 <Setter Property="Foreground" Value="#444"></Setter> 5 <Setter Property="Template" > 6 <Setter.Value> 7 <ControlTemplate TargetType="{x:Type RadioButton}"> 8 <Grid x:Name="back" Background="Transparent" > 9 <Grid.ColumnDefinitions> 10 <ColumnDefinition Width="3"></ColumnDefinition> 11 <ColumnDefinition Width="auto"></ColumnDefinition> 12 <ColumnDefinition Width="5"></ColumnDefinition> 13 <ColumnDefinition Width="*"></ColumnDefinition> 14 <ColumnDefinition Width="10"></ColumnDefinition> 15 </Grid.ColumnDefinitions> 16 <Border x:Name="x1" Width="3" Background="{StaticResource MainColor}" Visibility="Collapsed" Grid.Column="0"> 17 </Border> 18 <Border Grid.Column="1" Visibility="{Binding IsPlayVisibility}" Margin="10,0,10,0"> 19 <TextBlock HorizontalAlignment="Left" 20 FontSize="14" FontFamily="/CloudMusic;component/Resources/#SF2015" 21 Text="{TemplateBinding Tag}" Foreground="{DynamicResource DMMainColor}" 22 VerticalAlignment="Center" ></TextBlock> 23 </Border> 24 <Border Grid.Column="3" x:Name="x"> 25 <TextBlock x:Name="Content" Text="{TemplateBinding Content}" 26 HorizontalAlignment="Left" VerticalAlignment="Center" ></TextBlock> 27 </Border> 28 </Grid> 29 <ControlTemplate.Triggers> 30 <Trigger Property="IsMouseOver" Value="true" > 31 <Setter Property="Background" TargetName="back" Value="#FFF5F5F7"></Setter> 32 </Trigger> 33 <Trigger Property="IsChecked" Value="true"> 34 <Setter Property="Visibility" TargetName="x1" Value="Visible"></Setter> 35 <Setter Property="BorderThickness" TargetName="x1" Value="0"></Setter> 36 <Setter Property="Foreground" TargetName="Content" Value="#FF333333"></Setter> 37 <Setter Property="Background" TargetName="back" Value="#FFE3E3E5"></Setter> 38 </Trigger> 39 </ControlTemplate.Triggers> 40 </ControlTemplate> 41 </Setter.Value> 42 </Setter> 43 </Style>
View Code
以上就是Expander+RadioButton的核心代码了;其中用到的图标可以到阿里的iconfont去找;
另外,Expander旁边的小箭头,网易云是没有的,这里我个人觉得加上要好一些,这个可以看个人需求删除或者保留
转载于:https://www.cnblogs.com/lonelyxmas/p/10635799.html
WPF仿网易云音乐系列(一、左侧菜单栏:Expander+RadioButton)相关推荐
- WPF仿网易云音乐系列(序)
1.简介 由于之前做了一个播放器,苦于不懂界面设计,只得去借鉴借鉴一些成功的作品,网易云音乐就甚合朕心,哈哈,最后做出来的效果如下: 本系列文章就来和大家讨论以下,如何用WPF去仿制一个网易云音乐来: ...
- WPF仿网易云音乐系列(二、歌单创建窗口+登录设置模块)
老衲牺牲午休时间写博客,都快把自己感动了,-_-!! 之前上一篇随笔,我看了下评论,有部分人说WPF已经凉凉了,这个我觉得,这只是一个达到自己目的的工具而已,只要自己能用这个工具,得心应手的做出自己想 ...
- 仿网易云音乐的滑动冲突处理效果
系列文章 此功能属于仿网易云音乐App的一部分 仿网易云音乐App(基础版) 实现网易云音乐的渐进式卡片切换 Flutter 自定义View--仿同花顺自选股列表 Flutter自定义View--仿高 ...
- 仿网易云音乐播放列表、皮肤样式、歌词滚动、轮播图等
前言: 今天是我第二次写博客,打算把以前做过的一些小东西记录下来,今天介绍的是我的毕业设计<小罡音乐>是简仿网易云播放器的一些界面和播放音乐功能. 是基于ASP.NET的小罡音乐的设计与实 ...
- Flutter 仿网易云音乐App
图 首页 歌曲播放和卡片切换 如正版一样,歌曲播放进度在播放/暂停 按钮的边框显示(页面下方,由黑变红) 没登录的话,一般只能听12秒 目前只做了 模块('超带感的说唱精选')的点播功能, 其他地方可 ...
- Android 仿网易云音乐App
因为工作实在是有点忙,所以还没完成成品,就先挂到GitHub上.日后慢慢更新啦. 项目地址 GitHub地址,希望大佬们点个star GitHub仿网易云音乐App 效果展示 注:因为视频太模糊,每日 ...
- Vue3.0 + typescript 高仿网易云音乐 WebApp
Vue3.0 + typescript 高仿网易云音乐 WebApp 前言 Vue3.0 的正式发布,让我心动不已,于是尝试用 vue3 实现一个完整的项目,整个项目全部使用了 composition ...
- 微信小程序仿网易云音乐(使用云开发,提供源码)
微信小程序仿网易云音乐(使用云开发,提供源码)!!!!!!!!!!! 源码: 链接:https://pan.baidu.com/s/1z_ZnRVbT4vjEENimi8yBQQ 提取码:u0o3 一 ...
- android 仿网易标签切换,高仿网易云音乐客户端的Home页面切换Tabhost-IT蓝豹
1.高仿网易云音乐客户端的Home页面切换Tabhost 高仿网易云音乐客户端的Home页面切换Tabhost,并且三角形是透明的, 实现方式,自定义AnimTabsView继承 RelativeLa ...
最新文章
- Windows DDK介绍,选择和安装
- 管理者如何打造一个有执行力的团队?
- PCB 内网实现《OCR文字识别》实现逻辑
- java中解密的思想_北大青鸟翔天解密,Java核心思想两大点
- 北妈每日一题:如何拿到 金条、蛋糕和大钻石
- ospf避免环路_路由环路知识点总结!
- Linux字符设备与块设备的区别
- 当程序员,你应该懂的法则
- 终日奔波只为饥,方才一饱便思衣
- 京东大数据技术白皮书
- java sql 结果_Java 获取SQL查询语句结果
- 贵州大学计算机学院研究生成绩查询,贵州大学计算机科学与技术学院2008年硕士研究生初试、复试总成绩一览表...
- AppCompatActivity设置透明背景
- 微信小程序动态生成二维码
- Python|线程和进程|阻塞|非阻塞|同步|异步|生成器和协程|资源竞争|进程间通信|aiohttp库|daemon属性值详解|语言基础50课:学习(11)
- python SQL语句 占位符
- 12款免费图标生成器
- mysql之类型转换函数
- 使用Ajax实现百度下拉框
- lin通信ldf文件解析_LIN通讯机制
热门文章
- 从0到1分步实现一个出生日期的正则表达式(JavaScript)
- oracle xe 数据库用户操作
- HDSF主要节点解说(二)工作原理
- Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' (2)
- 时区的概念定义和发展史
- 学习日志---矩阵表示及特殊矩阵压缩
- 【原创】构建高性能ASP.NET站点 第五章—性能调优综述(后篇)
- go json数据出现unicode_Golang处理JSON(一) 序列化
- CentOS 7本地镜像部署NFS服务
- php 给html 赋值,PHP+JavaScript+HTML变量之间赋值及传递