You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
392 lines
23 KiB
392 lines
23 KiB
<!--*************************************************************************************
|
|
|
|
Extended WPF Toolkit
|
|
|
|
Copyright (C) 2007-2014 Xceed Software Inc.
|
|
|
|
This program is provided to you under the terms of the Microsoft Public
|
|
License (Ms-PL) as published at http://wpftoolkit.codeplex.com/license
|
|
|
|
For more features, controls, and fast professional support,
|
|
pick up the Plus Edition at http://xceed.com/wpf_toolkit
|
|
|
|
Stay informed: follow @datagrid on Twitter or Like http://facebook.com/datagrids
|
|
|
|
***********************************************************************************-->
|
|
<local:DemoView x:Class="Xceed.Wpf.Toolkit.LiveExplorer.Samples.ToggleSwitch.Views.ToggleSwitchView"
|
|
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
|
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
|
xmlns:sys="clr-namespace:System;assembly=mscorlib"
|
|
xmlns:local="clr-namespace:Xceed.Wpf.Toolkit.LiveExplorer"
|
|
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
|
|
xmlns:conv="clr-namespace:Xceed.Wpf.Toolkit.Core.Converters;assembly=Xceed.Wpf.Toolkit"
|
|
Title="ToggleSwitch">
|
|
|
|
<local:DemoView.Description>
|
|
<!-- //#TODODOC-->
|
|
<Paragraph FontSize="14"
|
|
FontFamily="Segoe">
|
|
<Run>The ToggleSwitch control is a fully customizable on/off switch that can be used to enhance the UI experience.</Run>
|
|
<!--##INCLUDE_OPEN_SOURCE
|
|
<LineBreak />
|
|
<LineBreak />
|
|
<Run>This feature is only available in the "Plus" version.</Run>
|
|
<LineBreak />
|
|
<Hyperlink NavigateUri="http://www.xceed.com/Extended_WPF_Toolkit_Intro.html" RequestNavigate="Hyperlink_RequestNavigate">
|
|
Click here for more details about Xceed Extended WPF Toolkit Plus.
|
|
</Hyperlink>
|
|
##END-->
|
|
</Paragraph>
|
|
</local:DemoView.Description>
|
|
|
|
<!--##EXCLUDE_OPEN_SOURCE-->
|
|
<local:DemoView.Resources>
|
|
<conv:SolidColorBrushToColorConverter x:Key="SolidColorBrushToColorConverter" />
|
|
<conv:ThicknessToDoubleConverter x:Key="ThicknessToDoubleConverter" />
|
|
<conv:CornerRadiusToDoubleConverter x:Key="CornerRadiusToDoubleConverter" />
|
|
|
|
<LinearGradientBrush x:Key="customAccentBrush1"
|
|
EndPoint="0.5,1"
|
|
StartPoint="0.5,0">
|
|
<GradientStop Color="#FF0086c6"
|
|
Offset="0" />
|
|
<GradientStop Color="#FF66ccff"
|
|
Offset="0.94" />
|
|
<GradientStop Color="#FFddf4ff"
|
|
Offset="0.94" />
|
|
<GradientStop Color="#FFddf4ff"
|
|
Offset="0.97" />
|
|
<GradientStop Color="#FFddf4ff"
|
|
Offset="1" />
|
|
</LinearGradientBrush>
|
|
|
|
<LinearGradientBrush x:Key="customAccentBrush2"
|
|
EndPoint="0.5,1"
|
|
StartPoint="0.5,0">
|
|
<GradientStop Color="#FFff0099"
|
|
Offset="0" />
|
|
<GradientStop Color="#FF993366"
|
|
Offset="1" />
|
|
</LinearGradientBrush>
|
|
|
|
<LinearGradientBrush x:Key="customAccentBrush3"
|
|
EndPoint="0.5,1"
|
|
StartPoint="0.5,0">
|
|
<GradientStop Color="#FF9DE214"
|
|
Offset="0" />
|
|
<GradientStop Color="#FF9DE214"
|
|
Offset="0.2" />
|
|
<GradientStop Color="#FF95CA2A"
|
|
Offset="0.2" />
|
|
<GradientStop Color="#FF339933"
|
|
Offset="1" />
|
|
</LinearGradientBrush>
|
|
|
|
<Style x:Key="MetroSampleRadioButtonTemplate" TargetType="RadioButton">
|
|
<Setter Property="Template">
|
|
<Setter.Value>
|
|
<ControlTemplate TargetType="RadioButton">
|
|
<Grid>
|
|
<VisualStateManager.VisualStateGroups>
|
|
<VisualStateGroup x:Name="CommonStates">
|
|
<VisualStateGroup.Transitions>
|
|
<VisualTransition GeneratedDuration="0:0:0.2" />
|
|
<VisualTransition From="Normal"
|
|
GeneratedDuration="0"
|
|
To="Pressed">
|
|
<Storyboard>
|
|
<DoubleAnimation Duration="0"
|
|
To="0.45"
|
|
Storyboard.TargetProperty="(UIElement.Opacity)"
|
|
Storyboard.TargetName="rectangle" />
|
|
</Storyboard>
|
|
</VisualTransition>
|
|
</VisualStateGroup.Transitions>
|
|
<VisualState x:Name="Normal" />
|
|
<VisualState x:Name="MouseOver">
|
|
<Storyboard>
|
|
<DoubleAnimation Duration="0"
|
|
To="0.35"
|
|
Storyboard.TargetProperty="(UIElement.Opacity)"
|
|
Storyboard.TargetName="rectangle" />
|
|
</Storyboard>
|
|
</VisualState>
|
|
<VisualState x:Name="Pressed">
|
|
<Storyboard>
|
|
<DoubleAnimation Duration="0"
|
|
To="0.35"
|
|
Storyboard.TargetProperty="(UIElement.Opacity)"
|
|
Storyboard.TargetName="rectangle" />
|
|
</Storyboard>
|
|
</VisualState>
|
|
<VisualState x:Name="Disabled">
|
|
<Storyboard>
|
|
<DoubleAnimation Duration="0"
|
|
To=".2"
|
|
Storyboard.TargetProperty="(UIElement.Opacity)"
|
|
Storyboard.TargetName="content" />
|
|
</Storyboard>
|
|
</VisualState>
|
|
</VisualStateGroup>
|
|
<VisualStateGroup x:Name="CheckStates">
|
|
<VisualStateGroup.Transitions>
|
|
<VisualTransition GeneratedDuration="0:0:0.2" />
|
|
</VisualStateGroup.Transitions>
|
|
<VisualState x:Name="Checked">
|
|
<Storyboard>
|
|
<DoubleAnimation Duration="0"
|
|
To="1"
|
|
Storyboard.TargetProperty="(UIElement.Opacity)"
|
|
Storyboard.TargetName="CheckIcon" />
|
|
</Storyboard>
|
|
</VisualState>
|
|
<VisualState x:Name="Unchecked" />
|
|
</VisualStateGroup>
|
|
</VisualStateManager.VisualStateGroups>
|
|
<Rectangle x:Name="content"
|
|
Width="20"
|
|
Height="20"
|
|
Fill="{TemplateBinding Background}" />
|
|
<Path x:Name="CheckIcon"
|
|
Data="M 619,736 C619,736 617,738 617,738 617,738 621,742 621,742 621,742 629,732 629,732 629,732 627,730 627,730 627,730 621,738 621,738 621,738 619,736 619,736 z"
|
|
Fill="White"
|
|
FlowDirection="LeftToRight"
|
|
Opacity="0"
|
|
Stretch="Fill"
|
|
UseLayoutRounding="False"
|
|
VerticalAlignment="Bottom"
|
|
HorizontalAlignment="Right"
|
|
Width="12"
|
|
Height="12"
|
|
Margin="0,0,1,1" />
|
|
<Rectangle x:Name="rectangle"
|
|
Fill="White"
|
|
Opacity="0" />
|
|
</Grid>
|
|
</ControlTemplate>
|
|
</Setter.Value>
|
|
</Setter>
|
|
</Style>
|
|
</local:DemoView.Resources>
|
|
|
|
<Grid>
|
|
<Grid.RowDefinitions>
|
|
<RowDefinition Height="Auto" />
|
|
<RowDefinition Height="*" />
|
|
</Grid.RowDefinitions>
|
|
|
|
<GroupBox Header="Features"
|
|
Margin="5">
|
|
|
|
<GroupBox.Resources>
|
|
<Style TargetType="TextBlock">
|
|
<Setter Property="Width" Value="125" />
|
|
<Setter Property="Margin" Value="0,5,0,5" />
|
|
</Style>
|
|
<Style x:Key="SubHeader" TargetType="TextBlock">
|
|
<Setter Property="Margin" Value="0,10,0,0" />
|
|
<Setter Property="Foreground" Value="Orange" />
|
|
<Setter Property="TextElement.FontWeight" Value="Bold" />
|
|
</Style>
|
|
</GroupBox.Resources>
|
|
|
|
<Grid>
|
|
<Grid Grid.Row="0">
|
|
<Grid.ColumnDefinitions>
|
|
<ColumnDefinition Width="1*" />
|
|
<ColumnDefinition Width="1*" />
|
|
<ColumnDefinition Width="1*" />
|
|
</Grid.ColumnDefinitions>
|
|
|
|
<!-- General Section -->
|
|
<StackPanel Grid.Column="0" Margin="5,0,0,0">
|
|
<StackPanel>
|
|
<TextBlock Text="Section: General" Style="{StaticResource SubHeader}" />
|
|
</StackPanel>
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Text="IsChecked:" />
|
|
<CheckBox Width="80" Margin="0,5,0,0"
|
|
IsChecked="{Binding IsChecked, ElementName=_toggleSwitch}" />
|
|
</StackPanel>
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Text="IsCheckedLeft:" />
|
|
<CheckBox Width="80" Margin="0,5,0,0"
|
|
IsChecked="{Binding IsCheckedLeft, ElementName=_toggleSwitch}" />
|
|
</StackPanel>
|
|
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Text="Width:" />
|
|
<xctk:DoubleUpDown Width="80" Margin="0,5,0,0" Minimum="50.0" Maximum="300.0" Increment="1.0"
|
|
Value="{Binding Width, ElementName=_toggleSwitch}" />
|
|
</StackPanel>
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Text="Height:" />
|
|
<xctk:DoubleUpDown Width="80" Margin="0,5,0,0" Minimum="20.0" Maximum="100.0" Increment="0.1" FormatString="N1"
|
|
Value="{Binding Height, ElementName=_toggleSwitch}" />
|
|
</StackPanel>
|
|
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Text="Corner Radius:" />
|
|
<xctk:DoubleUpDown Width="80" Margin="0,5,0,0" Minimum="0.0" Maximum="25.0"
|
|
Value="{Binding CornerRadius, ElementName=_toggleSwitch, Converter={StaticResource CornerRadiusToDoubleConverter}}" />
|
|
</StackPanel>
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Text="Outer Margin:" />
|
|
<xctk:DoubleUpDown Width="80" Margin="0,5,0,0" Minimum="0.0" Maximum="5.0"
|
|
Value="{Binding OuterMargin, ElementName=_toggleSwitch, Converter={StaticResource ThicknessToDoubleConverter}}" />
|
|
</StackPanel>
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Text="Inner Margin:" />
|
|
<xctk:DoubleUpDown Width="80" Margin="0,5,0,0" Minimum="0.0" Maximum="5.0"
|
|
Value="{Binding InnerMargin, ElementName=_toggleSwitch, Converter={StaticResource ThicknessToDoubleConverter}}" />
|
|
</StackPanel>
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Text="Border Thickness:" />
|
|
<xctk:DoubleUpDown Width="80" Margin="0,5,0,0" Minimum="0.0" Maximum="3.0"
|
|
Value="{Binding BorderThickness, ElementName=_toggleSwitch, Converter={StaticResource ThicknessToDoubleConverter}}" />
|
|
</StackPanel>
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Text="Border Brush:" />
|
|
<xctk:ColorPicker Width="80" Margin="0,5,0,0"
|
|
SelectedColor="{Binding BorderBrush, ElementName=_toggleSwitch, Converter={StaticResource SolidColorBrushToColorConverter}}" />
|
|
</StackPanel>
|
|
|
|
</StackPanel>
|
|
|
|
<!-- Checked/Unchecked Sections -->
|
|
<StackPanel Grid.Column="1" Margin="5,0,0,0">
|
|
|
|
<StackPanel>
|
|
<TextBlock Text="Section: Checked" Style="{StaticResource SubHeader}" />
|
|
</StackPanel>
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Text="Label:" />
|
|
<TextBox Width="80" Margin="0,5,0,0"
|
|
Text="{Binding CheckedLabel, ElementName=_toggleSwitch, UpdateSourceTrigger=PropertyChanged}"/>
|
|
</StackPanel>
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Text="ToolTip:" />
|
|
<TextBox Width="80" Margin="0,5,0,0"
|
|
Text="{Binding CheckedToolTip, ElementName=_toggleSwitch, UpdateSourceTrigger=PropertyChanged}"/>
|
|
</StackPanel>
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Text="Foreground:" />
|
|
<xctk:ColorPicker Width="80" Margin="0,5,0,0"
|
|
SelectedColor="{Binding CheckedForeground, ElementName=_toggleSwitch, Converter={StaticResource SolidColorBrushToColorConverter}}" />
|
|
</StackPanel>
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Text="Background:" />
|
|
<xctk:ColorPicker Width="80" Margin="0,5,0,0"
|
|
SelectedColor="{Binding CheckedBackground, ElementName=_toggleSwitch, Converter={StaticResource SolidColorBrushToColorConverter}}" />
|
|
</StackPanel>
|
|
|
|
<StackPanel>
|
|
<TextBlock Text="Section: Unchecked" Style="{StaticResource SubHeader}" />
|
|
</StackPanel>
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Text="Label:" />
|
|
<TextBox Width="80" Margin="0,5,0,0"
|
|
Text="{Binding UncheckedLabel, ElementName=_toggleSwitch, UpdateSourceTrigger=PropertyChanged}"/>
|
|
</StackPanel>
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Text="ToolTip:" />
|
|
<TextBox Width="80" Margin="0,5,0,0"
|
|
Text="{Binding UncheckedToolTip, ElementName=_toggleSwitch, UpdateSourceTrigger=PropertyChanged}"/>
|
|
</StackPanel>
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Text="Foreground:" />
|
|
<xctk:ColorPicker Width="80" Margin="0,5,0,0"
|
|
SelectedColor="{Binding UncheckedForeground, ElementName=_toggleSwitch, Converter={StaticResource SolidColorBrushToColorConverter}}" />
|
|
</StackPanel>
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Text="Background:" />
|
|
<xctk:ColorPicker Width="80" Margin="0,5,0,0"
|
|
SelectedColor="{Binding UncheckedBackground, ElementName=_toggleSwitch, Converter={StaticResource SolidColorBrushToColorConverter}}" />
|
|
</StackPanel>
|
|
</StackPanel>
|
|
|
|
<!-- Thumb -->
|
|
<StackPanel Grid.Column="2" Margin="5,0,0,0">
|
|
<StackPanel>
|
|
<TextBlock Text="Section: Thumb" Style="{StaticResource SubHeader}" />
|
|
</StackPanel>
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Text="Width (%):" />
|
|
<xctk:DoubleUpDown Width="80" Minimum="25" Maximum="50" Margin="0,5,0,0"
|
|
Value="{Binding ThumbWidth, ElementName=_toggleSwitch}"
|
|
ToolTip="Gets/Sets the Width of the Thumb (as a percentage of the total width of the ToggleSwitch)" />
|
|
</StackPanel>
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Text="Elasticity:" />
|
|
<xctk:DoubleUpDown Width="80" Minimum="10" Maximum="90" Margin="0,5,0,0"
|
|
Value="{Binding ThumbElasticity, ElementName=_toggleSwitch}" />
|
|
</StackPanel>
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Text="Right Content:" />
|
|
<TextBox Width="80" Margin="0,5,0,0"
|
|
Text="{Binding ThumbRightContent, ElementName=_toggleSwitch, UpdateSourceTrigger=PropertyChanged}" />
|
|
</StackPanel>
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Text="Left Content:" />
|
|
<TextBox Width="80" Margin="0,5,0,0"
|
|
Text="{Binding ThumbLeftContent, ElementName=_toggleSwitch, UpdateSourceTrigger=PropertyChanged}" />
|
|
</StackPanel>
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Text="Border Thickness:" />
|
|
<xctk:DoubleUpDown Width="80" Margin="0,5,0,0" Minimum="0.0" Maximum="3.0"
|
|
Value="{Binding ThumbBorderThickness, ElementName=_toggleSwitch, Converter={StaticResource ThicknessToDoubleConverter}}" />
|
|
</StackPanel>
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Text="Border Brush:" />
|
|
<xctk:ColorPicker Width="80" Margin="0,5,0,0"
|
|
SelectedColor="{Binding ThumbBorderBrush, ElementName=_toggleSwitch, Converter={StaticResource SolidColorBrushToColorConverter}}" />
|
|
</StackPanel>
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Text="Foreground:" />
|
|
<xctk:ColorPicker Width="80" Margin="0,5,0,0"
|
|
SelectedColor="{Binding ThumbForeground, ElementName=_toggleSwitch, Converter={StaticResource SolidColorBrushToColorConverter}}" />
|
|
</StackPanel>
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Text="Background:" />
|
|
<xctk:ColorPicker Width="80" Margin="0,5,0,0"
|
|
SelectedColor="{Binding ThumbBackground, ElementName=_toggleSwitch, Converter={StaticResource SolidColorBrushToColorConverter}}" />
|
|
</StackPanel>
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Text="Hover Background:" />
|
|
<xctk:ColorPicker Width="80" Margin="0,5,0,0"
|
|
SelectedColor="{Binding ThumbHoverBackground, ElementName=_toggleSwitch, Converter={StaticResource SolidColorBrushToColorConverter}}" />
|
|
</StackPanel>
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Text="Pressed Background:" />
|
|
<xctk:ColorPicker Width="80" Margin="0,5,0,0"
|
|
SelectedColor="{Binding ThumbPressedBackground, ElementName=_toggleSwitch, Converter={StaticResource SolidColorBrushToColorConverter}}" />
|
|
</StackPanel>
|
|
</StackPanel>
|
|
|
|
</Grid>
|
|
|
|
</Grid>
|
|
</GroupBox>
|
|
|
|
<StackPanel x:Name="_samplePanel"
|
|
Grid.Row="1"
|
|
Margin="10">
|
|
|
|
<TextBlock Text="Usage:"
|
|
Margin="10"
|
|
Style="{StaticResource Header}" />
|
|
|
|
<xctk:ToggleSwitch x:Name="_toggleSwitch"
|
|
Width="80.0"
|
|
Height="25.5"
|
|
Margin="10"
|
|
HorizontalAlignment="Left" />
|
|
|
|
</StackPanel>
|
|
</Grid>
|
|
<!--##END-->
|
|
|
|
<!--##INCLUDE_OPEN_SOURCE
|
|
<Image Source="..\OpenSourceImages\ToggleSwitch.png" Width="200" Height="160"/>
|
|
##END-->
|
|
</local:DemoView>
|
|
|