DynAreaBlowing.xaml

<UserControl x:Class="FLY.Thick.Blowing360.UI.UiModule.DynAreaBlowing"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:FLY.Thick.Blowing360.UI.UiModule"
             xmlns:iservice="clr-namespace:FLY.Thick.Blowing.IService;assembly=FLY.Thick.Blowing"
             xmlns:misc="clr-namespace:Misc;assembly=MISC" xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
             mc:Ignorable="d" 
             d:DesignWidth="250">
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/FLY.ControlLibrary;component/Themes/Dictionary_MyStyle.xaml"/>
                <ResourceDictionary Source="pack://application:,,,/FLY.Thick.Base.UI;component/Converter/Dictionary_MyConv.xaml"/>
            </ResourceDictionary.MergedDictionaries>

            <Style TargetType="TextBlock" x:Key="TextBlockStyle_ItemHeader">
                <Setter Property="FontWeight" Value="Bold"/>
                <Setter Property="FontFamily" Value="YouYuan"/>
                <Setter Property="FontSize" Value="12"/>
                <Setter Property="HorizontalAlignment" Value="Left"/>
                <Setter Property="Foreground" Value="#FF3B3B3B"/>
                <Setter Property="Margin" Value="5,0"/>
            </Style>
            <local:DynAreaBlowingVmUt x:Key="viewModel" Direction="FORWARD" Angle="200"/>
            <local:Angle2CWConverter x:Key="angle2cwConv"/>
        </ResourceDictionary>
    </UserControl.Resources>

    <Button Click="Border_Blowing_Click" Style="{StaticResource ButtonStyle_empty}" d:DataContext="{StaticResource viewModel}">
        <StackPanel>
            <Border  Style="{StaticResource BorderStyle_module}" >
                <StackPanel Margin="2">
                    <StackPanel Orientation="Horizontal" Margin="2">
                        <TextBlock Text="线速度" FontSize="12" FontWeight="Bold" FontFamily="YouYuan" TextAlignment="Center" HorizontalAlignment="Center" Foreground="#FF3B3B3B" />
                        <StackPanel Orientation="Horizontal" Margin="5,0">
                            <TextBlock Text="{Binding FilmVelocity, StringFormat={}{0:F1}}" FontSize="24" FontFamily="Microsoft Sans Serif" TextAlignment="Center" HorizontalAlignment="Center" Foreground="{StaticResource Color_theme_activity}" />
                            <TextBlock Style="{StaticResource TextBlockStyle_FieldContent_mm}" Text="m/min" FontSize="12" />
                        </StackPanel>
                    </StackPanel>
                </StackPanel>
            </Border>
            <Border Style="{StaticResource BorderStyle_module}"  >
                <Grid Margin="5">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition Width="auto"/>
                        <ColumnDefinition Width="auto"/>
                    </Grid.ColumnDefinitions>
                    <Grid Margin="2">
                        <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
                            <TextBlock FontWeight="Bold" FontFamily="Microsoft Sans Serif" Foreground="#FF3B3B3B" Text="{Binding Angle, StringFormat={}{0:F0}}" FontSize="43" />
                            <TextBlock Text="°" FontSize="25" FontWeight="Bold" FontFamily="YouYuan" Foreground="#FF3B3B3B" />
                        </StackPanel>
                    </Grid>
                    <Grid Margin="-25,2,2,2" Grid.Column="1">
                        <iconPacks:PackIconMaterial 
                            Width="35" Height="42"  HorizontalAlignment="Right" VerticalAlignment="Top" Foreground="{StaticResource Color_theme_activity}" RenderTransformOrigin="0.5,0.583">
                            <iconPacks:PackIconMaterial.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform/>
                                    <SkewTransform/>
                                    <RotateTransform Angle="{Binding Angle, Converter={StaticResource angle2cwConv}}"/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </iconPacks:PackIconMaterial.RenderTransform>
                            <iconPacks:PackIconMaterial.Style>
                                <Style TargetType="iconPacks:PackIconMaterial">
                                    <Setter Property="Kind" Value="RotateLeft"/>
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding Direction}" Value="{x:Static misc:DIRECTION.BACKWARD}">
                                            <Setter Property="Kind" Value="RotateRight"/>
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </iconPacks:PackIconMaterial.Style>
                        </iconPacks:PackIconMaterial>
                        <TextBlock FontSize="15" FontWeight="Bold" FontFamily="YouYuan" TextAlignment="Right" VerticalAlignment="Bottom" Foreground="#FF3B3B3B" >
                            <TextBlock.Style>
                                <Style TargetType="TextBlock">
                                    <Setter Property="Text" Value="逆时针"/>
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding Direction}" Value="{x:Static misc:DIRECTION.BACKWARD}">
                                            <Setter Property="Text" Value="顺时针"/>
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </TextBlock.Style>
                        </TextBlock>
                    </Grid>
                    <StackPanel Margin="2" Grid.Column="2">
                        <StackPanel Orientation="Horizontal" Margin="2" Background="Black" >
                            <TextBlock Text="{Binding RenZiJiaPeriod, Converter={StaticResource timespanconv}}" FontSize="24" FontFamily="Microsoft Sans Serif" TextAlignment="Center" HorizontalAlignment="Center" Foreground="White" />
                            <TextBlock Style="{StaticResource TextBlockStyle_FieldContent_mm}" Text="min/R" FontSize="12" Foreground="White"/>
                        </StackPanel>
                        <StackPanel Orientation="Horizontal" Margin="2" Background="#FFE8E8E8">
                            <TextBlock Text="{Binding PastTime, Converter={StaticResource timespanconv}, Mode=OneWay}" FontSize="24" FontFamily="Microsoft Sans Serif" TextAlignment="Center" HorizontalAlignment="Center" Foreground="Black" />
                            <TextBlock Style="{StaticResource TextBlockStyle_FieldContent_mm}" Text="min" FontSize="12" Foreground="Black"/>
                        </StackPanel>
                    </StackPanel>

                </Grid>
            </Border>
        </StackPanel>
    </Button>
</UserControl>