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⼆叉搜索树代码实现 一、 ⼆叉…
阅读更多...
Ollama的安装及使用

Ollama的安装及使用

文章目录 1. ollama 下载2. linux安装3. windows安装4. 使用ollama 1. ollama 下载 下载地址&#xff1a;https://ollama.com/download 2. linux安装 执行命令&#xff1a; curl -fsSL https://ollama.com/install.sh | sh设置启动访问IP和模型存储路径&#xff1a; vim /…
阅读更多...
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;然后将这两个已排序的小数组合并成一个…
阅读更多...
RealSense L515相机使用踩坑记录

RealSense L515相机使用踩坑记录

Realsense Viewer以及ROS驱动安装 要想通过ROS驱动Realsense系列产品&#xff0c;需要首先安装Realsense Viewer以及对应版本的realsense-ros驱动。 Realsense Viewer安装 Realsense Viewer的安装参考文章Linex Ubuntu环境下 Intel Realsense D435I 驱动ROS驱动安装配置 安…
阅读更多...
docker进入容器运行命令

docker进入容器运行命令

Docker容器的基本操作 在深入讨论如何进入容器并运行命令之前&#xff0c;让我们先回顾一下Docker容器的一些基本操作&#xff1a; 列出容器&#xff1a;使用docker ps命令列出当前正在运行的容器。如果你还想看到已经停止的容器&#xff0c;可以添加-a或--all选项。 启动容器…
阅读更多...
音视频开发常见的开源项目汇总

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

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

JAVA学习笔记01-变量的初始化

package day01; public class VarDemo { public static void main(String[] args) { int a; //int b,c,d; // int a; int e 300; //声明一个int(整数)的变量名为e并为e存储了300这样的整数数据 声明时并初始化 int f; //声明一个…
阅读更多...
组播 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)&…
阅读更多...
sqlx1.3.4版本的问题

sqlx1.3.4版本的问题

sqlx1.3.4版本存在问题&#xff0c;在调用sqlx的Select方法时&#xff0c;如果传入的dest是一个slice且slice不为空&#xff0c;查询结果将会追加在这个slice已有的元素后面。这位用户认为这个行为是“a little surprising”的&#xff0c;且与json 反序列化的表现不一致&#…
阅读更多...
【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;不能为字符/汉字等非数字类型的数值&…
阅读更多...
房产销售系统开发：SpringBoot技术要点

房产销售系统开发：SpringBoot技术要点

摘 要 随着科学技术的飞速发展&#xff0c;各行各业都在努力与现代先进技术接轨&#xff0c;通过科技手段提高自身的优势&#xff1b;对于房产销售系统当然也不能排除在外&#xff0c;随着网络技术的不断成熟&#xff0c;带动了房产销售系统&#xff0c;它彻底改变了过去传统的…
阅读更多...
基于Prometheus和Grafana的现代服务器监控体系构建

基于Prometheus和Grafana的现代服务器监控体系构建

构建基于Prometheus和Grafana的现代服务器监控体系是一个非常有效的方式来监控服务器性能、资源利用率和应用程序健康状况。以下是一些步骤和指南&#xff0c;帮助您构建这样一个监控体系&#xff1a; 1. **安装和配置Prometheus**&#xff1a; - 下载并安装Prometheus&…
阅读更多...
性能诊断的方法（五）：架构和业务诊断

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

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

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

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

Copyright @ 2022~2023