Skip to content

Commit a648890

Browse files
ButchersBoyButchersBoy
committed
mahapps range slider style
1 parent 4e5f853 commit a648890

File tree

6 files changed

+233
-16
lines changed

6 files changed

+233
-16
lines changed

‎MahMaterialDragablzMashUp/App.xaml

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,7 @@
2222
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />
2323

2424
<!-- Material Design: MahApps Compatibility -->
25-
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.MahApps;component/Themes/MaterialDesignTheme.MahApps.Fonts.xaml" />
26-
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.MahApps;component/Themes/MaterialDesignTheme.MahApps.Flyout.xaml" />
25+
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.MahApps;component/Themes/MaterialDesignTheme.MahApps.Defaults.xaml "/>
2726

2827
<!-- Dragablz Material Design -->
2928
<ResourceDictionary Source="pack://application:,,,/Dragablz;component/Themes/materialdesign.xaml"/>

‎MahMaterialDragablzMashUp/Mah.xaml

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
d:DesignHeight="300" d:DesignWidth="300">
99
<StackPanel>
1010
<TextBlock TextWrapping="Wrap">All controls using MahApps themes, will use Material Design pallete.</TextBlock>
11-
<CheckBox Margin="0 8 0 0">CheckBox</CheckBox>
1211
<ListBox Margin="0 8 0 0">
1312
<ListBoxItem IsSelected="True">MahApps</ListBoxItem>
1413
<ListBoxItem>Dragablz</ListBoxItem>
@@ -17,5 +16,7 @@
1716
<controls:ToggleSwitch IsChecked="True" HorizontalAlignment="Left" />
1817
<Button Width="100" Margin="0 8 0 0" Content="Nice" HorizontalAlignment="Left"
1918
Style="{DynamicResource AccentedSquareButtonStyle}" />
19+
<controls:RangeSlider Margin="0 16 0 0" LowerValue="25" UpperValue="75" />
20+
<controls:RangeSlider Margin="0 16 0 0" LowerValue="25" UpperValue="75" Orientation="Vertical" Height="200" />
2021
</StackPanel>
2122
</UserControl>

‎MaterialDesignThemes.MahApps/MaterialDesignThemes.MahApps.csproj

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,10 @@
5757
<Reference Include="PresentationFramework" />
5858
</ItemGroup>
5959
<ItemGroup>
60+
<Page Include="Themes\MaterialDesignTheme.MahApps.Defaults.xaml">
61+
<SubType>Designer</SubType>
62+
<Generator>MSBuild:Compile</Generator>
63+
</Page>
6064
<Page Include="Themes\MaterialDesignTheme.MahApps.Dialogs.xaml">
6165
<SubType>Designer</SubType>
6266
<Generator>MSBuild:Compile</Generator>
@@ -69,6 +73,10 @@
6973
<SubType>Designer</SubType>
7074
<Generator>MSBuild:Compile</Generator>
7175
</Page>
76+
<Page Include="Themes\MaterialDesignTheme.MahApps.RangeSlider.xaml">
77+
<SubType>Designer</SubType>
78+
<Generator>MSBuild:Compile</Generator>
79+
</Page>
7280
</ItemGroup>
7381
<ItemGroup>
7482
<Compile Include="Properties\AssemblyInfo.cs">

‎MaterialDesignThemes.MahApps/Themes/MaterialDesignTheme.MahApps.Defaults.xaml

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
2+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
3+
xmlns:local="clr-namespace:MaterialDesignThemes.MahApps.Themes"
4+
xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls">
5+
6+
<ResourceDictionary.MergedDictionaries>
7+
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.MahApps;component/Themes/MaterialDesignTheme.MahApps.Fonts.xaml" />
8+
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.MahApps;component/Themes/MaterialDesignTheme.MahApps.Flyout.xaml" />
9+
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.MahApps;component/Themes/MaterialDesignTheme.MahApps.RangeSlider.xaml" />
10+
</ResourceDictionary.MergedDictionaries>
11+
12+
<Style TargetType="{x:Type controls:RangeSlider}" BasedOn="{StaticResource MaterialDesignRangeSlider}" />
13+
</ResourceDictionary>

‎MaterialDesignThemes.MahApps/Themes/MaterialDesignTheme.MahApps.RangeSlider.xaml

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
2+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
3+
xmlns:local="clr-namespace:MaterialDesignThemes.MahApps.Themes"
4+
xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls">
5+
6+
<ResourceDictionary.MergedDictionaries>
7+
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Slider.xaml" />
8+
</ResourceDictionary.MergedDictionaries>
9+
10+
<ControlTemplate x:Key="MaterialDesignMahAppsRangeSliderHorizontal"
11+
TargetType="controls:RangeSlider">
12+
<StackPanel Name="PART_Container"
13+
Orientation="Vertical"
14+
HorizontalAlignment="Stretch"
15+
VerticalAlignment="Center">
16+
<TickBar Name="PART_TopTick"
17+
Placement="Top"
18+
Fill="{TemplateBinding Foreground}"
19+
TickFrequency="{TemplateBinding TickFrequency}"
20+
Minimum="{TemplateBinding Minimum}"
21+
Maximum="{TemplateBinding Maximum}"
22+
Height="4"
23+
Margin="5,0,5,2"
24+
Visibility="Collapsed" />
25+
<StackPanel Name="PART_RangeSliderContainer"
26+
Background="Transparent"
27+
Orientation="Horizontal"
28+
HorizontalAlignment="Stretch"
29+
VerticalAlignment="Center"
30+
Panel.ZIndex="1">
31+
<RepeatButton Name="PART_LeftEdge"
32+
Background="{DynamicResource MaterialDesignCheckBoxOff}"
33+
Height="2"
34+
Style="{DynamicResource HorizontalTrackLargeDecrease}" />
35+
<Thumb Name="PART_LeftThumb"
36+
Cursor="Arrow"
37+
Foreground="{DynamicResource PrimaryHueMidBrush}"
38+
Template="{StaticResource MaterialDesignSliderThumb}"
39+
Panel.ZIndex="1"/>
40+
<Thumb Name="PART_MiddleThumb"
41+
Cursor="Hand"
42+
MinWidth="{TemplateBinding MinRangeWidth}">
43+
<Thumb.Style>
44+
<Style TargetType="Thumb">
45+
<Setter Property="Template">
46+
<Setter.Value>
47+
<ControlTemplate>
48+
<Rectangle Height="2"
49+
Margin="0,0,0,0"
50+
Fill="{DynamicResource PrimaryHueMidBrush}" />
51+
</ControlTemplate>
52+
</Setter.Value>
53+
</Setter>
54+
</Style>
55+
</Thumb.Style>
56+
</Thumb>
57+
<Thumb Name="PART_RightThumb"
58+
Cursor="Arrow"
59+
Foreground="{DynamicResource PrimaryHueMidBrush}"
60+
Template="{StaticResource MaterialDesignSliderThumb}"
61+
Panel.ZIndex="1"/>
62+
<RepeatButton Name="PART_RightEdge"
63+
Height="2"
64+
Background="{DynamicResource MaterialDesignCheckBoxOff}"
65+
Style="{DynamicResource HorizontalTrackLargeDecrease}" />
66+
</StackPanel>
67+
<TickBar Name="PART_BottomTick"
68+
Fill="{TemplateBinding Foreground}"
69+
Placement="Top"
70+
TickFrequency="{TemplateBinding TickFrequency}"
71+
Minimum="{TemplateBinding Minimum}"
72+
Maximum="{TemplateBinding Maximum}"
73+
Height="4"
74+
Margin="5,2,5,0"
75+
Visibility="Collapsed" />
76+
</StackPanel>
77+
<ControlTemplate.Triggers>
78+
<Trigger Property="TickPlacement" Value="TopLeft">
79+
<Setter Property="Visibility" TargetName="PART_TopTick" Value="Visible" />
80+
</Trigger>
81+
<Trigger Property="TickPlacement" Value="BottomRight">
82+
<Setter Property="Visibility" TargetName="PART_BottomTick" Value="Visible" />
83+
</Trigger>
84+
<Trigger Property="TickPlacement" Value="Both">
85+
<Setter Property="Visibility" TargetName="PART_TopTick" Value="Visible" />
86+
<Setter Property="Visibility" TargetName="PART_BottomTick" Value="Visible" />
87+
</Trigger>
88+
</ControlTemplate.Triggers>
89+
</ControlTemplate>
90+
91+
<ControlTemplate x:Key="MaterialDesignRangeSliderVertical"
92+
TargetType="controls:RangeSlider">
93+
<StackPanel Name="PART_Container"
94+
Orientation="Horizontal"
95+
HorizontalAlignment="Center"
96+
VerticalAlignment="Stretch">
97+
<TickBar Name="PART_TopTick"
98+
Placement="Left"
99+
Fill="{TemplateBinding Foreground}"
100+
TickFrequency="{TemplateBinding TickFrequency}"
101+
Minimum="{TemplateBinding Minimum}"
102+
Maximum="{TemplateBinding Maximum}"
103+
Width="4"
104+
Margin="0,5,2,5"
105+
Visibility="Collapsed" />
106+
<StackPanel Orientation="Vertical"
107+
HorizontalAlignment="Center"
108+
VerticalAlignment="Stretch"
109+
Background="Transparent"
110+
Name="PART_RangeSliderContainer"
111+
Panel.ZIndex="1">
112+
<RepeatButton Name="PART_RightEdge"
113+
VerticalAlignment="Stretch"
114+
Background="{DynamicResource MaterialDesignCheckBoxOff}"
115+
Width="2"
116+
Style="{DynamicResource VerticalTrackLargeDecrease}" />
117+
<Thumb Name="PART_RightThumb"
118+
Cursor="Arrow"
119+
Foreground="{DynamicResource PrimaryHueMidBrush}"
120+
Template="{StaticResource MaterialDesignSliderThumb}"
121+
Panel.ZIndex="1" />
122+
123+
<Thumb Name="PART_MiddleThumb"
124+
Cursor="Hand"
125+
MinHeight="{TemplateBinding MinRangeWidth}">
126+
<Thumb.Style>
127+
<Style TargetType="Thumb">
128+
<Setter Property="Template">
129+
<Setter.Value>
130+
<ControlTemplate>
131+
<Rectangle Width="2"
132+
Margin="0,0,0,0"
133+
Fill="{DynamicResource PrimaryHueMidBrush}" />
134+
</ControlTemplate>
135+
</Setter.Value>
136+
</Setter>
137+
</Style>
138+
</Thumb.Style>
139+
</Thumb>
140+
141+
<Thumb Name="PART_LeftThumb"
142+
Cursor="Arrow"
143+
Foreground="{DynamicResource PrimaryHueMidBrush}"
144+
Template="{StaticResource MaterialDesignSliderThumb}"
145+
Panel.ZIndex="1" />
146+
<RepeatButton Name="PART_LeftEdge"
147+
Width="2"
148+
Background="{DynamicResource MaterialDesignCheckBoxOff}"
149+
Style="{DynamicResource VerticalTrackLargeDecrease}" />
150+
</StackPanel>
151+
<TickBar Name="PART_BottomTick"
152+
Fill="{TemplateBinding Foreground}"
153+
TickFrequency="{TemplateBinding TickFrequency}"
154+
Minimum="{TemplateBinding Minimum}"
155+
Maximum="{TemplateBinding Maximum}"
156+
Placement="Right"
157+
Width="4"
158+
Margin="2,5,0,5"
159+
Visibility="Collapsed" />
160+
</StackPanel>
161+
<ControlTemplate.Triggers>
162+
<Trigger Property="TickPlacement"
163+
Value="TopLeft">
164+
<Setter Property="Visibility"
165+
TargetName="PART_TopTick"
166+
Value="Visible" />
167+
</Trigger>
168+
<Trigger Property="TickPlacement"
169+
Value="BottomRight">
170+
<Setter Property="Visibility"
171+
TargetName="PART_BottomTick"
172+
Value="Visible" />
173+
</Trigger>
174+
<Trigger Property="TickPlacement"
175+
Value="Both">
176+
<Setter Property="Visibility"
177+
TargetName="PART_TopTick"
178+
Value="Visible" />
179+
<Setter Property="Visibility"
180+
TargetName="PART_BottomTick"
181+
Value="Visible" />
182+
</Trigger>
183+
</ControlTemplate.Triggers>
184+
</ControlTemplate>
185+
186+
<Style TargetType="{x:Type controls:RangeSlider}" x:Key="MaterialDesignRangeSlider">
187+
<Setter Property="Background" Value="Transparent" />
188+
<Setter Property="Template" Value="{StaticResource MaterialDesignMahAppsRangeSliderHorizontal}" />
189+
<Style.Triggers>
190+
<Trigger Property="Orientation" Value="Vertical">
191+
<Setter Property="Template" Value="{StaticResource MaterialDesignRangeSliderVertical}" />
192+
</Trigger>
193+
</Style.Triggers>
194+
</Style>
195+
196+
</ResourceDictionary>

‎MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Slider.xaml

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
22
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
33

4-
<Style x:Key="HorizontalTrackRepeatButton" TargetType="{x:Type RepeatButton}">
4+
<Style x:Key="MaterialDesignHorizontalTrackRepeatButton" TargetType="{x:Type RepeatButton}">
55
<Setter Property="OverridesDefaultStyle" Value="true"/>
66
<Setter Property="Background" Value="Transparent"/>
77
<Setter Property="Focusable" Value="false"/>
@@ -18,7 +18,7 @@
1818
</Setter.Value>
1919
</Setter>
2020
</Style>
21-
<Style x:Key="VerticalTrackRepeatButton" TargetType="{x:Type RepeatButton}">
21+
<Style x:Key="MaterialDesignVerticalTrackRepeatButton" TargetType="{x:Type RepeatButton}">
2222
<Setter Property="OverridesDefaultStyle" Value="true"/>
2323
<Setter Property="Background" Value="Transparent"/>
2424
<Setter Property="Focusable" Value="false"/>
@@ -35,7 +35,7 @@
3535
</Setter.Value>
3636
</Setter>
3737
</Style>
38-
<ControlTemplate x:Key="SliderThumb" TargetType="{x:Type Thumb}">
38+
<ControlTemplate x:Key="MaterialDesignSliderThumb" TargetType="{x:Type Thumb}">
3939
<Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center">
4040
<Ellipse x:Name="shadow"
4141
Width="24" Height="24" Margin="-12"
@@ -124,7 +124,7 @@
124124
</Trigger>
125125
</ControlTemplate.Triggers>
126126
</ControlTemplate>
127-
<ControlTemplate x:Key="SliderHorizontal" TargetType="{x:Type Slider}">
127+
<ControlTemplate x:Key="MaterialDesignSliderHorizontal" TargetType="{x:Type Slider}">
128128
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
129129
<Grid>
130130
<Grid.RowDefinitions>
@@ -137,14 +137,14 @@
137137
<Rectangle x:Name="PART_SelectionRange" Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" Height="4.0" Visibility="Hidden" Grid.Row="1" />
138138
<Track x:Name="PART_Track" Grid.Row="1" OpacityMask="{x:Null}">
139139
<Track.DecreaseRepeatButton>
140-
<RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource HorizontalTrackRepeatButton}" Background="{TemplateBinding Foreground}" />
140+
<RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource MaterialDesignHorizontalTrackRepeatButton}" Background="{TemplateBinding Foreground}" />
141141
</Track.DecreaseRepeatButton>
142142
<Track.IncreaseRepeatButton>
143-
<RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource HorizontalTrackRepeatButton}" Background="{DynamicResource MaterialDesignCheckBoxOff}"
143+
<RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource MaterialDesignHorizontalTrackRepeatButton}" Background="{DynamicResource MaterialDesignCheckBoxOff}"
144144
x:Name="IncreaseRepeatButton" />
145145
</Track.IncreaseRepeatButton>
146146
<Track.Thumb>
147-
<Thumb x:Name="Thumb" Focusable="False" Height="18" OverridesDefaultStyle="True" Template="{StaticResource SliderThumb}"
147+
<Thumb x:Name="Thumb" Focusable="False" Height="18" OverridesDefaultStyle="True" Template="{StaticResource MaterialDesignSliderThumb}"
148148
VerticalAlignment="Center" Width="12"/>
149149
</Track.Thumb>
150150
</Track>
@@ -169,7 +169,7 @@
169169
</Trigger>
170170
</ControlTemplate.Triggers>
171171
</ControlTemplate>
172-
<ControlTemplate x:Key="SliderVertical" TargetType="{x:Type Slider}">
172+
<ControlTemplate x:Key="MaterialDesignSliderVertical" TargetType="{x:Type Slider}">
173173
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
174174
<Grid>
175175
<Grid.ColumnDefinitions>
@@ -182,14 +182,14 @@
182182
<Rectangle x:Name="PART_SelectionRange" Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" Height="4.0" Visibility="Hidden" Grid.Column="1" />
183183
<Track x:Name="PART_Track" Grid.Column="1">
184184
<Track.DecreaseRepeatButton>
185-
<RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource VerticalTrackRepeatButton}" Background="{TemplateBinding Foreground}"/>
185+
<RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource MaterialDesignVerticalTrackRepeatButton}" Background="{TemplateBinding Foreground}"/>
186186
</Track.DecreaseRepeatButton>
187187
<Track.IncreaseRepeatButton>
188-
<RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource VerticalTrackRepeatButton}" Background="{DynamicResource MaterialDesignCheckBoxOff}"
188+
<RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource MaterialDesignVerticalTrackRepeatButton}" Background="{DynamicResource MaterialDesignCheckBoxOff}"
189189
x:Name="IncreaseRepeatButton" />
190190
</Track.IncreaseRepeatButton>
191191
<Track.Thumb>
192-
<Thumb x:Name="Thumb" Focusable="False" Height="12" OverridesDefaultStyle="True" Template="{StaticResource SliderThumb}" VerticalAlignment="Top" Width="18"/>
192+
<Thumb x:Name="Thumb" Focusable="False" Height="12" OverridesDefaultStyle="True" Template="{StaticResource MaterialDesignSliderThumb}" VerticalAlignment="Top" Width="18"/>
193193
</Track.Thumb>
194194
</Track>
195195
</Grid>
@@ -218,10 +218,10 @@
218218
<Setter Property="Background" Value="Transparent"/>
219219
<Setter Property="BorderBrush" Value="Transparent"/>
220220
<Setter Property="Foreground" Value="{DynamicResource PrimaryHueMidBrush}"/>
221-
<Setter Property="Template" Value="{StaticResource SliderHorizontal}"/>
221+
<Setter Property="Template" Value="{StaticResource MaterialDesignSliderHorizontal}"/>
222222
<Style.Triggers>
223223
<Trigger Property="Orientation" Value="Vertical">
224-
<Setter Property="Template" Value="{StaticResource SliderVertical}"/>
224+
<Setter Property="Template" Value="{StaticResource MaterialDesignSliderVertical}"/>
225225
</Trigger>
226226
<Trigger Property="IsEnabled" Value="False">
227227
<Setter Property="Foreground" Value="{DynamicResource MaterialDesignCheckBoxDisabled}" />

0 commit comments

Comments
 (0)