WPF利用Path自定义画头部导航条(TOP)样式

1;新建两个多值转换器，都有用处，用来动态确定PATH的X,Y州坐标的。

EndPointConverter 该转换器主要用来动态确定X轴，和Y轴。用于画线条的。

internal class EndPointConverter : IMultiValueConverter
{public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture){double X = (double)values[0];//第一个值我这为上一个点X轴，可根据自己需要修改double C= double.Parse(parameter.ToString());//参数传差值，当前点的X轴与上一个点的X轴相差多少，double Y = 0;//默认0if (values.Length == 2){Point StartPoint = (Point)values[1];//线条开始坐标共用Y轴Y = StartPoint.Y;}return new Point(X-C, Y);}public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture){throw new NotImplementedException();}
}

PointConverter 主要用来动态确定X轴，和Y轴。但当前Y轴是上一个点的X轴。用于闭合图形填充颜色的Path类型。

public class PointConverter : IMultiValueConverter
{public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture){double X = (double)values[0];double C = double.Parse(parameter.ToString());//参数传差值double Y = 0;//默认0if (values.Length == 2){Point StartPoint = (Point)values[1];//线条开始坐标共用X轴作为Y轴Y = StartPoint.X;//下一个点的Y轴变为上个点的X轴，主要用来画闭合Path的}return new Point(X - C, Y);}public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture){throw new NotImplementedException();}
}

2;在写XML之前请在XMAL页面引入两个多值转换器(可根据自己需求自定义值类型和参数类型):

 <Window ....自己定义的其他内容....xmlns:converters="clr-namespace:你的转换器所在路径"......自己定义的其他内容.......><Window.Resources>//也可放置在App.XMAL下全局使用<converters:EndPointConverter x:Key="EndPointConverter" /><converters:PointConverter x:Key="PointConverter" />
</Window.Resources>

闭合Path的XMAL页面使用如下:

<!--闭合Path-->
<Path StrokeThickness="1.5" Stroke="#04386C"><Path.Data><PathGeometry><PathFigure  StartPoint="0,30"><LineSegment x:Name="Point1" Point="30,50"></LineSegment><LineSegment x:Name="Point2"><LineSegment.Point><MultiBinding Converter="{StaticResource EndPointConverter}" ConverterParameter="30"><Binding ElementName="ColorZone" Path="ActualWidth"/><Binding ElementName="Point1" Path="Point"/></MultiBinding></LineSegment.Point></LineSegment><LineSegment x:Name="Point3"><LineSegment.Point><MultiBinding Converter="{StaticResource PointConverter}" ConverterParameter="0"><Binding ElementName="ColorZone" Path="ActualWidth"/><Binding ElementName="Point1" Path="Point"/></MultiBinding></LineSegment.Point></LineSegment><LineSegment x:Name="Point4" ><LineSegment.Point><MultiBinding Converter="{StaticResource PointConverter}" ConverterParameter="0"><Binding ElementName="ColorZone" Path="ActualWidth"/></MultiBinding></LineSegment.Point></LineSegment><LineSegment Point="0,0"></LineSegment><LineSegment Point="0,30"></LineSegment></PathFigure></PathGeometry></Path.Data><Path.Fill>
<!--渐变色设置--><LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"><GradientStop Color="#07164C" Offset="0.4"></GradientStop><GradientStop Color="#07205A" Offset="0.8"></GradientStop><GradientStop Color="#07205B" Offset="1"></GradientStop></LinearGradientBrush></Path.Fill>
</Path>

效果:

线条Path的使用如下:

<Path StrokeThickness="3" Stroke="White"><Path.Data><GeometryGroup><LineGeometry x:Name="Point1" StartPoint="0 30" EndPoint="50 45" /><LineGeometry x:Name="Point2" StartPoint="50,45"><LineGeometry.EndPoint><MultiBinding Converter="{StaticResource EndPointConverter}" ConverterParameter="50"><Binding ElementName="ColorZone" Path="ActualWidth"/><Binding Path="StartPoint" RelativeSource="{RelativeSource Mode=self}"/></MultiBinding></LineGeometry.EndPoint></LineGeometry><LineGeometry x:Name="Point3"><LineGeometry.StartPoint><MultiBinding Converter="{StaticResource EndPointConverter}" ConverterParameter="50"><Binding ElementName="ColorZone" Path="ActualWidth"/><Binding ElementName="Point2" Path="StartPoint" /></MultiBinding></LineGeometry.StartPoint><LineGeometry.EndPoint><MultiBinding Converter="{StaticResource EndPointConverter}" ConverterParameter="0"><Binding ElementName="ColorZone" Path="ActualWidth"/><Binding ElementName="Point1" Path="StartPoint" /></MultiBinding></LineGeometry.EndPoint></LineGeometry><LineGeometry x:Name="Point4"><LineGeometry.StartPoint><MultiBinding Converter="{StaticResource EndPointConverter}" ConverterParameter="0"><Binding ElementName="ColorZone" Path="ActualWidth"/><Binding ElementName="Point3" Path="EndPoint"/></MultiBinding></LineGeometry.StartPoint><LineGeometry.EndPoint><MultiBinding Converter="{StaticResource EndPointConverter}" ConverterParameter="0"><Binding ElementName="ColorZone" Path="ActualWidth"/></MultiBinding></LineGeometry.EndPoint></LineGeometry><LineGeometry x:Name="Point5" EndPoint="0 0"><LineGeometry.StartPoint><MultiBinding Converter="{StaticResource EndPointConverter}" ConverterParameter="0"><Binding ElementName="ColorZone" Path="ActualWidth"/></MultiBinding></LineGeometry.StartPoint></LineGeometry><LineGeometry x:Name="Point6" StartPoint="0 0" EndPoint="0 30"/></GeometryGroup></Path.Data></Path>

效果(白色才是效果色):

两种图形中的"ColorZone"是Path的父控件,materialDesign:ColorZone是WPF的UI框架materialDesign下的控件，可替换为你自己的控件作为父控件只是注意父控件名称修改下即可。

整体如下:

 <DockPanel><!--头部--><materialDesign:ColorZone Padding="0" Height="50"ClipToBounds="False" CornerRadius="5 5 0 0"DockPanel.Dock="Top" x:Name="ColorZone"><StackPanel><!--<Path StrokeThickness="1.5" Stroke="#04386C"><Path.Data><PathGeometry><PathFigure  StartPoint="0,30"><LineSegment x:Name="Point1" Point="30,50"></LineSegment><LineSegment x:Name="Point2"><LineSegment.Point><MultiBinding Converter="{StaticResource EndPointConverter}" ConverterParameter="30"><Binding ElementName="ColorZone" Path="ActualWidth"/><Binding ElementName="Point1" Path="Point"/></MultiBinding></LineSegment.Point></LineSegment><LineSegment x:Name="Point3"><LineSegment.Point><MultiBinding Converter="{StaticResource PointConverter}" ConverterParameter="0"><Binding ElementName="ColorZone" Path="ActualWidth"/><Binding ElementName="Point1" Path="Point"/></MultiBinding></LineSegment.Point></LineSegment><LineSegment x:Name="Point4" ><LineSegment.Point><MultiBinding Converter="{StaticResource PointConverter}" ConverterParameter="0"><Binding ElementName="ColorZone" Path="ActualWidth"/></MultiBinding></LineSegment.Point></LineSegment><LineSegment Point="0,0"></LineSegment><LineSegment Point="0,30"></LineSegment></PathFigure></PathGeometry></Path.Data><Path.Fill><LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"><GradientStop Color="#07164C" Offset="0.4"></GradientStop><GradientStop Color="#07205A" Offset="0.8"></GradientStop><GradientStop Color="#07205B" Offset="1"></GradientStop></LinearGradientBrush></Path.Fill></Path>--><Path StrokeThickness="3" Stroke="White"><Path.Data><GeometryGroup><LineGeometry x:Name="Point1" StartPoint="0 30" EndPoint="50 45" /><LineGeometry x:Name="Point2" StartPoint="50,45"><LineGeometry.EndPoint><MultiBinding Converter="{StaticResource EndPointConverter}" ConverterParameter="50"><Binding ElementName="ColorZone" Path="ActualWidth"/><Binding Path="StartPoint" RelativeSource="{RelativeSource Mode=self}"/></MultiBinding></LineGeometry.EndPoint></LineGeometry><LineGeometry x:Name="Point3"><LineGeometry.StartPoint><MultiBinding Converter="{StaticResource EndPointConverter}" ConverterParameter="50"><Binding ElementName="ColorZone" Path="ActualWidth"/><Binding ElementName="Point2" Path="StartPoint" /></MultiBinding></LineGeometry.StartPoint><LineGeometry.EndPoint><MultiBinding Converter="{StaticResource EndPointConverter}" ConverterParameter="0"><Binding ElementName="ColorZone" Path="ActualWidth"/><Binding ElementName="Point1" Path="StartPoint" /></MultiBinding></LineGeometry.EndPoint></LineGeometry><LineGeometry x:Name="Point4"><LineGeometry.StartPoint><MultiBinding Converter="{StaticResource EndPointConverter}" ConverterParameter="0"><Binding ElementName="ColorZone" Path="ActualWidth"/><Binding ElementName="Point3" Path="EndPoint"/></MultiBinding></LineGeometry.StartPoint><LineGeometry.EndPoint><MultiBinding Converter="{StaticResource EndPointConverter}" ConverterParameter="0"><Binding ElementName="ColorZone" Path="ActualWidth"/></MultiBinding></LineGeometry.EndPoint></LineGeometry><LineGeometry x:Name="Point5" EndPoint="0 0"><LineGeometry.StartPoint><MultiBinding Converter="{StaticResource EndPointConverter}" ConverterParameter="0"><Binding ElementName="ColorZone" Path="ActualWidth"/></MultiBinding></LineGeometry.StartPoint></LineGeometry><LineGeometry x:Name="Point6" StartPoint="0 0" EndPoint="0 30"/></GeometryGroup></Path.Data></Path></StackPanel></materialDesign:ColorZone><!--底部--><!--中部 只能放于最后，利用DockPanel的LastChildFill特性填充中间空间--></DockPanel>

END.......虽然最终未采用该方式，但值得记录一下。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/52820.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

GIS 中的 3D 分析

GIS 中的 3D 分析

GIS 中的 3D 分析 3D 分析已成为 GIS 的一个发展趋势&#xff0c;因为它能够更好地表现现实世界。 这不仅仅是为了得到漂亮的图片。对于某些类型的问题&#xff0c;3D 分析有时是解决它们的唯一方法。 3D 数据类型的激增也推动了这一需求。例如&#xff0c;LiDAR、BIM、UAV、…
阅读更多...
VS Code 配置 Rust-Analyzer 报错

VS Code 配置 Rust-Analyzer 报错

报错信息&#xff1a; Bootstrap Error" rust-analyzer requires glibc > 2.28 in latest build. 参考了好多地方&#xff0c; https://github.com/rust-lang/rust-analyzer/issues/11558 https://blog.csdn.net/aLingYun/article/details/120923694 https://rust-anal…
阅读更多...
C++——⼆叉搜索树

C++——⼆叉搜索树

文章目录 一、 ⼆叉搜索树的概念二、⼆叉搜索树的性能分析三、⼆叉搜索树的插⼊四、⼆叉搜索树的查找五、⼆叉搜索树的删除六、二叉搜索树的有序遍历七、⼆叉搜索树的实现代码八、二叉搜索树key与key_value的应用key的应用key_value的应用key/value⼆叉搜索树代码实现 一、 ⼆叉…
阅读更多...
C++类与对象深度解析（一）：从抽象到实践的全面入门指南

C++类与对象深度解析（一）：从抽象到实践的全面入门指南

文章目录 C 类与对象——详细入门指南前言1. 类的定义1.1 类定义的基本格式示例代码解释 1.2 访问限定符示例代码解释 1.3 类域示例代码解释 1.4 成员命名规范常见的命名约定&#xff1a;示例&#xff1a;拓展&#xff1a; 1.5 class与struct的默认访问权限示例&#xff1a; 2.…
阅读更多...
搭建Windows下的Rust开发环境

搭建Windows下的Rust开发环境

【图书介绍】《Rust编程与项目实战》-CSDN博客 《Rust编程与项目实战》(朱文伟&#xff0c;李建英)【摘要 书评 试读】- 京东图书 (jd.com) Rust编程与项目实战_夏天又到了的博客-CSDN博客 2.1.1 安装vs_buildtools 在Windows系列操作系统中&#xff0c;Rust开发环境需要依…
阅读更多...
归并排序（Merge Sort）

归并排序（Merge Sort）

什么是归并排序 归并排序&#xff08;Merge Sort&#xff09;是一种经典的排序算法&#xff0c;它采用分治法&#xff08;Divide and Conquer&#xff09;策略&#xff0c;将一个大数组分为两个小数组&#xff0c;分别进行排序&#xff0c;然后将这两个已排序的小数组合并成一个…
阅读更多...
音视频开发常见的开源项目汇总

音视频开发常见的开源项目汇总

FFmpeg 地址&#xff1a;https://ffmpeg.org/介绍&#xff1a;FFmpeg 是一个非常强大的开源多媒体框架&#xff0c;它可以用来处理视频和音频文件。它支持多种格式的转换、编码、解码、转码、流处理等。FFmpeg 包括了 libavformat、libavcodec、libavutil、libswscale、libpos…
阅读更多...
组播 2024 9 11

组播 2024 9 11

PIM&#xff08;Protocol Independent Multicast&#xff09;是一种常用的组播路由协议&#xff0c;其独立于底层的单播路由协议&#xff0c;能够在多种网络环境中有效地实现多播路由功能。PIM主要有两种模式&#xff1a;PIM Sparse Mode (PIM-SM) 和 PIM Dense Mode (PIM-DM)&…
阅读更多...
【C++题解】1580. 扫雷（mine）

【C++题解】1580. 扫雷（mine）

欢迎关注本专栏《C从零基础到信奥赛入门级&#xff08;CSP-J&#xff09;》 问题&#xff1a;1580. 扫雷&#xff08;mine&#xff09; 类型&#xff1a;二维数组 题目描述&#xff1a; 扫雷游戏是一款十分经典的单机小游戏。在 n 行 m 列的雷区中有一些格子含有地雷&#x…
阅读更多...
I/O 多路复用：`select`、`poll`、`epoll` 和 `kqueue` 的区别与示例

I/O 多路复用：`select`、`poll`、`epoll` 和 `kqueue` 的区别与示例

I/O 多路复用是指在一个线程内同时监控多个文件描述符&#xff08;File Descriptor, FD&#xff09;&#xff0c;以便高效地处理多个 I/O 事件。在 UNIX/Linux 和 BSD 系统中&#xff0c;select、poll、epoll、kqueue 都是实现 I/O 多路复用的系统调用。它们各有特点&#xff0…
阅读更多...
el-input设置type=‘number‘和v-model.number的区别

el-input设置type=‘number‘和v-model.number的区别

el-input设置typenumber’与设置.number修饰符的区别 1. 设置type‘number’ 使用el-input时想收集数字类型的数据&#xff0c;我们首先会想到typenumber&#xff0c;设置完type为number时会限制我们输入的内容只能为数字&#xff0c;不能为字符/汉字等非数字类型的数值&…
阅读更多...
性能诊断的方法（五）：架构和业务诊断

性能诊断的方法（五）：架构和业务诊断

关于性能诊断的方法&#xff0c;我们可以按照“问题现象—直接原因—问题根源”这样一个思路去归纳。我们先从问题的现象去入手&#xff0c;包括时间的分析、资源的分析和异常信息的分析。接下来再去分析产生问题现象的直接原因是什么&#xff0c;这里我们归纳了自上而下的资源…
阅读更多...
外观模式详解：如何为复杂系统构建简洁的接口

外观模式详解：如何为复杂系统构建简洁的接口

&#x1f3af; 设计模式专栏&#xff0c;持续更新中 欢迎订阅&#xff1a;JAVA实现设计模式 &#x1f6e0;️ 希望小伙伴们一键三连&#xff0c;有问题私信都会回复&#xff0c;或者在评论区直接发言 外观模式 外观模式&#xff08;Facade Pattern&#xff09;为子系统中的一组…
阅读更多...
linux系统安装miniconda3

linux系统安装miniconda3

一、下载minconda3 下载地址&#xff1a;https://docs.conda.io/en/latest/miniconda.html 一般国内访问比较困难&#xff0c;可到清华软件镜像站 Index of /anaconda/miniconda/ | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror 需要特别注意自己的下载版本和自己的…
阅读更多...
初识爬虫2

初识爬虫2

requests学习&#xff1a; 小技巧&#xff0c;如果你用的也是pycharm&#xff0c;对于控制台输出页面因为数据很长一行&#xff0c;不方便进行查看&#xff0c; 可以让它自动换行&#xff1a; 1.requests文档阅读学习链接&#xff1a;快速上手 — Requests 2.18.1 文档 需掌…
阅读更多...
【运维监控】Prometheus+grafana监控zookeeper运行情况

【运维监控】Prometheus+grafana监控zookeeper运行情况

运维监控系列文章入口&#xff1a;【运维监控】系列文章汇总索引 文章目录 一、prometheus二、grafana三、prometheus集成grafana监控zookeeper1、修改zookeeper配置2、修改prometheus配置3、导入grafana模板4、验证 本示例通过zookeeper自带的监控信息暴露出来&#xff0c;然后…
阅读更多...
基于imx6ull平台opencv的图像采集和显示屏LCD显示功能（带Qt界面）

基于imx6ull平台opencv的图像采集和显示屏LCD显示功能（带Qt界面）

目录 一、概述二、环境要求2.1 硬件环境2.2 软件环境三、开发流程3.1 编写测试3.2 验证功能一、概述 本文档是针对imx6ull平台opencv的图像采集和显示屏LCD显示功能，创建Qt工程，在工程里面通过点击按钮，实现opencv通过摄像头采集视频图像，将采集的视频图像送给显示屏LCD进…
阅读更多...
LabVIEW编程快速提升的技术

LabVIEW编程快速提升的技术

在LabVIEW程序员的成长过程中&#xff0c;很多技术和概念看似简单、常用&#xff0c;但真正掌握并能熟练运用&#xff0c;往往需要踏踏实实的实践与积累。没有什么是能够一蹴而就的&#xff0c;唯有通过不断的专注与深入&#xff0c;才能获得显著的提升。要想在LabVIEW开发上取…
阅读更多...
SSM框架学习（三、MyBatis实践：提高持久层数据处理效率）

SSM框架学习（三、MyBatis实践：提高持久层数据处理效率）

目录 一、Mybatis简介 1.简介 2.持久层框架对比 3.快速入门&#xff08;基于Mybatis3方式&#xff09; 4.ibatis方式的实现和原理 5.ibatis与mybatis之间的关系 二、Mybatis基本使用 1.向 sql 语句传参 &#xff08;1&#xff09;mybatis日志输出配置 &#xff08;2&…
阅读更多...
为什么矩阵特征值之和等于主对角线元素之和，特征值乘积等于行列式值

为什么矩阵特征值之和等于主对角线元素之和，特征值乘积等于行列式值

首先给出特征值和特征向量的定义。 设A是n阶矩阵&#xff0c;如果数λ和n维非零向量x使关系式 Axλx &#xff08;1&#xff09; 成…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023