自动化产线组态实时监控2标题栏

有图片加载也行

 尺寸是固定的  ，图片缩放会失真，图片还是使用矢量图的方式

1、Path ，有8个点，弧形

        <Path Data="M0 0
                    A8 8 0 0 0 0 10
                    L30 38
                    A10 10 0 0 0 35 40
                    L400 40
                    A10 10 0 0 0 405 38
                    L435 10
                    A8 8 0 0 0 435 0" 
                    Fill="White"
                    HorizontalAlignment="Center">

 一共是8个点围成的图片

第一个点：M0 0
第二个点：0 10，弧线A表达出来， 半径是8
第三个点：30 38,直线L表达
第四个点：35 40 弧线A，半径10
第五个点：400 40 直线L连接 
第六个点：405 38 弧线A半径10
第七个点：435 10 直线L相连
第八个点：435 0 弧线A半径8

经纬度，先横，后竖

svg矢量图片，里面代码就是这样，描述信息

好处不管放大缩小不失真

图片会有锯齿

 

2、鹰眼效果

            <Path.Effect>
                <DropShadowEffect BlurRadius="10" Color="Gray" ShadowDepth="0" Opacity="0.5"/>
            </Path.Effect>

BlurRadius="10"　　虚化范围10

ShadowDepth="0"　　 深度0，不让偏移

Opacity="0.5"　　 透明度

 StrokeThickness="0.5" 线条厚度

3、填充色

 线性渐变：从左向右，开始灰色，中间白色， 最后又是灰色

Path.Fill 指定用于填充 Path 内部的画刷（Brush），比如纯色、渐变或图像。

            <Path.Fill>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                    <GradientStop Color="#DDD" Offset="0"/>
                    <GradientStop Color="#FFF" Offset="0.2"/>
                    <GradientStop Color="#FFF" Offset="0.8"/>
                    <GradientStop Color="#DDD" Offset="1"/>
                </LinearGradientBrush>
            </Path.Fill>

Offset位置从0%到20%，到80%，到100%

4、线条

Path.Stroke线性渐变，设置边缘的颜色或画刷
StartPoint="0,0" EndPoint="1,0" 横向渐变

            <Path.Stroke>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                    <GradientStop Color="Orange" Offset="0"/>
                    <GradientStop Color="#FFF" Offset="0.2"/>
                    <GradientStop Color="#FFF" Offset="0.8"/>
                    <GradientStop Color="Orange" Offset="1"/>
                </LinearGradientBrush>
            </Path.Stroke>

 

 不要觉得代码很多，排斥，简单梳理一下

复杂属性写不到“”引号里面，必须单独列出来.

 

5、标题和两侧的图标三列

        <Grid HorizontalAlignment="Center">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto"/>
                <ColumnDefinition/>
                <ColumnDefinition Width="auto"/>
            </Grid.ColumnDefinitions>
    </Grid>

中间显示文字，两侧宽度自适应，内容多大显示多大

设置Grid水平居中，

6、标题文字

            <TextBlock Text="工厂自动化产线组态监控" Margin="12,5,12,0"
                       FontWeight="ExtraBold" FontFamily="FZYaoTi" FontSize="16" FontStyle="Italic" Grid.Column="1"
                           Foreground="#555"/>

FontFamily="FZYaoTi"：系统里面如果没有字体，可能显示不了

FontStyle="Italic"斜体

Grid.Column="1"中间列显示

Foreground="#555"前景色

7、标题两侧箭头

StackPanel默认垂直方向的，改为Horizontal水平
Opacity="0.2"透明度越小，越模糊

Margin="5"通过这个间距
Stroke="Orange" Stroke:说明绘制形状的轮廓颜色

            <StackPanel Orientation="Horizontal" Margin="0,3,0,0">
                <Path Data="M0 0 6 6 0 12" Margin="5" Opacity="0.2" Style="{StaticResource p}"/>
                <Path Data="M0 0 6 6 0 12" Stroke="Orange" Margin="5" Opacity="0.6"/>
                <Path Data="M0 0 6 6 0 12" Stroke="Orange" Margin="5"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal" Grid.Column="2" Margin="0,3,0,0">
                <Path Data="M6 0 0 6 6 12" Stroke="Orange" Margin="5"/>
                <Path Data="M6 0 0 6 6 12" Stroke="Orange" Margin="5" Opacity="0.6"/>
                <Path Data="M6 0 0 6 6 12" Stroke="Orange" Margin="5" Opacity="0.2"/>
            </StackPanel>