当前位置: 首页 > news >正文

WPF前端:一个纯Xaml的水平导航栏

效果图:

代码:

1、样式代码,可以写在窗体资源处或者样式资源文件中

 <Style x:Key="MenuRadioButtonStyle" TargetType="{x:Type RadioButton}"><Setter Property="FontSize" Value="16" /><Setter Property="Width" Value="100" /><Setter Property="Height" Value="40" /><!--<Setter Property="Foreground" Value="#333333" />--><Setter Property="Foreground"><Setter.Value><SolidColorBrush Color="#333333" /></Setter.Value></Setter><Setter Property="VerticalAlignment" Value="Center" /><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type RadioButton}"><Grid><Borderx:Name="bd"Margin="5,0,5,0"Background="#00FFFFFF"CornerRadius="20" /><ContentPresenterMargin="0,0,0,0"HorizontalAlignment="Center"VerticalAlignment="Center" /></Grid><ControlTemplate.Triggers><MultiTrigger><MultiTrigger.Conditions><Condition Property="IsMouseOver" Value="True" /><Condition Property="IsChecked" Value="False" /></MultiTrigger.Conditions><MultiTrigger.Setters><Setter TargetName="bd" Property="Background" Value="#AACCE8FF" /></MultiTrigger.Setters></MultiTrigger><Trigger Property="IsChecked" Value="True"><Trigger.EnterActions><BeginStoryboard><Storyboard><ColorAnimationStoryboard.TargetProperty="(RadioButton.Foreground).(SolidColorBrush.Color)"To="White"Duration="0:0:.2" /></Storyboard></BeginStoryboard></Trigger.EnterActions><Trigger.ExitActions><BeginStoryboard><Storyboard><ColorAnimationStoryboard.TargetProperty="(RadioButton.Foreground).(SolidColorBrush.Color)"To="#333333"Duration="0:0:.2" /></Storyboard></BeginStoryboard></Trigger.ExitActions></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style><Style x:Key="MenuSliderStyle" TargetType="Border"><Setter Property="Width" Value="100"/><Setter Property="Height" Value="40"/><Setter Property="Margin" Value="100,0,0,0"/><Setter Property="HorizontalAlignment" Value="Left"/><Setter Property="Background" Value="#14B9FF"/><Setter Property="CornerRadius" Value="20"/></Style>

2、在要使用的页面中

 <BorderWidth="500"Height="50"VerticalAlignment="Top"Background="#AAFFFFFF"CornerRadius="20"><Grid><Borderx:Name="menuBorder"Style="{StaticResource MenuSliderStyle}"><Border.RenderTransform><TranslateTransform x:Name="Move" X="0" /></Border.RenderTransform></Border><Grid HorizontalAlignment="Center"><Grid.ColumnDefinitions><ColumnDefinition /><ColumnDefinition /><ColumnDefinition /></Grid.ColumnDefinitions><RadioButtonx:Name="homeRB"Content="Home"IsChecked="True"Style="{StaticResource MenuRadioButtonStyle}"><RadioButton.Triggers><EventTrigger RoutedEvent="ToggleButton.Checked"><BeginStoryboard ><Storyboard><DoubleAnimationStoryboard.TargetName="menuBorder"Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"To="0"Duration="0:0:.2" /></Storyboard></BeginStoryboard></EventTrigger></RadioButton.Triggers></RadioButton><RadioButtonx:Name="settingsRB"Grid.Column="1"Content="Settings"Style="{StaticResource MenuRadioButtonStyle}"><RadioButton.Triggers><EventTrigger RoutedEvent="ToggleButton.Checked"><BeginStoryboard><Storyboard><DoubleAnimationStoryboard.TargetName="menuBorder"Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"To="100"Duration="0:0:.2" /></Storyboard></BeginStoryboard></EventTrigger></RadioButton.Triggers></RadioButton><RadioButtonx:Name="LogRB"Grid.Column="2"Content="Logs"Style="{StaticResource MenuRadioButtonStyle}"><RadioButton.Triggers><EventTrigger RoutedEvent="ToggleButton.Checked"><BeginStoryboard><Storyboard><DoubleAnimationStoryboard.TargetName="menuBorder"Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"To="200"Duration="0:0:.2" /></Storyboard></BeginStoryboard></EventTrigger></RadioButton.Triggers></RadioButton></Grid></Grid></Border>

3、RadioButton就是每个功能按钮,配合Prism框架的导航功能使用,就可以在各个页面之间切换了。

如果需要增加按钮数量,需要进行如下操作:

1、在Grid.ColumnDefinitions中,有几个按钮就加到几列,这里是三个按钮,所以是三列。

2、修改最外层的Border的宽度,每一个按钮是100的宽度,然后再加上200,就是最后的宽度。

这里三个按钮,是3×100+200=500的宽度。

3、按照前面的格式,增加RadioButton,RadioButton就是每个功能按钮,并且修改以下几个属性

(1)Grid.Column 从0开始,每个递增1,即第一个RadioButton的Grid.Column是0,第二个是1,以此类推。

(2)Content 是按钮上面显示的文本。

(3)To 从0开始,每个递增100,即第一个RadioButton的 To 是0,第二个是100,以此类推。

最后效果:

如果加上缓动动画,效果会更自然,可以自行添加缓动效果。

相关文章:

WPF前端:一个纯Xaml的水平导航栏

效果图&#xff1a; 代码&#xff1a; 1、样式代码&#xff0c;可以写在窗体资源处或者样式资源文件中 <Style x:Key"MenuRadioButtonStyle" TargetType"{x:Type RadioButton}"><Setter Property"FontSize" Value"16" />…...

谷粒商城实战(033 业务-秒杀功能4-高并发问题解决方案sentinel 1)

Java项目《谷粒商城》架构师级Java项目实战&#xff0c;对标阿里P6-P7&#xff0c;全网最强 总时长 104:45:00 共408P 此文章包含第326p-第p331的内容 关注的问题 sentinel&#xff08;哨兵&#xff09; sentinel来实现熔断、降级、限流等操作 腾讯开源的tendis&#xff0c…...

STM32项目分享:智能家居(机智云)系统

目录 一、前言 二、项目简介 1.功能详解 2.主要器件 三、原理图设计 四、PCB硬件设计 1.PCB图 2.PCB板及元器件图 五、程序设计 六、实验效果 七、资料内容 项目分享 一、前言 项目成品图片&#xff1a; 哔哩哔哩视频链接&#xff1a; https://www.bilibili.c…...

游戏盾之应用加速,何为应用加速

在数字化时代&#xff0c;用户对于应用程序的防护要求以及速度和性能要求越来越高。为了满足用户的期望并提高业务效率&#xff0c;应用加速成为了不可忽视的关键。 应用加速是新一代的智能分布式云接入系统&#xff0c;采用创新级SD-WAN跨域技术&#xff0c;针对高防机房痛点进…...

Java 基础面试题

文章目录 重载与重写抽象类与接口面向对象a a b 与 a b 的区别final、finalize、finallyString、StringBuild、StringBuffer位运算反射 重载与重写 重载&#xff1a;是在同一个类中&#xff0c;方法名相同&#xff0c;方法参数类型&#xff0c;个数不同&#xff0c;返回类型…...

Nginx 1.26.0 爆 HTTP/3 QUIC 漏洞,建议升级更新到 1.27.0

据悉&#xff0c;Nginx 1.25.0-1.26.0 主线版本中涉及四个与 NGINX HTTP/3 QUIC 模块相关的中级数据面 CVE 漏洞&#xff0c;其中三个为 DoS 攻击类型风险&#xff0c;一个为随机信息泄漏风险&#xff0c;影响皆为允许未经身份认证的用户通过构造请求实施攻击。目前已经紧急发布…...

uniadmin引入iconfont报错

当在uniadmin中引入iconfont后&#xff0c;出现错误&#xff1a; [plugin:vite:css] [postcss] Cannot find module ‘E:/UniAdmin/uniAdmin/static/fonts/iconfont.woff2?t1673083050786’ from ‘E:\UniAdmin\uniAdmin\static\fonts\iconfont.css’ 这是需要更改为绝对路径…...

Vue3【三】 使用TS自己编写APP组件

Vue3【三】 使用TS自己编写APP组件 运行截图 目录结构 注意目录层级 文件源码 APP.vue <template><div class"app"><h1>你好世界!</h1></div> </template><script lang"ts"> export default {name:App //组…...

数字IC后端物理验证PV | TSMC 12nm Calibre Base Layer DRC案例解析

基于TSMC 12nm ARM A55 upf flow后端设计实现训练营将于6月中旬正式开班&#xff01;小班教学&#xff01;目前还有3个名额&#xff0c;招满为止&#xff01;有需要可以私信小编 ic-backend2018报名。吾爱IC社区所有训练营课程均为直播课&#xff01; 这个课程支持升级成双核A…...

Echarts 在指定部分做文字标记

文章目录 需求分析1. demo1样式调整2. demo22. demo3 定位解决需求 实现在Echarts的折线图中,相同Y值的两点之间显示’abc’ 分析 1. demo1 使用 ECharts 的 markLine 功能来在相邻两个点之间添加标记。其中,我们通过设置标记的 yAxis 和 label 来控制标记的位置和显示内…...

如何发布自己的npm插件包

随着JavaScript在前端和后端的广泛应用,npm(Node Package Manager)已成为JavaScript开发者不可或缺的工具之一。通过npm,开发者可以轻松共享和使用各种功能模块,极大地提高了开发效率。那么,如何将自己开发的功能模块发布为npm插件包,与全球的开发者共享呢?本文将进行全…...

AI和机器人引领新一轮农业革命

AI和机器人技术在农业领域的应用正在迅速发展&#xff0c;未来它们可能会实现厘米级精度的自主耕作。 精确种植&#xff1a;AI算法可以分析土壤条件、气候数据和作物生长周期&#xff0c;以决定最佳种植地点和时间。 土壤管理&#xff1a;利用传感器和机器学习&#xff0c;机器…...

【Kubernetes】三证集齐 Kubernetes实现资源超卖(附镜像包)

目录 插叙前言一、思考和原理二、实现步骤0. 资料包1. TLS证书签发2. 使用 certmanager 生成签发证书3. 获取secret的内容 并替换CA_BUNDLE4.部署svc deploy 三、测试验证1. 观察pod情况2. 给node 打上不需要超售的标签【可以让master节点资源不超卖】3. 资源实现超卖4. 删除还…...

国产Sora免费体验-快手旗下可灵大模型发布

自从OpenAI公布了Sora后&#xff0c;震爆了全世界&#xff0c;但由于其技术的不成熟和应用的局限性&#xff0c;未能大规模推广&#xff0c;只有零零散散的几个公布出来的一些视频。昨日&#xff0c;快手成立13周年&#xff0c;可灵&#xff08;Kling&#xff09;大模型发布&am…...

linux嵌入式设备测试wifi信号强度方法

首先我们要清楚设备具体链接在哪个wifi热点上 执行&#xff1a;nmcli dev wifi list rootubuntu:/home/ubuntu# nmcli dev wifi list IN-USE BSSID SSID MODE CHAN RATE SIGNAL BARS > * 14:EB:08:51:7D:20 wifi22222_5G Infr…...

【名词解释】Unity的Inputfield组件及其使用示例

Unity的InputField组件是一个UI元素&#xff0c;它允许用户在游戏或应用程序中输入文本。InputField通常用于创建表单、登录界面或任何需要用户输入文本的场景。它提供了多种功能&#xff0c;比如文本验证、占位符显示、输入限制等。 功能特点&#xff1a; 文本输入&#xff…...

Android 安装调试 TelephonyProvider不生效

直接安装TelephonyProvider的时候&#xff0c;&#xff08;没有重启&#xff09;发现数据库没有生效。 猜测应该是原本的数据库没有删除后重建更新。 解决方法&#xff1a;杀掉phone进程 adb shell am force-stop com.android.phone 查看device进程 adb shell ps | grep <…...

【C++】STL中List的基本功能的模拟实现

前言&#xff1a;在前面学习了STL中list的使用方法&#xff0c;现在我们就进一步的讲解List的一些基本功能的模拟实现&#xff0c;这一讲博主认为是最近比较难的一个地方&#xff0c;各位一起加油。 &#x1f496; 博主CSDN主页:卫卫卫的个人主页 &#x1f49e; &#x1f449; …...

C语言基础——函数

ʕ • ᴥ • ʔ づ♡ど &#x1f389; 欢迎点赞支持&#x1f389; 个人主页&#xff1a;励志不掉头发的内向程序员&#xff1b; 专栏主页&#xff1a;C语言基础&#xff1b; 文章目录 前言 一、函数的概念 二、库函数 2.1 库函数和头文件 2.2 库函数的使用/…...

《精通ChatGPT:从入门到大师的Prompt指南》第1章:认识ChatGPT

第1章&#xff1a;认识ChatGPT 1.1 ChatGPT是什么 ChatGPT&#xff0c;全称为Chat Generative Pre-trained Transformer&#xff0c;是由OpenAI开发的一种先进的自然语言处理模型。它利用了深度学习中的一种技术——Transformer架构&#xff0c;来生成类人文本。ChatGPT通过对…...

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文&#xff1f; 多租户隔离&#xff1a;自动为接入设备追加租户前缀&#xff0c;后端按 ClientID 拆分队列。零代码鉴权&#xff1a;将入站用户名替换为 OAuth Access-Token&#xff0c;后端 Broker 统一校验。灰度发布&#xff1a;根据 IP/地理位写…...

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...

跨链模式:多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

AI病理诊断七剑下天山,医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...