<UserControl x:Class="MaterialWPF.Slider"
             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:MaterialWPF"
             mc:Ignorable="d" 
             PreviewMouseMove="Thumb_PreviewMouseMove"
             d:DesignHeight="128" d:DesignWidth="300">
    <Grid >
        <Grid x:Name="Bg" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Background="#BDBDBD" Height="5" Margin="25,0,25,10">

            <Grid x:Name="Progress" Margin="-2,-2,0,-2" Background="#1abc9c" HorizontalAlignment="Left" VerticalAlignment="Center" Height="5" Width="5"/>

        </Grid>
        <Grid x:Name="ValueLabel" Width="64" Height="64"  VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="-1,-4,0,4">
            <Path x:Name="TearPath"  Fill="#1abc9c" HorizontalAlignment="Center" VerticalAlignment="Center"  StrokeThickness="3" 
Data="F1 M 419.365,167.301C 509.967,257.903 509.967,404.797 419.365,495.399C 328.764,586 181.869,586 91.268,495.399C 0.666646,404.797 0.666646,257.903 91.268,167.301L 255.316,0.684082L 419.365,167.301 Z" Stretch="Fill" Margin="45.669,44.666,-45.67,-44.667">
                <Path.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform ScaleY="0.5" ScaleX="0.4"/>
                        <SkewTransform/>
                        <RotateTransform Angle="180"/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Path.RenderTransform>
            </Path>
            <TextBlock x:Name="Val" FontSize="10"  Foreground="White" Text="100" VerticalAlignment="Center" HorizontalAlignment="Center" TextAlignment="Center" Margin="23,20,22,32" FontFamily="/MaterialWPF;component/Fonts/Roboto/#Roboto" Width="19"/>
        </Grid>
        <Grid x:Name="ThumbMove" >
            <Ellipse x:Name="Ripple" Fill="Black" HorizontalAlignment="Left" VerticalAlignment="Top" Height="35" Width="35" Margin="15,34,0,-5">
                <Ellipse.RenderTransform>
                    <ScaleTransform x:Name="scale2" ScaleX="0" ScaleY="0"/>
                </Ellipse.RenderTransform>
            </Ellipse>
            <Ellipse x:Name="Thumb" Margin="25,0,0,5"  HorizontalAlignment="Left" VerticalAlignment="Bottom" Height="15" Width="15" Fill="#1abc9c" MouseUp="Thumb_OnMouseUp" MouseDown="Thumb_MouseDown" SizeChanged="Thumb_SizeChanged"  >
                <Ellipse.RenderTransform>
                    <ScaleTransform x:Name="scale"/>
                </Ellipse.RenderTransform>
            </Ellipse>

        </Grid>
    </Grid>
</UserControl>
