WindowsCommunityToolkit/Microsoft.Toolkit.Uwp.UI.Controls.Input/RangeSelector/RangeSelector.xaml at b061bb6b5c4d91d81b14e4feddf56a28780cf2b1 · CommunityToolkit/WindowsCommunityToolkit · GitHub

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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls">

    <Style x:Key="RangeThumbStyle"
           TargetType="controls:RangeThumb">
        <Setter Property="UseSystemFocusVisuals" Value="True" />
        <Setter Property="Height" Value="24" />
        <Setter Property="Width" Value="8" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="controls:RangeThumb">
                    <Thumb x:Name="InternalThumb"
                           Style="{StaticResource SliderThumbStyle}" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="SliderThumbStyle"
           TargetType="Thumb">
        <Setter Property="UseSystemFocusVisuals" Value="True" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="Background" Value="{ThemeResource SliderThumbBackground}" />
        <Setter Property="Height" Value="24" />
        <Setter Property="Width" Value="8" />
        <Setter Property="FocusVisualMargin" Value="-14,-6,-14,-6" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Thumb">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="4" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="controls:RangeSelector">
        <Setter Property="Background" Value="{ThemeResource SliderTrackFill}" />
        <Setter Property="BorderThickness" Value="{ThemeResource SliderBorderThemeThickness}" />
        <Setter Property="Foreground" Value="{ThemeResource SliderTrackValueFill}" />
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
        <Setter Property="VerticalAlignment" Value="Top" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="controls:RangeSelector">
                    <Grid x:Name="ControlGrid"
                          Height="24">

                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="MinPressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MinThumb"
                                                                       Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlHighlightChromeHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>

                                <VisualState x:Name="MaxPressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaxThumb"
                                                                       Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlHighlightChromeHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundElement"
                                                                       Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ActiveRectangle"
                                                                       Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MinThumb"
                                                                       Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlDisabledChromeDisabledHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaxThumb"
                                                                       Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlDisabledChromeDisabledHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>

                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundElement"
                                                                       Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MinThumb"
                                                                       Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlHighlightChromeAltLowBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MaxThumb"
                                                                       Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlHighlightChromeAltLowBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>

                        <Border x:Name="OutOfRangeContentContainer"
                                Grid.Column="1"
                                Background="Transparent">
                            <Rectangle x:Name="BackgroundElement"
                                       Height="2"
                                       Fill="{TemplateBinding Background}" />
                        </Border>

                        <Canvas x:Name="ContainerCanvas"
                                Grid.Column="1"
                                Background="Transparent">
                            <Rectangle x:Name="ActiveRectangle"
                                       Height="2"
                                       HorizontalAlignment="Stretch"
                                       VerticalAlignment="Center"
                                       Fill="{TemplateBinding Foreground}" />

                            <Grid x:Name="ToolTip"
                                  Margin="0,-44,0,8"
                                  Background="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}"
                                  BorderBrush="{ThemeResource SystemControlForegroundChromeHighBrush}"
                                  BorderThickness="1"
                                  Visibility="Collapsed">
                                <TextBlock x:Name="ToolTipText"
                                           Margin="8"
                                           Foreground="{ThemeResource SystemControlForegroundBaseHighBrush}" />
                            </Grid>

                            <controls:RangeThumb x:Name="MinThumb"
                                                 AutomationProperties.Name="Min thumb"
                                                 IsTabStop="True"
                                                 Maximum="{Binding Maximum, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                                                 Minimum="{Binding Minimum, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                                                 Style="{StaticResource RangeThumbStyle}"
                                                 TabIndex="0"
                                                 Value="{Binding RangeStart, RelativeSource={RelativeSource Mode=TemplatedParent}}" />

                            <controls:RangeThumb x:Name="MaxThumb"
                                                 AutomationProperties.Name="Max thumb"
                                                 IsTabStop="True"
                                                 Maximum="{Binding Maximum, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                                                 Minimum="{Binding Minimum, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                                                 Style="{StaticResource RangeThumbStyle}"
                                                 TabIndex="1"
                                                 Value="{Binding RangeEnd, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
                        </Canvas>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>