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

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

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

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

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

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

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

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

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

    1. <!--闭合Path-->
    2. <Path StrokeThickness="1.5" Stroke="#04386C">
    3.     <Path.Data>
    4.         <PathGeometry>
    5.             <PathFigure  StartPoint="0,30">
    6.                 <LineSegment x:Name="Point1" Point="30,50"></LineSegment>
    7.                 <LineSegment x:Name="Point2">
    8.                     <LineSegment.Point>
    9.                         <MultiBinding Converter="{StaticResource EndPointConverter}" ConverterParameter="30">
    10.                             <Binding ElementName="ColorZone" Path="ActualWidth"/>
    11.                             <Binding ElementName="Point1" Path="Point"/>
    12.                         </MultiBinding>
    13.                     </LineSegment.Point>
    14.                 </LineSegment>
    15.                 <LineSegment x:Name="Point3">
    16.                     <LineSegment.Point>
    17.                         <MultiBinding Converter="{StaticResource PointConverter}" ConverterParameter="0">
    18.                             <Binding ElementName="ColorZone" Path="ActualWidth"/>
    19.                             <Binding ElementName="Point1" Path="Point"/>
    20.                         </MultiBinding>
    21.                     </LineSegment.Point>
    22.                 </LineSegment>
    23.                 <LineSegment x:Name="Point4" >
    24.                     <LineSegment.Point>
    25.                         <MultiBinding Converter="{StaticResource PointConverter}" ConverterParameter="0">
    26.                             <Binding ElementName="ColorZone" Path="ActualWidth"/>
    27.                         </MultiBinding>
    28.                     </LineSegment.Point>
    29.                 </LineSegment>
    30.                 <LineSegment Point="0,0"></LineSegment>
    31.                 <LineSegment Point="0,30"></LineSegment>
    32.             </PathFigure>
    33.         </PathGeometry>
    34.     </Path.Data>
    35.     <Path.Fill>
    36. <!--渐变色设置-->
    37.         <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
    38.             <GradientStop Color="#07164C" Offset="0.4"></GradientStop>
    39.             <GradientStop Color="#07205A" Offset="0.8"></GradientStop>
    40.             <GradientStop Color="#07205B" Offset="1"></GradientStop>
    41.         </LinearGradientBrush>
    42.     </Path.Fill>
    43. </Path>

    效果:

    线条Path的使用如下:

    1. <Path StrokeThickness="3" Stroke="White">
    2.         <Path.Data>
    3.             <GeometryGroup>
    4.                 <LineGeometry x:Name="Point1" StartPoint="0 30" EndPoint="50 45" />
    5.                 <LineGeometry x:Name="Point2" StartPoint="50,45">
    6.                     <LineGeometry.EndPoint>
    7.                         <MultiBinding Converter="{StaticResource EndPointConverter}" ConverterParameter="50">
    8.                             <Binding ElementName="ColorZone" Path="ActualWidth"/>
    9.                             <Binding Path="StartPoint" RelativeSource="{RelativeSource Mode=self}"/>
    10.                         </MultiBinding>
    11.                     </LineGeometry.EndPoint>
    12.                 </LineGeometry>
    13.                 <LineGeometry x:Name="Point3">
    14.                     <LineGeometry.StartPoint>
    15.                         <MultiBinding Converter="{StaticResource EndPointConverter}" ConverterParameter="50">
    16.                             <Binding ElementName="ColorZone" Path="ActualWidth"/>
    17.                             <Binding ElementName="Point2" Path="StartPoint" />
    18.                         </MultiBinding>
    19.                     </LineGeometry.StartPoint>
    20.                     <LineGeometry.EndPoint>
    21.                         <MultiBinding Converter="{StaticResource EndPointConverter}" ConverterParameter="0">
    22.                             <Binding ElementName="ColorZone" Path="ActualWidth"/>
    23.                             <Binding ElementName="Point1" Path="StartPoint" />
    24.                         </MultiBinding>
    25.                     </LineGeometry.EndPoint>
    26.                 </LineGeometry>
    27.                 <LineGeometry x:Name="Point4">
    28.                     <LineGeometry.StartPoint>
    29.                         <MultiBinding Converter="{StaticResource EndPointConverter}" ConverterParameter="0">
    30.                             <Binding ElementName="ColorZone" Path="ActualWidth"/>
    31.                             <Binding ElementName="Point3" Path="EndPoint"/>
    32.                         </MultiBinding>
    33.                     </LineGeometry.StartPoint>
    34.                     <LineGeometry.EndPoint>
    35.                         <MultiBinding Converter="{StaticResource EndPointConverter}" ConverterParameter="0">
    36.                             <Binding ElementName="ColorZone" Path="ActualWidth"/>
    37.                         </MultiBinding>
    38.                     </LineGeometry.EndPoint>
    39.                 </LineGeometry>
    40.                 <LineGeometry x:Name="Point5" EndPoint="0 0">
    41.                     <LineGeometry.StartPoint>
    42.                         <MultiBinding Converter="{StaticResource EndPointConverter}" ConverterParameter="0">
    43.                             <Binding ElementName="ColorZone" Path="ActualWidth"/>
    44.                         </MultiBinding>
    45.                     </LineGeometry.StartPoint>
    46.                 </LineGeometry>
    47.                 <LineGeometry x:Name="Point6" StartPoint="0 0" EndPoint="0 30"/>
    48.             </GeometryGroup>
    49.         </Path.Data>
    50.     </Path>

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

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

    整体如下:

    1.  <DockPanel>
    2.      <!--头部-->
    3.      <materialDesign:ColorZone Padding="0" Height="50"
    4.                               
    5.                        ClipToBounds="False" CornerRadius="5 5 0 0"
    6.                          DockPanel.Dock="Top" x:Name="ColorZone">
    7.          <StackPanel>
    8.              <!--<Path StrokeThickness="1.5" Stroke="#04386C">
    9.                  <Path.Data>
    10.                      <PathGeometry>
    11.                          <PathFigure  StartPoint="0,30">
    12.                              <LineSegment x:Name="Point1" Point="30,50"></LineSegment>
    13.                              <LineSegment x:Name="Point2">
    14.                                  <LineSegment.Point>
    15.                                      <MultiBinding Converter="{StaticResource EndPointConverter}" ConverterParameter="30">
    16.                                          <Binding ElementName="ColorZone" Path="ActualWidth"/>
    17.                                          <Binding ElementName="Point1" Path="Point"/>
    18.                                      </MultiBinding>
    19.                                  </LineSegment.Point>
    20.                              </LineSegment>
    21.                              <LineSegment x:Name="Point3">
    22.                                  <LineSegment.Point>
    23.                                      <MultiBinding Converter="{StaticResource PointConverter}" ConverterParameter="0">
    24.                                          <Binding ElementName="ColorZone" Path="ActualWidth"/>
    25.                                          <Binding ElementName="Point1" Path="Point"/>
    26.                                      </MultiBinding>
    27.                                  </LineSegment.Point>
    28.                              </LineSegment>
    29.                              <LineSegment x:Name="Point4" >
    30.                                  <LineSegment.Point>
    31.                                      <MultiBinding Converter="{StaticResource PointConverter}" ConverterParameter="0">
    32.                                          <Binding ElementName="ColorZone" Path="ActualWidth"/>
    33.                                      </MultiBinding>
    34.                                  </LineSegment.Point>
    35.                              </LineSegment>
    36.                              <LineSegment Point="0,0"></LineSegment>
    37.                              <LineSegment Point="0,30"></LineSegment>
    38.                          </PathFigure>
    39.                      </PathGeometry>
    40.                  </Path.Data>
    41.                  <Path.Fill>
    42.                      <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
    43.                          <GradientStop Color="#07164C" Offset="0.4"></GradientStop>
    44.                          <GradientStop Color="#07205A" Offset="0.8"></GradientStop>
    45.                          <GradientStop Color="#07205B" Offset="1"></GradientStop>
    46.                      </LinearGradientBrush>
    47.                  </Path.Fill>
    48.              </Path>-->
    49.              
    50.          <Path StrokeThickness="3" Stroke="White">
    51.                  <Path.Data>
    52.                      <GeometryGroup>
    53.                          <LineGeometry x:Name="Point1" StartPoint="0 30" EndPoint="50 45" />
    54.                          <LineGeometry x:Name="Point2" StartPoint="50,45">
    55.                              <LineGeometry.EndPoint>
    56.                                  <MultiBinding Converter="{StaticResource EndPointConverter}" ConverterParameter="50">
    57.                                      <Binding ElementName="ColorZone" Path="ActualWidth"/>
    58.                                      <Binding Path="StartPoint" RelativeSource="{RelativeSource Mode=self}"/>
    59.                                  </MultiBinding>
    60.                              </LineGeometry.EndPoint>
    61.                          </LineGeometry>
    62.                          <LineGeometry x:Name="Point3">
    63.                              <LineGeometry.StartPoint>
    64.                                  <MultiBinding Converter="{StaticResource EndPointConverter}" ConverterParameter="50">
    65.                                      <Binding ElementName="ColorZone" Path="ActualWidth"/>
    66.                                      <Binding ElementName="Point2" Path="StartPoint" />
    67.                                  </MultiBinding>
    68.                              </LineGeometry.StartPoint>
    69.                              <LineGeometry.EndPoint>
    70.                                  <MultiBinding Converter="{StaticResource EndPointConverter}" ConverterParameter="0">
    71.                                      <Binding ElementName="ColorZone" Path="ActualWidth"/>
    72.                                      <Binding ElementName="Point1" Path="StartPoint" />
    73.                                  </MultiBinding>
    74.                              </LineGeometry.EndPoint>
    75.                          </LineGeometry>
    76.                          <LineGeometry x:Name="Point4">
    77.                              <LineGeometry.StartPoint>
    78.                                  <MultiBinding Converter="{StaticResource EndPointConverter}" ConverterParameter="0">
    79.                                      <Binding ElementName="ColorZone" Path="ActualWidth"/>
    80.                                      <Binding ElementName="Point3" Path="EndPoint"/>
    81.                                  </MultiBinding>
    82.                              </LineGeometry.StartPoint>
    83.                              <LineGeometry.EndPoint>
    84.                                  <MultiBinding Converter="{StaticResource EndPointConverter}" ConverterParameter="0">
    85.                                      <Binding ElementName="ColorZone" Path="ActualWidth"/>
    86.                                  </MultiBinding>
    87.                              </LineGeometry.EndPoint>
    88.                          </LineGeometry>
    89.                          <LineGeometry x:Name="Point5" EndPoint="0 0">
    90.                              <LineGeometry.StartPoint>
    91.                                  <MultiBinding Converter="{StaticResource EndPointConverter}" ConverterParameter="0">
    92.                                      <Binding ElementName="ColorZone" Path="ActualWidth"/>
    93.                                  </MultiBinding>
    94.                              </LineGeometry.StartPoint>
    95.                          </LineGeometry>
    96.                          <LineGeometry x:Name="Point6" StartPoint="0 0" EndPoint="0 30"/>
    97.                      </GeometryGroup>
    98.                  </Path.Data>
    99.              </Path>
    100.          </StackPanel>
    101.         
    102.         
    103.      </materialDesign:ColorZone>
    104.      <!--底部-->
    105.     
    106.      <!--中部 只能放于最后，利用DockPanel的LastChildFill特性填充中间空间-->
    107.     
    108.  </DockPanel>

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

  • 相关阅读:
    FPGA时序分析与约束（6）——综合的基础知识
    js对三层数组进行数据筛选
    js：Lodash一个JavaScript 实用工具库
    浅谈Unity UI适配（一）
    java基础之什么是面向对象?[11]
    【iOS】导航栏的显隐与self.view.height
    ilr normalize isometric log-ratio transformation
    Docker 中的 .NET 异常了怎么抓 Dump
    2023.11.17-hive调优的常见方式
    C++ Qt开发：QHostInfo主机地址查询组件
  • 原文地址：https://blog.csdn.net/qq_44217121/article/details/142132523