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