SHJX_cod/SHJX.Service.CustomControl/Dashboard/Themes/Generic.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Converters="clr-namespace:CustomUI.Converters"
    xmlns:UI="clr-namespace:CustomUI"
    xmlns:ec="http://schemas.microsoft.com/expression/2010/controls"
    xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing">

    <Converters:WordAngleConverter x:Key="WordAngleConverter" />

    <!--  单独提出作为资源引用，并且加上x:Shared="False"是为了防止出现“指定的元素已经是另一个元素的逻辑子元素。请先将其断开连接”  -->
    <DataTemplate x:Key="DefaultLabelPanel" x:Shared="False">
        <Border
            Width="70"
            Margin="0,0,0,20"
            Padding="0,2"
            HorizontalAlignment="Center"
            VerticalAlignment="Bottom"
            BorderBrush="#FFCCCC"
            BorderThickness="1"
            CornerRadius="3"
            SnapsToDevicePixels="True"
            UseLayoutRounding="True">
            <TextBlock
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                FontFamily="Agency FB"
                Foreground="White"
                Text="{Binding Path=Value, StringFormat={}{0:N1}°C, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UI:Dashboard}}}" />
        </Border>
    </DataTemplate>

    <!--  速度盘  -->
    <ControlTemplate x:Key="Speed" TargetType="{x:Type UI:Dashboard}">
        <Grid>
            <!--  背景圆盘  -->
            <Ellipse Fill="#99CCCC" />
            <Grid Margin="20">
                <!--  刻度盘当前值对应的圆弧  -->
                <ed:Arc
                    x:Name="PART_IncreaseCircle"
                    ArcThickness="8"
                    ArcThicknessUnit="Pixel"
                    Fill="#FF6666"
                    RenderTransformOrigin="0.5,0.5"
                    StartAngle="{TemplateBinding StartAngle}"
                    Stretch="None" />
                <!--  刻度盘完整圆弧  -->
                <ed:Arc
                    x:Name="DoubleCircle"
                    ArcThickness="8"
                    ArcThicknessUnit="Pixel"
                    EndAngle="{TemplateBinding EndAngle}"
                    StartAngle="{TemplateBinding StartAngle}"
                    Stretch="None"
                    Stroke="#FFCCCC"
                    StrokeThickness="1" />

                <!--  短刻度  -->
                <ec:PathListBox
                    x:Name="ShoartTick"
                    IsHitTestVisible="False"
                    ItemsSource="{TemplateBinding ShortTicks}">
                    <ec:PathListBox.ItemTemplate>
                        <DataTemplate>
                            <Border
                                Width="1"
                                Height="8"
                                Background="White"
                                SnapsToDevicePixels="True"
                                UseLayoutRounding="True" />
                        </DataTemplate>
                    </ec:PathListBox.ItemTemplate>
                    <ec:PathListBox.LayoutPaths>
                        <ec:LayoutPath
                            Distribution="Even"
                            Orientation="OrientToPath"
                            SourceElement="{Binding ElementName=ShortTickPath}" />
                    </ec:PathListBox.LayoutPaths>
                </ec:PathListBox>

                <!--  长刻度  -->
                <ec:PathListBox
                    x:Name="LongTick"
                    IsHitTestVisible="False"
                    ItemsSource="{TemplateBinding LongTicks}">
                    <ec:PathListBox.ItemTemplate>
                        <DataTemplate>
                            <Border
                                Width="1"
                                Height="13"
                                Background="White"
                                SnapsToDevicePixels="True"
                                UseLayoutRounding="True" />
                        </DataTemplate>
                    </ec:PathListBox.ItemTemplate>
                    <ec:PathListBox.LayoutPaths>
                        <ec:LayoutPath
                            Distribution="Even"
                            Orientation="OrientToPath"
                            SourceElement="{Binding ElementName=LongTickPath}" />
                    </ec:PathListBox.LayoutPaths>
                </ec:PathListBox>

                <!--  刻度上显示的数字  -->
                <ec:PathListBox
                    x:Name="Number"
                    IsHitTestVisible="False"
                    ItemsSource="{TemplateBinding NumberList}">
                    <ec:PathListBox.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding}" />
                        </DataTemplate>
                    </ec:PathListBox.ItemTemplate>
                    <ec:PathListBox.LayoutPaths>
                        <ec:LayoutPath
                            Distribution="Even"
                            Orientation="OrientToPath"
                            SourceElement="{Binding ElementName=NumberPath}" />
                    </ec:PathListBox.LayoutPaths>
                </ec:PathListBox>

                <ed:Arc
                    x:Name="LongTickPath"
                    Margin="0"
                    ArcThickness="0"
                    ArcThicknessUnit="Pixel"
                    EndAngle="{TemplateBinding EndAngle}"
                    StartAngle="{TemplateBinding StartAngle}"
                    Stretch="None" />

                <ed:Arc
                    x:Name="ShortTickPath"
                    Margin="5"
                    ArcThickness="0"
                    ArcThicknessUnit="Pixel"
                    EndAngle="{TemplateBinding EndAngle}"
                    StartAngle="{TemplateBinding StartAngle}"
                    Stretch="None" />

                <ed:Arc
                    x:Name="NumberPath"
                    Margin="20"
                    ArcThickness="0"
                    ArcThicknessUnit="Pixel"
                    EndAngle="{TemplateBinding EndAngle}"
                    StartAngle="{TemplateBinding StartAngle}"
                    Stretch="None" />

                <!--#region 表盘指针-->
                <Ellipse
                    Width="15"
                    Height="15"
                    Stroke="Black">
                    <Ellipse.Fill>
                        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                            <GradientStop Offset="0" Color="#FF2C2C2C" />
                            <GradientStop Offset="0.997" Color="Black" />
                        </LinearGradientBrush>
                    </Ellipse.Fill>
                </Ellipse>
                <Ellipse
                    Width="10"
                    Height="10"
                    Stroke="#FFCCCC" />
                <ed:RegularPolygon
                    x:Name="Finger"
                    Width="4"
                    Height="50"
                    Fill="#FFCCCC"
                    PointCount="3"
                    RenderTransformOrigin="0.5,1.118"
                    Stretch="Fill">
                    <ed:RegularPolygon.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform />
                            <SkewTransform />
                            <RotateTransform Angle="{Binding EndAngle, ElementName=PART_IncreaseCircle}" />
                            <TranslateTransform Y="-31" />
                        </TransformGroup>
                    </ed:RegularPolygon.RenderTransform>
                </ed:RegularPolygon>
                <!--#endregion-->
            </Grid>
            <ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" />
        </Grid>
    </ControlTemplate>

    <!--  流量盘  -->
    <ControlTemplate x:Key="Flow" TargetType="{x:Type UI:Dashboard}">
        <Grid>
            <!--  刻度盘完整圆弧  -->
            <ed:Arc
                x:Name="DoubleCircle"
                Margin="50"
                ArcThickness="1"
                ArcThicknessUnit="Pixel"
                EndAngle="{TemplateBinding EndAngle}"
                SnapsToDevicePixels="True"
                StartAngle="{TemplateBinding StartAngle}"
                Stretch="None"
                Stroke="#746E7A"
                StrokeThickness="1"
                UseLayoutRounding="True" />

            <!--  刻度盘当前值对应的圆弧  -->
            <ed:Arc
                x:Name="PART_IncreaseCircle"
                Margin="50"
                ArcThickness="1"
                ArcThicknessUnit="Pixel"
                RenderTransformOrigin="0.5,0.5"
                StartAngle="{TemplateBinding StartAngle}"
                Stretch="None"
                Stroke="Red"
                StrokeThickness="1" />

            <!--  短刻度  -->
            <ec:PathListBox
                x:Name="ShoartTick"
                IsHitTestVisible="False"
                ItemsSource="{TemplateBinding ShortTicks}">
                <ec:PathListBox.ItemTemplate>
                    <DataTemplate>
                        <Border
                            Width="1"
                            Height="8"
                            Background="{Binding ShortTicksBrush, RelativeSource={RelativeSource AncestorType={x:Type UI:Dashboard}}}"
                            SnapsToDevicePixels="True"
                            UseLayoutRounding="False" />
                    </DataTemplate>
                </ec:PathListBox.ItemTemplate>
                <ec:PathListBox.LayoutPaths>
                    <ec:LayoutPath
                        Distribution="Even"
                        Orientation="OrientToPath"
                        SourceElement="{Binding ElementName=ShortTickPath}" />
                </ec:PathListBox.LayoutPaths>
            </ec:PathListBox>

            <!--  长刻度  -->
            <ec:PathListBox
                x:Name="LongTick"
                IsHitTestVisible="False"
                ItemsSource="{TemplateBinding LongTicks}">
                <ec:PathListBox.ItemTemplate>
                    <DataTemplate>
                        <Border
                            Width="1"
                            Height="13"
                            Background="{Binding LongTicksBrush, RelativeSource={RelativeSource AncestorType={x:Type UI:Dashboard}}}"
                            SnapsToDevicePixels="True"
                            UseLayoutRounding="False" />
                    </DataTemplate>
                </ec:PathListBox.ItemTemplate>
                <ec:PathListBox.LayoutPaths>
                    <ec:LayoutPath
                        Distribution="Even"
                        Orientation="OrientToPath"
                        SourceElement="{Binding ElementName=LongTickPath}" />
                </ec:PathListBox.LayoutPaths>
            </ec:PathListBox>

            <!--  刻度上显示的数字  -->
            <ec:PathListBox
                x:Name="Number"
                IsHitTestVisible="False"
                ItemsSource="{TemplateBinding NumberList}">
                <ec:PathListBox.ItemTemplate>
                    <DataTemplate>
                        <TextBlock RenderTransformOrigin="0.5,0.5" Text="{Binding}">
                            <!--<TextBlock.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform />
                                        <SkewTransform />
                                        <RotateTransform Angle="{Binding}" />
                                        <TranslateTransform />
                                    </TransformGroup>
                                </TextBlock.RenderTransform>-->
                        </TextBlock>
                    </DataTemplate>
                </ec:PathListBox.ItemTemplate>
                <ec:PathListBox.LayoutPaths>
                    <ec:LayoutPath
                        Distribution="Even"
                        Orientation="OrientToPath"
                        SourceElement="{Binding ElementName=NumberPath}" />
                </ec:PathListBox.LayoutPaths>
            </ec:PathListBox>

            <!--#region 路径-->
            <ed:Arc
                x:Name="LongTickPath"
                Margin="0"
                ArcThickness="0"
                ArcThicknessUnit="Pixel"
                EndAngle="{TemplateBinding EndAngle}"
                StartAngle="{TemplateBinding StartAngle}"
                Stretch="None" />

            <ed:Arc
                x:Name="ShortTickPath"
                Margin="5"
                ArcThickness="0"
                ArcThicknessUnit="Pixel"
                EndAngle="{TemplateBinding EndAngle}"
                StartAngle="{TemplateBinding StartAngle}"
                Stretch="None" />

            <ed:Arc
                x:Name="NumberPath"
                Margin="20"
                ArcThickness="0"
                ArcThicknessUnit="Pixel"
                EndAngle="{TemplateBinding EndAngle}"
                StartAngle="{TemplateBinding StartAngle}"
                Stretch="None" />
            <!--#endregion-->

            <ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" />
        </Grid>
    </ControlTemplate>

    <Style TargetType="{x:Type UI:Dashboard}">
        <Setter Property="StartAngle" Value="-130" />
        <Setter Property="EndAngle" Value="130" />
        <Setter Property="FontSize" Value="12" />
        <Setter Property="Foreground" Value="#FFFFFF" />
        <Setter Property="Template" Value="{StaticResource Speed}" />
        <Setter Property="ContentTemplate" Value="{StaticResource DefaultLabelPanel}" />
        <Style.Triggers>
            <Trigger Property="Skin" Value="Flow">
                <Setter Property="StartAngle" Value="-120" />
                <Setter Property="EndAngle" Value="120" />
                <Setter Property="Foreground" Value="#929093" />
                <Setter Property="BorderBrush" Value="#746E7A" />
                <Setter Property="ShortTicksBrush" Value="#746E7A" />
                <Setter Property="LongTicksBrush" Value="#746E7A" />
                <Setter Property="Template" Value="{StaticResource Flow}" />
            </Trigger>
        </Style.Triggers>
    </Style>
</ResourceDictionary>