drumkit-old/DrumKit/UI/DrumEditUI.xaml

<UserControl
    x:Class="DrumKit.DrumEditUI"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:DrumKit"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400"
    SizeChanged="DrumEditUl_SizeChanged">

    <UserControl.Resources>

        <!-- Translation thumb -->
        <SolidColorBrush x:Key="TranslationThumbBackgroundBrush" Color="Transparent" />
        
        <LinearGradientBrush x:Key="TranslationThumbBackgroundFocusedBrush" StartPoint="0,0" EndPoint="0,1">
            <GradientStop Color="#2fff" Offset="1" />
            <GradientStop Color="#5fff" Offset="0" />
        </LinearGradientBrush>

        <LinearGradientBrush x:Key="TranslationThumbBackgroundPressedBrush" StartPoint="0,0" EndPoint="0,1">
            <GradientStop Color="#1fff" Offset="1" />
            <GradientStop Color="#3fff" Offset="0" />
        </LinearGradientBrush>

        <LinearGradientBrush x:Key="TranslationThumbBorderBrush" StartPoint="0,0" EndPoint="0,1" >
            <GradientStop Color="#2fff" Offset="1" />
            <GradientStop Color="#5fff" Offset="0" />
        </LinearGradientBrush>

        <!-- Drum name background -->
        <LinearGradientBrush x:Key="DrumNameBackgroundBrush" StartPoint="0,0" EndPoint="0,1">
            <GradientStop Color="#0000" Offset="1" />
            <GradientStop Color="#2000" Offset="0.7" />
            <GradientStop Color="#a000" Offset="0" />
        </LinearGradientBrush>

        <!-- Round thumb -->
        <SolidColorBrush x:Key="RoundThumbBackgroundBrush" Color="WhiteSmoke" />
        <SolidColorBrush x:Key="RoundThumbBorderBrush" Color="LightGray" />
        <SolidColorBrush x:Key="RoundThumbForegroundBrush" Color="Gray" />
        
        <!-- Rotation thumb -->
        <SolidColorBrush x:Key="RotationTranslationThumbBackgroundBrush" Color="Coral" />
        <SolidColorBrush x:Key="RotationTranslationThumbBorderBrush" Color="LightCoral" />
        <SolidColorBrush x:Key="RotationDrumForegroundBrush" Color="Brown" />
        
        <!-- Translation thumb style -->
        <Style x:Name="TranslationThumbStyle" TargetType="Thumb">
            <Setter Property="Background" Value="{StaticResource TranslationThumbBackgroundBrush}" />
            <Setter Property="BorderBrush" Value="{StaticResource TranslationThumbBorderBrush}" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="VerticalAlignment" Value="Stretch" />
            <Setter Property="HorizontalAlignment" Value="Stretch" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Thumb">

                        <Grid>

                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" >
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="normalRectangle"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Duration="0" To="1" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="focusedRectangle"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Duration="0" To="1" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="pressedRectangle"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Duration="0" To="1" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

                            <Rectangle Name="normalRectangle"
                                    Fill="{TemplateBinding Background}" 
                                    Stroke="{TemplateBinding BorderBrush}"
                                    StrokeThickness="{TemplateBinding BorderThickness}"
                                    Opacity="0" />

                            <Rectangle Name="focusedRectangle"
                                    Fill="{StaticResource TranslationThumbBackgroundFocusedBrush}" 
                                    Stroke="{TemplateBinding BorderBrush}"
                                    StrokeThickness="{TemplateBinding BorderThickness}" 
                                    Opacity="0" />

                            <Rectangle Name="pressedRectangle"
                                    Fill="{StaticResource TranslationThumbBackgroundPressedBrush}" 
                                    Stroke="{TemplateBinding BorderBrush}"
                                    StrokeThickness="{TemplateBinding BorderThickness}"
                                    Opacity="0" />
                        </Grid>

                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- Round thumb style -->
        <Style x:Key="RoundThumbStyle" TargetType="Thumb">
            <Setter Property="Background" Value="{StaticResource RoundThumbBackgroundBrush}" />
            <Setter Property="BorderBrush" Value="{StaticResource RoundThumbBorderBrush}" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="Foreground" Value="{StaticResource RoundThumbForegroundBrush}" />
            <Setter Property="Height" Value="16" />
            <Setter Property="Width" Value="16" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Thumb">
                        <Grid>
                            <Ellipse 
                                 Fill="{TemplateBinding Background}" 
                                 Stroke="{TemplateBinding BorderBrush}"
                                 StrokeThickness="{TemplateBinding BorderThickness}" />

                            <TextBlock 
                                 Foreground="{TemplateBinding Foreground}"
                                 VerticalAlignment="Center"
                                 HorizontalAlignment="Center"
                                 Text="{TemplateBinding Tag}"/>

                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- Rotation thumb style -->
        <Style x:Key="RotationThumbStyle" TargetType="Thumb" BasedOn="{StaticResource RoundThumbStyle}" >
            <Setter Property="Background" Value="{StaticResource RotationTranslationThumbBackgroundBrush}" />
            <Setter Property="BorderBrush" Value="{StaticResource RotationTranslationThumbBorderBrush}" />
            <Setter Property="Foreground" Value="{StaticResource RotationDrumForegroundBrush}" />
            <Setter Property="FontFamily" Value="{StaticResource SymbolThemeFontFamily}" />
            <Setter Property="FontSize" Value="10" />
            <Setter Property="FontStyle" Value="Normal" />
            <Setter Property="Tag" Value="&#xe14a;" />
        </Style>

    </UserControl.Resources>

    <Grid>

        <Grid Name="rotateGrid" IsHitTestVisible="False">

            <Image Name="image" IsHitTestVisible="False"
                   HorizontalAlignment="Stretch" 
                   VerticalAlignment="Stretch" />

        </Grid>

        <Border HorizontalAlignment="Stretch"
                VerticalAlignment="Top" 
                IsHitTestVisible="False"
                Background="{StaticResource DrumNameBackgroundBrush}">

            <TextBlock 
                IsHitTestVisible="False"
                Name="nameText" HorizontalAlignment="Center"
                Style="{StaticResource TitleTextStyle}" 
                Margin="0,2,0,16"/>

        </Border>

        <Border BorderBrush="Black" BorderThickness="1">

            <Thumb
                Name="translationThumb"
                Style="{StaticResource TranslationThumbStyle}"
                DragDelta="translationThumb_DragDelta" />

        </Border>

        <Thumb 
            Name="rotationThumb"
            Style="{StaticResource RotationThumbStyle}" 
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            DragStarted="rotationThumb_DragStarted"
            DragDelta="rotationThumb_DragDelta" >

        </Thumb>

        <Thumb
            Name="scaleThumb" Grid.Row="1"
            Style="{StaticResource RoundThumbStyle}"
            HorizontalAlignment="Right"
            VerticalAlignment="Bottom"
            DragDelta="scaleThumb_DragDelta" >

            <Thumb.RenderTransform>
                <TranslateTransform X="8" Y="8" />
            </Thumb.RenderTransform>

        </Thumb>
    </Grid>

</UserControl>