1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
<UserControl x:Class="Tango.Visuals.Fader"
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:components="clr-namespace:Tango.Visuals.Components"
xmlns:converters="clr-namespace:Tango.Visuals.Converters"
xmlns:local="clr-namespace:Tango.Visuals"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="65" Width="65" x:Name="fader" Foreground="White" FocusVisualStyle="{x:Null}" Focusable="True" IsTabStop="True" PreviewMouseDown="OnPreviewMouseDown" KeyDown="OnKeyDown" KeyUp="OnKeyUp">
<UserControl.Resources>
<converters:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"></converters:BooleanToVisibilityConverter>
<converters:DoubleTunerConverter x:Key="DoubleTunerConverter"></converters:DoubleTunerConverter>
<LinearGradientBrush x:Key="TrackBrush" StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="#101010" Offset="1"/>
<GradientStop Color="#FF252525" Offset="0.5"/>
<GradientStop Color="#FF181818" Offset="0" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="TrackHighlighBrush" StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="#FFFF2100" Offset="1"/>
<GradientStop Color="Black" Offset="0.5"/>
<GradientStop Color="#FFFF2100" Offset="0" />
</LinearGradientBrush>
<SolidColorBrush x:Key="TicksBrush" Color="DimGray"></SolidColorBrush>
<SolidColorBrush x:Key="BigTicksBrush" Color="Gray"></SolidColorBrush>
<DataTemplate x:Key="leftTickTemplate">
<Rectangle Width="{Binding RelativeSource={RelativeSource AncestorType=local:Fader},Path=TicksWidth,FallbackValue=8}" Height="1" Fill="{Binding RelativeSource={RelativeSource AncestorType=local:Fader},Path=TicksBrush,FallbackValue={StaticResource TicksBrush},TargetNullValue={StaticResource TicksBrush}}" HorizontalAlignment="Left"></Rectangle>
</DataTemplate>
<DataTemplate x:Key="leftBigTickTemplate">
<Rectangle Width="{Binding RelativeSource={RelativeSource AncestorType=local:Fader},Path=BigTicksWidth,FallbackValue=20}" Height="1" Fill="{Binding RelativeSource={RelativeSource AncestorType=local:Fader},Path=BigTicksBrush,FallbackValue={StaticResource BigTicksBrush},TargetNullValue={StaticResource BigTicksBrush}}" HorizontalAlignment="Left"></Rectangle>
</DataTemplate>
<DataTemplate x:Key="rightTickTemplate">
<Rectangle Width="{Binding RelativeSource={RelativeSource AncestorType=local:Fader},Path=TicksWidth,FallbackValue=8}" Height="1" Fill="{Binding RelativeSource={RelativeSource AncestorType=local:Fader},Path=TicksBrush,FallbackValue={StaticResource TicksBrush},TargetNullValue={StaticResource TicksBrush}}" HorizontalAlignment="Right"></Rectangle>
</DataTemplate>
<DataTemplate x:Key="rightBigTickTemplate">
<Rectangle Width="{Binding RelativeSource={RelativeSource AncestorType=local:Fader},Path=BigTicksWidth,FallbackValue=20}" Height="1" Fill="{Binding RelativeSource={RelativeSource AncestorType=local:Fader},Path=BigTicksBrush,FallbackValue={StaticResource BigTicksBrush},TargetNullValue={StaticResource BigTicksBrush}}" HorizontalAlignment="Left"></Rectangle>
</DataTemplate>
</UserControl.Resources>
<Grid>
<Border x:Name="border" Width="{Binding RelativeSource={RelativeSource AncestorType=local:Fader},Path=TrackWidth,FallbackValue=10}" Margin="0 35 0 35" CornerRadius="10" Background="{Binding ElementName=fader,Path=TrackBrush,FallbackValue={StaticResource TrackBrush},TargetNullValue={StaticResource TrackBrush}}"></Border>
<Border x:Name="borderHighLight" Visibility="{Binding RelativeSource={RelativeSource AncestorType=local:Fader},Path=HighlightTrack,Converter={StaticResource BooleanToVisibilityConverter}}" Width="{Binding RelativeSource={RelativeSource AncestorType=local:Fader},Path=TrackWidth,FallbackValue=8,Converter={StaticResource DoubleTunerConverter},ConverterParameter=-2}" Margin="0 38 0 38" VerticalAlignment="Bottom" CornerRadius="10" Background="{Binding ElementName=fader,Path=TrackHighlighBrush,FallbackValue={StaticResource TrackHighlighBrush},TargetNullValue={StaticResource TrackHighlighBrush}}"></Border>
<Grid Margin="0 10 0 10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="27*"/>
<ColumnDefinition Width="15"/>
<ColumnDefinition Width="28*"/>
</Grid.ColumnDefinitions>
<Grid Visibility="{Binding RelativeSource={RelativeSource AncestorType=local:Fader},Path=ShowTicks,Converter={StaticResource BooleanToVisibilityConverter}}">
<local:YAxisTicks TickTemplate="{StaticResource leftTickTemplate}" BigTickTemplate="{StaticResource leftBigTickTemplate}" Ticks="{Binding RelativeSource={RelativeSource AncestorType=local:Fader},Path=Ticks}" BigTickInterval="{Binding RelativeSource={RelativeSource AncestorType=local:Fader},Path=BigTicksInterval}" IsHitTestVisible="False">
</local:YAxisTicks>
</Grid>
<Grid Grid.Column="2" Visibility="{Binding RelativeSource={RelativeSource AncestorType=local:Fader},Path=ShowTicks,Converter={StaticResource BooleanToVisibilityConverter}}">
<local:YAxisTicks TickTemplate="{StaticResource rightTickTemplate}" BigTickTemplate="{StaticResource rightBigTickTemplate}" Ticks="{Binding RelativeSource={RelativeSource AncestorType=local:Fader},Path=Ticks}" BigTickInterval="{Binding RelativeSource={RelativeSource AncestorType=local:Fader},Path=BigTicksInterval}" IsHitTestVisible="False">
</local:YAxisTicks>
</Grid>
</Grid>
<Grid Width="{Binding RelativeSource={RelativeSource AncestorType=local:Fader},Path=FaderWidth,FallbackValue=40}" VerticalAlignment="Bottom" x:Name="gridThumb">
<Grid.RenderTransform>
<TranslateTransform x:Name="faderTranslate" Y="0"></TranslateTransform>
</Grid.RenderTransform>
<Image RenderOptions.BitmapScalingMode="Fant" Source="pack://application:,,,/Tango.Visuals;component/Fader/fader-dark.png"></Image>
<Grid>
<Grid.Background>
<SolidColorBrush Color="{Binding RelativeSource={RelativeSource AncestorType=local:Fader},Path=FaderColor,TargetNullValue=Transparent}" Opacity="0.3"></SolidColorBrush>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="35*"/>
<RowDefinition Height="4*"/>
<RowDefinition Height="35*"/>
</Grid.RowDefinitions>
<Rectangle Height="3" Grid.Row="1">
<Rectangle.Style>
<Style TargetType="Rectangle">
<Setter Property="Fill" Value="Transparent"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=thumbMove,Path=IsMouseOver}" Value="True">
<Setter Property="Fill" Value="{Binding RelativeSource={RelativeSource AncestorType=local:Fader},Path=FaderLightBrush,FallbackValue=#FF3100,TargetNullValue=#FF3100}"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=local:Fader},Path=IsKeyDown}" Value="True">
<Setter Property="Fill" Value="{Binding RelativeSource={RelativeSource AncestorType=local:Fader},Path=FaderLightBrush,FallbackValue=#FF3100,TargetNullValue=#FF3100}"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
</Grid>
<Thumb BorderThickness="0" DragDelta="OnThumbDrag" x:Name="thumbMove" Background="Black">
<Thumb.Style>
<Style TargetType="Thumb">
<Setter Property="Opacity" Value="0"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border BorderThickness="0" BorderBrush="{TemplateBinding Border.BorderBrush}" Background="{TemplateBinding Panel.Background}">
<Grid>
<Border BorderThickness="0" BorderBrush="{DynamicResource {x:Static SystemColors.ControlDarkDarkBrushKey}}" Background="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
<Border BorderThickness="0" BorderBrush="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}" Background="{DynamicResource {x:Static SystemColors.ControlLightLightBrushKey}}" Margin="1,1,1,1" />
<Border Background="{TemplateBinding Panel.Background}" Margin="0" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=local:Fader},Path=IsFocused}" Value="True">
<Setter Property="Opacity" Value="0.2"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Thumb.Style>
</Thumb>
</Grid>
</Grid>
</UserControl>
|
