BPASmartClient/BPASmartClient.CustomResource/UserControls/Cylinder.xaml

<UserControl
    x:Class="BPASmartClient.CustomResource.UserControls.Cylinder"
    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:local="clr-namespace:BPASmartClient.CustomResource.UserControls"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    d:DesignHeight="100"
    d:DesignWidth="389"
    mc:Ignorable="d">

    <UserControl.Resources>
        <SolidColorBrush x:Key="scb" Color="#FFB1B1B9" />
        <SolidColorBrush x:Key="scbs" Color="#FF6d6666" />

        <SineEase x:Key="SineEaseOut" EasingMode="EaseOut" />

        <Storyboard x:Key="AnimateRound" RepeatBehavior="Forever">
            <DoubleAnimation
                EasingFunction="{StaticResource SineEaseOut}"
                Storyboard.TargetName="Scale"
                Storyboard.TargetProperty="ScaleX"
                To="2"
                Duration="0:0:01" />
            <DoubleAnimation
                EasingFunction="{StaticResource SineEaseOut}"
                Storyboard.TargetName="Scale"
                Storyboard.TargetProperty="ScaleY"
                To="2"
                Duration="0:0:01" />
            <DoubleAnimation
                EasingFunction="{StaticResource SineEaseOut}"
                Storyboard.TargetProperty="Opacity"
                To="0"
                Duration="0:0:01" />
        </Storyboard>

        <Style x:Key="toggleButtonStyle" TargetType="ToggleButton">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Grid>
                            <Ellipse
                                Name="el"
                                Width="{TemplateBinding Width}"
                                Height="{TemplateBinding Height}"
                                Fill="Red"
                                RenderTransformOrigin="0.5,0.5">
                                <Ellipse.OpacityMask>
                                    <RadialGradientBrush>
                                        <GradientStop Offset="0" Color="Transparent" />
                                        <GradientStop Offset="1" Color="Black" />
                                    </RadialGradientBrush>
                                </Ellipse.OpacityMask>
                                <Ellipse.RenderTransform>
                                    <ScaleTransform x:Name="Scale" />
                                </Ellipse.RenderTransform>
                                <!--<Ellipse.Triggers>
                                    <EventTrigger RoutedEvent="Loaded">
                                        <BeginStoryboard Storyboard="{StaticResource AnimateRound}" />
                                    </EventTrigger>
                                </Ellipse.Triggers>-->
                            </Ellipse>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter TargetName="el" Property="Fill" Value="Green" />
                            </Trigger>
                            <Trigger Property="IsChecked" Value="False">
                                <Setter TargetName="el" Property="Fill" Value="red" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

    <Grid Name="cav">
        <Viewbox Width="auto" Height="auto">
            <Canvas
                Name="cv"
                Width="389"
                Height="100">
                <Path
                    Data="M2 30 L2 70"
                    Stroke="{StaticResource scb}"
                    StrokeThickness="4" />
                <Path
                    Data="M6 30 L6 70"
                    Stroke="{StaticResource scbs}"
                    StrokeThickness="4" />
                <Path
                    Data="M10 30 L10 70"
                    Stroke="{StaticResource scb}"
                    StrokeThickness="4" />
                <Path
                    Data="M14 30 L14 70"
                    Stroke="{StaticResource scbs}"
                    StrokeThickness="4" />
                <Path
                    Data="M18 30 L18 70"
                    Stroke="{StaticResource scb}"
                    StrokeThickness="4" />
                <Path
                    Data="M22 30 L22 70"
                    Stroke="{StaticResource scbs}"
                    StrokeThickness="4" />
                <Path
                    Data="M26 30 L26 70"
                    Stroke="{StaticResource scb}"
                    StrokeThickness="4" />
                <Path
                    Data="M30 30 L30 70"
                    Stroke="{StaticResource scbs}"
                    StrokeThickness="4" />
                <Path
                    Data="M34 30 L34 70"
                    Stroke="{StaticResource scb}"
                    StrokeThickness="4" />
                <Path
                    Data="M38 30 L38 70"
                    Stroke="{StaticResource scbs}"
                    StrokeThickness="4" />
                <Path
                    Data="M42 30 L42 70"
                    Stroke="{StaticResource scb}"
                    StrokeThickness="4" />
                <Path
                    Data="M46 30 L46 70"
                    Stroke="{StaticResource scbs}"
                    StrokeThickness="4" />
                <Path
                    Data="M50 30 L50 70"
                    Stroke="{StaticResource scb}"
                    StrokeThickness="4" />
                <Path
                    Data="M54 30 L54 70"
                    Stroke="{StaticResource scbs}"
                    StrokeThickness="4" />
                <Path
                    Data="M58 30 L58 70"
                    Stroke="{StaticResource scb}"
                    StrokeThickness="4" />
                <Path
                    Data="M62 30 L62 70"
                    Stroke="{StaticResource scbs}"
                    StrokeThickness="4" />
                <Path
                    Data="M64 30 L64 70"
                    Stroke="{StaticResource scb}"
                    StrokeThickness="4" />
                <Path
                    Data="M68 30 L68 70"
                    Stroke="{StaticResource scbs}"
                    StrokeThickness="4" />
                <Path
                    Data="M72 30 L72 70"
                    Stroke="{StaticResource scb}"
                    StrokeThickness="4" />
                <Path
                    Data="M76 30 L76 70"
                    Stroke="{StaticResource scbs}"
                    StrokeThickness="4" />
                <Path
                    Data="M80 30 L80 70"
                    Stroke="{StaticResource scb}"
                    StrokeThickness="4" />
                <Path
                    Data="M84 30 L84 70"
                    Stroke="{StaticResource scbs}"
                    StrokeThickness="4" />
                <Path
                    Data="M88 30 L88 70"
                    Stroke="{StaticResource scb}"
                    StrokeThickness="4" />
                <Path
                    Data="M92 30 L92 70"
                    Stroke="{StaticResource scbs}"
                    StrokeThickness="4" />
                <Path
                    Data="M102 30 L102 70"
                    Stroke="{StaticResource scbs}"
                    StrokeThickness="16" />
                <Path
                    Data="M50 20 L50 80"
                    Stroke="{StaticResource scb}"
                    StrokeThickness="20" />
                <Path
                    Data="M42,25 L58,25 60,30 60,45 58,50 60,55 60,70 58,75 42,75 40,70 40,55 42,50 40,45 40,30 42,25"
                    Stroke="{StaticResource scbs}"
                    StrokeThickness="1" />
                <Path
                    Data="M42 50 L58 50"
                    Stroke="{StaticResource scbs}"
                    StrokeThickness="1" />


                <Path Data="M110 0 L110,100 160,100 175,80 300 ,80 315,100 365,100 365,0 315,0 300,20 175,20 160,0 110,0">
                    <Path.Fill>
                        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                            <GradientStop Color="#FF1EDEDA" />
                            <GradientStop Offset="1" Color="#FF1EDEDA" />
                            <GradientStop Offset="0.5" Color="#FFDDEAE9" />
                        </LinearGradientBrush>
                    </Path.Fill>
                </Path>

                <Path
                    Data="M110 30 L160,30 A2,5 0 1 1 160,70 L110,70"
                    Stroke="{StaticResource scb}"
                    StrokeThickness="2" />
                <Path
                    Data="M160 0 L160,30"
                    Stroke="{StaticResource scb}"
                    StrokeThickness="2" />
                <Path
                    Data="M160 70 L160,100"
                    Stroke="{StaticResource scb}"
                    StrokeThickness="2" />
                <Path
                    Data="M175 20 L175,80"
                    Stroke="{StaticResource scb}"
                    StrokeThickness="2" />
                <Path
                    Data="M179 20 L179,80"
                    Stroke="{StaticResource scb}"
                    StrokeThickness="2" />
                <Path
                    Data="M183 20 L183,80"
                    Stroke="{StaticResource scb}"
                    StrokeThickness="2" />
                <Path
                    Data="M187 20 L187,80"
                    Stroke="{StaticResource scb}"
                    StrokeThickness="2" />

                <Path
                    Data="M365 30 L315,30 A2,5 0 1 0 315,70 L365,70"
                    Stroke="{StaticResource scb}"
                    StrokeThickness="2" />
                <Path
                    Data="M315 0 L315,30"
                    Stroke="{StaticResource scb}"
                    StrokeThickness="2" />
                <Path
                    Data="M315 70 L315,100"
                    Stroke="{StaticResource scb}"
                    StrokeThickness="2" />
                <Path
                    Data="M300 20 L300,80"
                    Stroke="{StaticResource scb}"
                    StrokeThickness="2" />
                <Path
                    Data="M296 20 L296,80"
                    Stroke="{StaticResource scb}"
                    StrokeThickness="2" />
                <Path
                    Data="M292 20 L292,80"
                    Stroke="{StaticResource scb}"
                    StrokeThickness="2" />
                <Path
                    Data="M288 20 L288,80"
                    Stroke="{StaticResource scb}"
                    StrokeThickness="2" />


                <Path
                    Data="M367 20 L367 80"
                    Stroke="{StaticResource scb}"
                    StrokeThickness="4" />
                <Path
                    Data="M371 20 L371 80"
                    Stroke="{StaticResource scbs}"
                    StrokeThickness="4" />
                <Path
                    Data="M375 20 L375 80"
                    Stroke="{StaticResource scb}"
                    StrokeThickness="4" />
                <Path
                    Data="M379 20 L379 80"
                    Stroke="{StaticResource scbs}"
                    StrokeThickness="4" />
                <Path
                    Data="M383 20 L383 80"
                    Stroke="{StaticResource scb}"
                    StrokeThickness="4" />
                <Path
                    Data="M387 20 L387 80"
                    Stroke="{StaticResource scbs}"
                    StrokeThickness="4" />

                <ToggleButton
                    Name="LeftTog"
                    Width="30"
                    Height="30"
                    Margin="120,35,0,0"
                    HorizontalAlignment="Left"
                    IsEnabled="False"
                    Style="{StaticResource toggleButtonStyle}" />

                <ToggleButton
                    Name="RightTog"
                    Width="30"
                    Height="30"
                    Margin="325,35,0,0"
                    HorizontalAlignment="Left"
                    IsEnabled="False"
                    Style="{StaticResource toggleButtonStyle}" />

                <!--<Ellipse
                    Width="30"
                    Height="30"
                    Margin="120,35,0,0"
                    HorizontalAlignment="Left"
                    Fill="Red" />-->

                <!--<Ellipse
                    Width="30"
                    Height="30"
                    Margin="325,35,0,0"
                    HorizontalAlignment="Left"
                    Fill="Red" />-->

            </Canvas>
        </Viewbox>
    </Grid>

</UserControl>