<Window x:Class="BluetoothPC.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:BluetoothPC"
        xmlns:ed="clr-namespace:Microsoft.Expression.Shapes;assembly=Microsoft.Expression.Drawing"
        mc:Ignorable="d"
        WindowStartupLocation="CenterScreen"
        Title="蓝牙计步上位机" Height="600" Width="900"
        ResizeMode="CanMinimize"
        FontFamily="pack://application;,,,/Fonts/#FontAwesome"
        Loaded="Window_Loaded" Closed="Window_Closed" Icon="picture/touxiang.png">

    <Window.Resources>
        <local:SizeConverter x:Key="MyConverter"/>
        <Style TargetType="ToggleButton" x:Key="MyButton">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Grid>
                            <Rectangle Name="ButtonRectangle" 
                                       Width="{TemplateBinding Width}" 
                                       Height="{TemplateBinding Height,Converter={StaticResource MyConverter}}"
                                       Fill="{TemplateBinding Background}"
                                       RadiusX="{Binding Path=Height,Converter={StaticResource MyConverter},RelativeSource={RelativeSource Self}}"
                                       RadiusY="{Binding Path=RadiusX,RelativeSource={RelativeSource Self}}"/>
                            <Ellipse Name="ButtonEllipse" Height="{TemplateBinding Height}"
                                     Width="{Binding RelativeSource={RelativeSource Self},Path=Height}"
                                     Fill="#FFE0E0E0"
                                     Stroke="Gray">
                                <Ellipse.Triggers>
                                    <EventTrigger RoutedEvent="MouseEnter">
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <ColorAnimation To="Black" Duration="0:0:0.5" Storyboard.TargetProperty="Fill.(SolidColorBrush.Color)"/>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </EventTrigger>
                                    <EventTrigger RoutedEvent="MouseLeave">
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <ColorAnimation To="#FFE0E0E0" Duration="0:0:0.5" Storyboard.TargetProperty="Fill.(SolidColorBrush.Color)"/>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </EventTrigger>
                                </Ellipse.Triggers>
                            </Ellipse>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter TargetName="ButtonEllipse" Property="HorizontalAlignment" Value="Right"/>
                            </Trigger>
                            <Trigger Property="IsChecked" Value="False">
                                <Setter Property="Fill" TargetName="ButtonRectangle" Value="Gray"/>
                                <Setter TargetName="ButtonEllipse" Property="HorizontalAlignment" Value="Left"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Background" Value="#FF2DF12D"/>
        </Style>
        <Style x:Key="ProgressBarStyle" TargetType="{x:Type ProgressBar}">
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ProgressBar}">
                        <Grid x:Name="TemplateRoot">
                            <Grid.Clip>
                                <RectangleGeometry RadiusX="20" RadiusY="20" Rect="0 0 530 40"/>
                            </Grid.Clip>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Determinate"/>
                                    <VisualState x:Name="Indeterminate">
                                        <Storyboard RepeatBehavior="Forever">
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Animation">
                                                <EasingDoubleKeyFrame KeyTime="0" Value="0.25"/>
                                                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.25"/>
                                                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.25"/>
                                            </DoubleAnimationUsingKeyFrames>
                                            <PointAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)" Storyboard.TargetName="Animation">
                                                <EasingPointKeyFrame KeyTime="0" Value="-0.5,0.5"/>
                                                <EasingPointKeyFrame KeyTime="0:0:1" Value="0.5,0.5"/>
                                                <EasingPointKeyFrame KeyTime="0:0:2" Value="1.5,0.5"/>
                                            </PointAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border Background="{TemplateBinding Background}" CornerRadius="20"/>
                            <Rectangle x:Name="PART_Track" RadiusX="20" RadiusY="20"/>
                            <Grid x:Name="PART_Indicator" ClipToBounds="true" HorizontalAlignment="Left">
                                <Rectangle x:Name="Indicator" Fill="{TemplateBinding Foreground}" RadiusX="20" RadiusY="20"/>
                                <Rectangle x:Name="Animation" Fill="{TemplateBinding Foreground}" RenderTransformOrigin="0.5,0.5" RadiusX="20" RadiusY="20">
                                    <Rectangle.RenderTransform>
                                        <TransformGroup>
                                            <ScaleTransform/>
                                            <SkewTransform/>
                                            <RotateTransform/>
                                            <TranslateTransform/>
                                        </TransformGroup>
                                    </Rectangle.RenderTransform>
                                </Rectangle>
                            </Grid>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="Orientation" Value="Vertical">
                                <Setter Property="LayoutTransform" TargetName="TemplateRoot">
                                    <Setter.Value>
                                        <RotateTransform Angle="-90"/>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsIndeterminate" Value="true">
                                <Setter Property="Visibility" TargetName="Indicator" Value="Collapsed"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="ButtonStyleForMimic" TargetType="{x:Type Button}">
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="Background" Value="#EAEAEA"/>
            <Setter Property="FontSize" Value="30"/>
            <Setter Property="Height" Value="70"/>
            <Setter Property="Width" Value="70"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <ControlTemplate.Resources>
                            <Storyboard x:Key="Storyboard1">
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.BlurRadius)" Storyboard.TargetName="border1">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.Direction)" Storyboard.TargetName="border1">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.ShadowDepth)" Storyboard.TargetName="border1">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.BlurRadius)" Storyboard.TargetName="border2">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.Direction)" Storyboard.TargetName="border2">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="360"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.ShadowDepth)" Storyboard.TargetName="border2">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0"/>
                                </DoubleAnimationUsingKeyFrames>
                                <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="border">
                                    <EasingColorKeyFrame KeyTime="0:0:0.1" Value="White"/>
                                </ColorAnimationUsingKeyFrames>
                                <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="border">
                                    <EasingColorKeyFrame KeyTime="0:0:0.1" Value="#FFDFDFDF"/>
                                </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                            <Storyboard x:Key="Storyboard2">
                                <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="border">
                                    <EasingColorKeyFrame KeyTime="0" Value="#FFEAEAEA"/>
                                </ColorAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.BlurRadius)" Storyboard.TargetName="border1">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="10"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.Direction)" Storyboard.TargetName="border1">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="135"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.ShadowDepth)" Storyboard.TargetName="border1">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="5"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.BlurRadius)" Storyboard.TargetName="border2">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="10"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.Direction)" Storyboard.TargetName="border2">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="315"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.ShadowDepth)" Storyboard.TargetName="border2">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="5"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </ControlTemplate.Resources>
                        <Grid Cursor="Hand">
                            <Border x:Name="border1" CornerRadius="50" Background="#EAEAEA">
                                <Border.Effect>
                                    <DropShadowEffect Direction="135" Color="White" BlurRadius="10" Opacity="0.7"/>
                                </Border.Effect>
                            </Border>
                            <Border x:Name="border2" CornerRadius="50" Background="#EAEAEA">
                                <Border.Effect>
                                    <DropShadowEffect Color="#FFD4D4D4" BlurRadius="10" Opacity="0.7"/>
                                </Border.Effect>
                            </Border>
                            <Border CornerRadius="50" x:Name="border" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="true">
                                <Border.Background>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FFEAEAEA" Offset="0"/>
                                        <GradientStop Color="#FFEAEAEA" Offset="1"/>
                                    </LinearGradientBrush>
                                </Border.Background>
                                <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsPressed" Value="true">
                                <Trigger.ExitActions>
                                    <BeginStoryboard x:Name="Storyboard2_BeginStoryboard" Storyboard="{StaticResource Storyboard2}"/>
                                </Trigger.ExitActions>
                                <Trigger.EnterActions>
                                    <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
                                </Trigger.EnterActions>
                                <Setter Property="Foreground" Value="#FF5725"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Storyboard x:Key="Onloaded1" RepeatBehavior="Forever" AutoReverse="True">
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="StepNumberDisplay">
                <EasingColorKeyFrame KeyTime="0:0:1" Value="#37B6B8"/>
            </ColorAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.BlurRadius)" Storyboard.TargetName="StepNumberDisplay">
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="10"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="ellipse">
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CubicEase EasingMode="EaseIn"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="ellipse1">
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CircleEase EasingMode="EaseOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="50"/>
            </DoubleAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="statusInfoTextBlockForMe">
                <EasingColorKeyFrame KeyTime="0:0:1" Value="#3300CAFE">
                    <EasingColorKeyFrame.EasingFunction>
                        <CubicEase EasingMode="EaseIn"/>
                    </EasingColorKeyFrame.EasingFunction>
                </EasingColorKeyFrame>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded" SourceName="StepNumberDisplay">
            <BeginStoryboard Storyboard="{StaticResource Onloaded1}"/>
        </EventTrigger>
    </Window.Triggers>
    <!--正文面板-->
    <DockPanel x:Name="TuyongForColor" Background="White">
        <StatusBar DockPanel.Dock="Bottom" x:Name="statusBar" Background="#FF007ACC" Padding="4">
            <StatusBarItem HorizontalAlignment="Left">
                <TextBlock x:Name="statusInfoTextBlockForMe" Foreground="White"><Run Text="Copyright © https://obgeqwh.top 2021 Design by 屠雍"/></TextBlock>
            </StatusBarItem>
            <StatusBarItem HorizontalAlignment="Center" Margin="60,0,0,0">
                <StackPanel Orientation="Horizontal">
                    <Ellipse x:Name="ellipse" Fill="#FFC1E839" Height="20" Width="20" Stroke="#FF0FDDCA" RenderTransformOrigin="0.5,0.5">
                        <Ellipse.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform/>
                                <SkewTransform/>
                                <RotateTransform/>
                                <TranslateTransform X="-50"/>
                            </TransformGroup>
                        </Ellipse.RenderTransform>
                    </Ellipse>
                    <Ellipse Fill="#FFC1E839" Height="20" Width="20" Stroke="#FF0FDDCA"/>
                    <Ellipse x:Name="ellipse1" Fill="#FFC1E839" Height="20" Width="20" Stroke="#FF0FDDCA" RenderTransformOrigin="0.5,0.5">
                        <Ellipse.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform/>
                                <SkewTransform/>
                                <RotateTransform/>
                                <TranslateTransform/>
                            </TransformGroup>
                        </Ellipse.RenderTransform>
                    </Ellipse>
                </StackPanel>
            </StatusBarItem>
            <StatusBarItem HorizontalAlignment="Center" Margin="60,0,0,0">
                <TextBlock x:Name="statusInfoTextBlock" Foreground="White"><Run Text="服务器未连接"/></TextBlock>
            </StatusBarItem>
            <StatusBarItem HorizontalAlignment="Right">
                <TextBlock x:Name="timeDateTextBlock" Foreground="White"/>
            </StatusBarItem>
        </StatusBar>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="300"/>
                <ColumnDefinition Width="10"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <!--左半部-->
            <Grid Grid.Column="0" DockPanel.Dock="Left" Visibility="Visible">
                <Grid.RowDefinitions>
                    <RowDefinition Height="280"/>
                    <RowDefinition Height="20"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <!--左上半部-->
                <Border Grid.Row="0" BorderThickness="6" BorderBrush="#FF00CDFF" CornerRadius="40">
                    <DockPanel>
                        <Border DockPanel.Dock="Top" Padding="10">
                            <TextBlock Text="服务器设置" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="18" FontWeight="Bold" TextDecorations="{x:Null}" Foreground="#FF606060"/>
                        </Border>

                        <Border DockPanel.Dock="Top" Padding="20">
                            <Grid DockPanel.Dock="Top">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="4*"/>
                                    <ColumnDefinition Width="6*"/>
                                </Grid.ColumnDefinitions>
                                <TextBlock Grid.Column="0" Text="IP地址" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="18" FontWeight="Bold" TextDecorations="{x:Null}" Foreground="#FF606060"/>
                                <Border Grid.Column="1" Grid.Row="0" BorderThickness="0,0,0,2" BorderBrush="#FF00DFFF">
                                    <local:TipTextbox x:Name="IPAdressTextBox" VerticalContentAlignment="Center" Height="24" TipText="192.168.4.2" BorderThickness="0" FontSize="18" FontWeight="Bold"/>
                                </Border>
                            </Grid>
                        </Border>

                        <Border DockPanel.Dock="Top" Padding="20">
                            <Grid DockPanel.Dock="Top">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="4*"/>
                                    <ColumnDefinition Width="6*"/>
                                </Grid.ColumnDefinitions>
                                <TextBlock Grid.Column="0" Text="端口号" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="18" FontWeight="Bold" TextDecorations="{x:Null}" Foreground="#FF606060"/>
                                <Border Grid.Column="1" Grid.Row="0" BorderThickness="0,0,0,2" BorderBrush="#FF00DFFF">
                                    <local:TipTextbox x:Name="PortTextBox" VerticalContentAlignment="Center" Height="24" TipText="1001" BorderThickness="0" FontSize="18" FontWeight="Bold"/>
                                </Border>
                            </Grid>
                        </Border>

                        <Border DockPanel.Dock="Top" Padding="10">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="4*"/>
                                    <ColumnDefinition Width="6*"/>
                                </Grid.ColumnDefinitions>
                                <Border Grid.Column="0">
                                    <Canvas Width="100" Height="60">
                                        <Image Name="imageBtn" Source="/picture/1.png" Width="100" Height="60" Stretch="Uniform"/>
                                    </Canvas>
                                </Border>
                                <Border Grid.Column="1" Grid.Row="0">
                                    <local:SuperButton x:Name="Switch_Button" Click="Switch_Button_Click" Width="100" Height="60" Background="Transparent" Foreground="#FF5C5757" Content="请求连接" FontSize="18" FontWeight="Bold" Cursor="Hand"/>
                                </Border>
                            </Grid>
                        </Border>
                    </DockPanel>
                </Border>
                <!--延时点点动画-->
                <Border Grid.Row="1">
                    <UniformGrid Name="Container1" Columns="5" Height="20" VerticalAlignment="Center">
                        <UniformGrid.Resources>
                            <Storyboard x:Key="MyAnimation">
                                <DoubleAnimation From="10" To="30" Duration="0:0:0.5" RepeatBehavior="Forever" AutoReverse="True" Storyboard.TargetProperty="Width"/>
                            </Storyboard>
                            <Style TargetType="Ellipse">
                                <Setter Property="Height" Value="5"/>
                                <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource Mode=Self},Path=Height}"/>
                                <Setter Property="Fill" Value="#FF5DE5DE"/>
                            </Style>
                        </UniformGrid.Resources>
                        <Ellipse/>
                        <Ellipse/>
                        <Ellipse/>
                        <Ellipse/>
                        <Ellipse/>
                    </UniformGrid>
                </Border>
                <!--计步-->
                <Border Grid.Row="2" BorderThickness="6" BorderBrush="#FF00CDFF" CornerRadius="40" Padding="10">
                    <DockPanel>
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="40"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <Border Grid.Row="0">
                                <TextBlock Text="计步控制" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="18" FontWeight="Bold" TextDecorations="{x:Null}" Foreground="#FF606060"/>
                            </Border>
                            <Border Grid.Row="1">
                                <!--开关-->
                                <ToggleButton Width="160" Height="80" Style="{StaticResource MyButton}" Checked="ToggleButton_Checked" Unchecked="ToggleButton_Unchecked" Cursor="Hand"/>
                            </Border>
                        </Grid>
                    </DockPanel>
                </Border>
            </Grid>
            <!--右半部-->
            <Grid Grid.Column="2">
                <Grid.RowDefinitions>
                    <RowDefinition Height="280"/>
                    <RowDefinition Height="20"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <!--右上部分-->
                <Border Grid.Row="0" BorderThickness="6" BorderBrush="#FF00CDFF" CornerRadius="40" Padding="10">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="1*"/>
                            <ColumnDefinition Width="1*"/>
                            <ColumnDefinition Width="1*"/>
                        </Grid.ColumnDefinitions>
                        <!--X-->
                        <Border Grid.Column="0">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="1*"/>
                                    <RowDefinition Height="2*"/>
                                    <RowDefinition Height="5*"/>
                                </Grid.RowDefinitions>
                                <Border Grid.Row="0">
                                    <TextBlock Text="X-axis" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="25" FontWeight="Bold" TextDecorations="{x:Null}" Foreground="#FF606060"/>
                                </Border>
                                <Border Grid.Row="1">
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="6*"/>
                                            <ColumnDefinition Width="1*"/>
                                        </Grid.ColumnDefinitions>
                                        <local:TipTextbox x:Name="XaxisTextBox" Grid.Column="0" VerticalContentAlignment="Center" TipText="0" BorderThickness="0,0,0,6" BorderBrush="#FF51E818" FontSize="28" TextAlignment="Center" FontWeight="Bold"/>
                                        <TextBlock Text="g" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="25" FontWeight="Bold" TextDecorations="{x:Null}" Foreground="#FF606060"/>
                                    </Grid>
                                </Border>
                                <Border Grid.Row="2">
                                    <ProgressBar FontSize="36" Background="Transparent" Foreground="#EE944157" Maximum="16" Minimum="-16" SmallChange="0.01" Width="150" Height="150" Value="{Binding ElementName=XaxisTextBox,Path=Text}" HorizontalAlignment="Left">
                                        <ProgressBar.Template>
                                            <ControlTemplate TargetType="ProgressBar">
                                                <ControlTemplate.Resources>
                                                    <local:PercentConverter x:Key="cvt"/>
                                                </ControlTemplate.Resources>
                                                <Grid>
                                                    <TextBlock Text="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},Path=Value,StringFormat=p0}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                                                    <ed:Arc StartAngle="0" EndAngle="360" ArcThickness="16" Stretch="None" Fill="{TemplateBinding Background}"/>
                                                    <ed:Arc StartAngle="0" ArcThickness="16" Stretch="None" ArcThicknessUnit="Pixel" Fill="{TemplateBinding Foreground}" EndAngle="{TemplateBinding Value,Converter={StaticResource cvt}}"/>
                                                </Grid>
                                            </ControlTemplate>
                                        </ProgressBar.Template>
                                    </ProgressBar>
                                </Border>
                            </Grid>
                        </Border>
                        <!--Y-->
                        <Border Grid.Column="1">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="1*"/>
                                    <RowDefinition Height="2*"/>
                                    <RowDefinition Height="5*"/>
                                </Grid.RowDefinitions>
                                <Border Grid.Row="0">
                                    <TextBlock Text="Y-axis" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="25" FontWeight="Bold" TextDecorations="{x:Null}" Foreground="#FF606060"/>
                                </Border>
                                <Border Grid.Row="1">
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="6*"/>
                                            <ColumnDefinition Width="1*"/>
                                        </Grid.ColumnDefinitions>
                                        <local:TipTextbox x:Name="YaxisTextBox" Grid.Column="0" VerticalContentAlignment="Center" TipText="0" BorderThickness="0,0,0,6" BorderBrush="#FF51E818" FontSize="28" TextAlignment="Center" FontWeight="Bold"/>
                                        <TextBlock Text="g" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="25" FontWeight="Bold" TextDecorations="{x:Null}" Foreground="#FF606060"/>
                                    </Grid>
                                </Border>
                                <Border Grid.Row="2">
                                    <ProgressBar FontSize="36" Background="Transparent" Foreground="#EEFF5C00" Maximum="16" Minimum="-16" SmallChange="0.01" Width="150" Height="150" Value="{Binding ElementName=YaxisTextBox,Path=Text}" HorizontalAlignment="Left">
                                        <ProgressBar.Template>
                                            <ControlTemplate TargetType="ProgressBar">
                                                <ControlTemplate.Resources>
                                                    <local:PercentConverter x:Key="cvt"/>
                                                </ControlTemplate.Resources>
                                                <Grid>
                                                    <TextBlock Text="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},Path=Value,StringFormat=p0}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                                                    <ed:Arc StartAngle="0" EndAngle="360" ArcThickness="16" Stretch="None" Fill="{TemplateBinding Background}"/>
                                                    <ed:Arc StartAngle="0" ArcThickness="16" Stretch="None" ArcThicknessUnit="Pixel" Fill="{TemplateBinding Foreground}" EndAngle="{TemplateBinding Value,Converter={StaticResource cvt}}"/>
                                                </Grid>
                                            </ControlTemplate>
                                        </ProgressBar.Template>
                                    </ProgressBar>
                                </Border>
                            </Grid>
                        </Border>
                        <!--Z-->
                        <Border Grid.Column="2">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="1*"/>
                                    <RowDefinition Height="2*"/>
                                    <RowDefinition Height="5*"/>
                                </Grid.RowDefinitions>
                                <Border Grid.Row="0">
                                    <TextBlock Text="Z-axis" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="25" FontWeight="Bold" TextDecorations="{x:Null}" Foreground="#FF606060"/>
                                </Border>
                                <Border Grid.Row="1">
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="6*"/>
                                            <ColumnDefinition Width="1*"/>
                                        </Grid.ColumnDefinitions>
                                        <local:TipTextbox x:Name="ZaxisTextBox" Grid.Column="0" VerticalContentAlignment="Center" TipText="0" BorderThickness="0,0,0,6" BorderBrush="#FF51E818" FontSize="28" TextAlignment="Center" FontWeight="Bold"/>
                                        <TextBlock Text="g" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="25" FontWeight="Bold" TextDecorations="{x:Null}" Foreground="#FF606060"/>
                                    </Grid>
                                </Border>
                                <Border Grid.Row="2">
                                    <ProgressBar FontSize="36" Background="Transparent" Foreground="#EEB400FF" Maximum="16" Minimum="-16" SmallChange="0.01" Width="150" Height="150" Value="{Binding ElementName=ZaxisTextBox,Path=Text}" HorizontalAlignment="Left">
                                        <ProgressBar.Template>
                                            <ControlTemplate TargetType="ProgressBar">
                                                <ControlTemplate.Resources>
                                                    <local:PercentConverter x:Key="cvt"/>
                                                </ControlTemplate.Resources>
                                                <Grid>
                                                    <TextBlock Text="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},Path=Value,StringFormat=p0}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                                                    <ed:Arc StartAngle="0" EndAngle="360" ArcThickness="16" Stretch="None" Fill="{TemplateBinding Background}"/>
                                                    <ed:Arc StartAngle="0" ArcThickness="16" Stretch="None" ArcThicknessUnit="Pixel" Fill="{TemplateBinding Foreground}" EndAngle="{TemplateBinding Value,Converter={StaticResource cvt}}"/>
                                                </Grid>
                                            </ControlTemplate>
                                        </ProgressBar.Template>
                                    </ProgressBar>
                                </Border>
                            </Grid>
                        </Border>
                    </Grid>
                </Border>
                <Border Grid.Row="1">
                    <UniformGrid Name="Container2" Columns="8" Height="20" VerticalAlignment="Center">
                        <UniformGrid.Resources>
                            <Storyboard x:Key="MyAnimation">
                                <DoubleAnimation From="10" To="30" Duration="0:0:0.5" RepeatBehavior="Forever" AutoReverse="True" Storyboard.TargetProperty="Width"/>
                            </Storyboard>
                            <Style TargetType="Ellipse">
                                <Setter Property="Height" Value="5"/>
                                <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource Mode=Self},Path=Height}"/>
                                <Setter Property="Fill" Value="#FF5DE5DE"/>
                            </Style>
                        </UniformGrid.Resources>
                        <Ellipse/>
                        <Ellipse/>
                        <Ellipse/>
                        <Ellipse/>
                        <Ellipse/>
                        <Ellipse/>
                        <Ellipse/>
                        <Ellipse/>
                    </UniformGrid>
                </Border>
                <!--右下部分-->
                <Border Grid.Row="2" BorderThickness="6" BorderBrush="#FF00CDFF" CornerRadius="40" Padding="10">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="60"/>
                            <RowDefinition Height="60"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Canvas Grid.Row="0">
                            <Image Source="/picture/maliao.png" Canvas.Bottom="0" Canvas.Left="{Binding ElementName=MyBeautifulBar,Path=Value}" Height="50" Width="50"/>
                        </Canvas>
                        <Border Grid.Row="1" BorderThickness="2" Background="#FF52295D" CornerRadius="25" Margin="6">
                            <Border.BorderBrush>
                                <LinearGradientBrush EndPoint="1,1" StartPoint="0,1">
                                    <GradientStop Color="#4C7D99" Offset="0"/>
                                    <GradientStop Color="#69A3AE" Offset="1"/>
                                </LinearGradientBrush>
                            </Border.BorderBrush>
                            <ProgressBar x:Name="MyBeautifulBar" Height="40" Width="530" Value="0" Style="{DynamicResource ProgressBarStyle}" Background="{x:Null}" BorderBrush="{x:Null}" Margin="2" Maximum="500">
                                <ProgressBar.Foreground>
                                    <LinearGradientBrush EndPoint="1,1" StartPoint="0,1">
                                        <GradientStop Color="#74D6E9" Offset="0"/>
                                        <GradientStop Color="#8EF7A8" Offset="1"/>
                                    </LinearGradientBrush>
                                </ProgressBar.Foreground>
                            </ProgressBar>
                        </Border>
                        <Border Grid.Row="2">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="80"/>
                                    <ColumnDefinition Width="100"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Border Grid.Column="0">
                                    <TextBlock Text="总步数" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="25" FontWeight="Bold" TextDecorations="{x:Null}" Foreground="#FF606060"/>
                                </Border>
                                <Border Grid.Column="1">
                                    <TextBlock x:Name="StepNumberDisplay" Text="0" Foreground="#FF305368" FontSize="60" HorizontalAlignment="Right" VerticalAlignment="Center">
                                        <TextBlock.Effect>
                                            <DropShadowEffect Color="#37B6B8" ShadowDepth="0" Direction="0" BlurRadius="0"/>
                                        </TextBlock.Effect>
                                    </TextBlock>
                                </Border>
                                <Border Grid.Column="2">
                                    <!--<TextBox Name="ComWinTextBox" HorizontalScrollBarVisibility="Auto" TextChanged="ComWinTextBox_TextChanged"  ScrollViewer.VerticalScrollBarVisibility="Auto" Margin="2,5" BorderThickness="0"/>-->
                                    <Grid>
                                        <Border CornerRadius="12" Width="300" Height="70" Background="#EAEAEA">
                                            <Border.Effect>
                                                <DropShadowEffect Direction="135" Color="White" BlurRadius="10" Opacity="0.7"/>
                                            </Border.Effect>
                                        </Border>
                                        <Border CornerRadius="12" Width="300" Height="70" Background="#EAEAEA">
                                            <Border.Effect>
                                                <DropShadowEffect Color="#FFD4D4D4" BlurRadius="10" Opacity="0.7"/>
                                            </Border.Effect>
                                        </Border>
                                        <Border CornerRadius="12" Width="300" Height="70" Background="#EAEAEA">
                                            <UniformGrid Columns="4">
                                                <Button Name="PseudoMaterializedButton1" Click="PseudoMaterializedButton1_Click" Content="&#xf0A8;" Style="{DynamicResource ButtonStyleForMimic}"/>
                                                <Button Name="PseudoMaterializedButton2" Click="PseudoMaterializedButton2_Click" Content="&#xf0AA;" Style="{DynamicResource ButtonStyleForMimic}"/>
                                                <Button Name="PseudoMaterializedButton3" Click="PseudoMaterializedButton3_Click" Content="&#xf0AB;" Style="{DynamicResource ButtonStyleForMimic}"/>
                                                <Button Name="PseudoMaterializedButton4" Click="PseudoMaterializedButton4_Click" Content="&#xf0A9;" Style="{DynamicResource ButtonStyleForMimic}"/>
                                            </UniformGrid>
                                        </Border>
                                    </Grid>
                                </Border>
                            </Grid>
                        </Border>
                        <!--<Slider Value="-0.3" Minimum="-16" Maximum="16" SmallChange="0.01" Name="controller"/>-->
                    </Grid>
                </Border>
            </Grid>
        </Grid>
    </DockPanel>
</Window>