All the controls missing in WPF. Over 1 million downloads.
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.

540 lines
28 KiB

<!--*************************************************************************************
Toolkit for WPF
Copyright (C) 2007-2025 Xceed Software Inc.
This program is provided to you under the terms of the XCEED SOFTWARE, INC.
COMMUNITY LICENSE AGREEMENT (for non-commercial use) as published at
https://github.com/xceedsoftware/wpftoolkit/blob/master/license.md
For more features, controls, and fast professional support,
pick up the Plus Edition at https://xceed.com/xceed-toolkit-plus-for-wpf/
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="http://schemas.xceed.com/wpf/xaml/toolkit"
xmlns:localConv="clr-namespace:Xceed.Wpf.Toolkit.LiveExplorer.Samples.Converters"
Title="ToggleSwitch">
<local:DemoView.Description>
<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="https://xceed.com/xceed-toolkit-plus-for-wpf" RequestNavigate="Hyperlink_RequestNavigate">
Click here for more details about Xceed Toolkit Plus for WPF.
</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" />
<localConv:ZeroToBoolConverter x:Key="ZeroToBoolConverter" />
<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>
<Style x:Key="ThumbStyle1"
TargetType="{x:Type Thumb}">
<Setter Property="VerticalAlignment"
Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Grid>
<Border x:Name="border"
Width="{TemplateBinding ActualWidth}"
Height="{TemplateBinding ActualHeight}"
HorizontalAlignment="Center"
BorderBrush="Orange"
BorderThickness="2"
Background="Black" />
</Grid>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource TemplatedParent}}"
Value="True">
<Setter Property="Background"
Value="Green"
TargetName="border" />
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ThumbStyle2"
TargetType="{x:Type Thumb}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Grid>
<Image Source="..\Resources\PencilTool16.png"
Stretch="None" />
</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"
BasedOn="{StaticResource DisableGrayText}">
<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"
IsThreeState="True"
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="Content:" />
<TextBox Width="80"
Margin="0,5,0,0"
Text="{Binding CheckedContent, 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="Content:" />
<TextBox Width="80"
Margin="0,5,0,0"
Text="{Binding UncheckedContent, 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="20"
Maximum="40"
Margin="0,5,0,0"
Value="{Binding ThumbWidth, ElementName=_toggleSwitch}"
ToolTip="Gets/Sets the Width of the Thumb." />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Height:" />
<xctk:DoubleUpDown Width="80"
Minimum="10"
Maximum="50"
Margin="0,5,0,0"
Value="{Binding ThumbHeight, ElementName=_toggleSwitch}"
ToolTip="Gets/Sets the Height of the Thumb." />
</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"
IsEnabled="{Binding SelectedIndex, ElementName=thumbStyleComboBox, Converter={StaticResource ZeroToBoolConverter}}">
<TextBlock Text="Right Content:" />
<TextBox Width="80"
Margin="0,5,0,0"
Text="{Binding ThumbRightContent, ElementName=_toggleSwitch, UpdateSourceTrigger=PropertyChanged}" />
</StackPanel>
<StackPanel Orientation="Horizontal"
IsEnabled="{Binding SelectedIndex, ElementName=thumbStyleComboBox, Converter={StaticResource ZeroToBoolConverter}}">
<TextBlock Text="Left Content:" />
<TextBox Width="80"
Margin="0,5,0,0"
Text="{Binding ThumbLeftContent, ElementName=_toggleSwitch, UpdateSourceTrigger=PropertyChanged}" />
</StackPanel>
<StackPanel Orientation="Horizontal"
IsEnabled="{Binding SelectedIndex, ElementName=thumbStyleComboBox, Converter={StaticResource ZeroToBoolConverter}}">
<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"
IsEnabled="{Binding SelectedIndex, ElementName=thumbStyleComboBox, Converter={StaticResource ZeroToBoolConverter}}">
<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"
IsEnabled="{Binding SelectedIndex, ElementName=thumbStyleComboBox, Converter={StaticResource ZeroToBoolConverter}}">
<TextBlock Text="Foreground:" />
<xctk:ColorPicker Width="80"
Margin="0,5,0,0"
SelectedColor="{Binding ThumbForeground, ElementName=_toggleSwitch, Converter={StaticResource SolidColorBrushToColorConverter}}" />
</StackPanel>
<StackPanel Orientation="Horizontal"
IsEnabled="{Binding SelectedIndex, ElementName=thumbStyleComboBox, Converter={StaticResource ZeroToBoolConverter}}">
<TextBlock Text="Background:" />
<xctk:ColorPicker Width="80"
Margin="0,5,0,0"
SelectedColor="{Binding ThumbBackground, ElementName=_toggleSwitch, Converter={StaticResource SolidColorBrushToColorConverter}}" />
</StackPanel>
<StackPanel Orientation="Horizontal"
IsEnabled="{Binding SelectedIndex, ElementName=thumbStyleComboBox, Converter={StaticResource ZeroToBoolConverter}}">
<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"
IsEnabled="{Binding SelectedIndex, ElementName=thumbStyleComboBox, Converter={StaticResource ZeroToBoolConverter}}">
<TextBlock Text="Pressed Background:" />
<xctk:ColorPicker Width="80"
Margin="0,5,0,0"
SelectedColor="{Binding ThumbPressedBackground, ElementName=_toggleSwitch, Converter={StaticResource SolidColorBrushToColorConverter}}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Style:" />
<ComboBox x:Name="thumbStyleComboBox"
Width="80"
SelectedValue="{Binding ThumbStyle, ElementName=_toggleSwitch}"
SelectedValuePath="Tag"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="0,5,0,0">
<ComboBoxItem Content="Default"
Tag="{x:Null}" />
<ComboBoxItem Content="Style 1"
Tag="{StaticResource ThumbStyle1}" />
<ComboBoxItem Content="Style 2"
Tag="{StaticResource ThumbStyle2}" />
</ComboBox>
</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"
Margin="10"
CheckedContent="ON"
UncheckedContent="OFF"
Width="80"
Height="25"
ThumbHeight="25"
ThumbWidth="24"
HorizontalAlignment="Center" />
</StackPanel>
</Grid>
<!--##END-->
<!--##INCLUDE_OPEN_SOURCE
<Image Source="..\OpenSourceImages\ToggleSwitch.png" Width="200" Height="160"/>
##END-->
</local:DemoView>