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
|
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:converters="clr-namespace:Tango.SharedUI.Converters;assembly=Tango.SharedUI"
xmlns:components="clr-namespace:Tango.Touch.Components"
xmlns:fa="http://schemas.fontawesome.io/icons/"
xmlns:local="clr-namespace:Tango.Touch.Controls">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="../Resources/Colors.xaml" />
<ResourceDictionary>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
<converters:BooleanToVisibilityInverseConverter x:Key="BooleanToVisibilityInverseConverter"/>
</ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
<Style TargetType="{x:Type local:TouchToggleSlider}">
<Setter Property="Background" Value="Transparent"></Setter>
<Setter Property="Foreground" Value="{StaticResource TangoPrimaryAccentBrush}"></Setter>
<Setter Property="UncheckedBackground" Value="Transparent"></Setter>
<Setter Property="CheckedBackground" Value="Transparent"></Setter>
<Setter Property="Height" Value="40"></Setter>
<Setter Property="CornerRadius" Value="20"></Setter>
<Setter Property="BorderThickness" Value="2"></Setter>
<Setter Property="BorderBrush" Value="{StaticResource TangoPrimaryAccentBrush}"></Setter>
<Setter Property="ThumbBrush" Value="{StaticResource TangoPrimaryAccentBrush}"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:TouchToggleSlider}">
<Border>
<components:Ripple CornerRadius="{TemplateBinding CornerRadius}" Centered="True" RippleBrush="{StaticResource TangoRippleDarkBrush}">
<Border
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}">
<Border.Style>
<Style TargetType="Border">
<Setter Property="Background" Value="{Binding RelativeSource={RelativeSource AncestorType=local:TouchToggleSlider},Path=UncheckedBackground}"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=local:TouchToggleSlider},Path=IsChecked}" Value="True">
<Setter Property="Background" Value="{Binding RelativeSource={RelativeSource AncestorType=local:TouchToggleSlider},Path=CheckedBackground}"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Center" Visibility="{Binding RelativeSource={RelativeSource AncestorType=local:TouchToggleSlider},Path=IsChecked,Converter={StaticResource BooleanToVisibilityInverseConverter}}">
<ContentPresenter Content="{TemplateBinding UncheckedContent}" />
</Grid>
<Grid Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Center" Visibility="{Binding RelativeSource={RelativeSource AncestorType=local:TouchToggleSlider},Path=IsChecked,Converter={StaticResource BooleanToVisibilityConverter}}">
<ContentPresenter Content="{TemplateBinding CheckedContent}" />
</Grid>
</Grid>
<Grid HorizontalAlignment="Left" x:Name="PART_GridEllipse">
<Grid Margin="4" x:Name="ellipse" Width="{Binding RelativeSource={RelativeSource Self},Path=ActualHeight}">
<Ellipse Fill="{TemplateBinding ThumbBrush}"></Ellipse>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="{Binding RelativeSource={RelativeSource AncestorType=local:TouchToggleSlider},Path=IsChecked,Converter={StaticResource BooleanToVisibilityInverseConverter}}">
<ContentPresenter Content="{TemplateBinding UncheckedThumbContent}" ContentTemplate="{TemplateBinding UncheckedThumbContentTemplate}" />
</Grid>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="{Binding RelativeSource={RelativeSource AncestorType=local:TouchToggleSlider},Path=IsChecked,Converter={StaticResource BooleanToVisibilityConverter}}">
<ContentPresenter Content="{TemplateBinding CheckedThumbContent}" ContentTemplate="{TemplateBinding CheckedThumbContentTemplate}" />
</Grid>
</Grid>
</Grid>
</Grid>
</Border>
</components:Ripple>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="TouchToggleButtonCheck" TargetType="{x:Type local:TouchToggleSlider}" BasedOn="{StaticResource {x:Type local:TouchToggleSlider}}">
<Setter Property="BorderThickness" Value="0"></Setter>
<Setter Property="UncheckedBackground" Value="{StaticResource TangoGrayBrush}"></Setter>
<Setter Property="CheckedBackground" Value="{StaticResource TangoGreenBrush}"></Setter>
<Setter Property="ThumbBrush" Value="{StaticResource TangoPrimaryBackgroundBrush}"></Setter>
<Setter Property="UncheckedThumbContentTemplate">
<Setter.Value>
<DataTemplate>
<local:TouchIcon Icon="Close" Width="12" Height="12" Foreground="{StaticResource TangoGrayBrush}" />
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="CheckedThumbContentTemplate">
<Setter.Value>
<DataTemplate>
<local:TouchIcon Icon="Check" Width="12" Height="12" Foreground="{StaticResource TangoGreenBrush}" />
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="TangoToggleButtonGrayAccent" TargetType="{x:Type local:TouchToggleSlider}" BasedOn="{StaticResource {x:Type local:TouchToggleSlider}}">
<Setter Property="BorderBrush" Value="{StaticResource TangoGrayBrush}"></Setter>
<Setter Property="ThumbBrush" Value="{StaticResource TangoGrayBrush}"></Setter>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="BorderBrush.Color" To="{StaticResource TangoPrimaryAccentColor}" Duration="00:00:0.2"></ColorAnimation>
<ColorAnimation Storyboard.TargetProperty="ThumbBrush.Color" To="{StaticResource TangoPrimaryAccentColor}" Duration="00:00:0.2"></ColorAnimation>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="BorderBrush.Color" To="{StaticResource TangoGrayColor}" Duration="00:00:0.2"></ColorAnimation>
<ColorAnimation Storyboard.TargetProperty="ThumbBrush.Color" To="{StaticResource TangoGrayColor}" Duration="00:00:0.2"></ColorAnimation>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
|
