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

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

news 来源：原创 2024/9/20 4:35:26

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.......虽然最终未采用该方式，但值得记录一下。