<HeaderedContentControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignWidth="1280" d:DesignHeight="720"
    Style="{StaticResource SampleControlStyle}"
    Header="ToggleButton"
    Tag="https://www.noesisengine.com/docs/Gui.Core._ToggleButton.html">

    <StackPanel>
        <TextBlock Style="{StaticResource SampleSectionDesc}" Text="A ToggleButton looks like a normal Button, but works as a CheckBox. It typically has two states, Checked or Unchecked, but can be indeterminate if the IsThreeState property is true."/>
        <HeaderedContentControl Style="{StaticResource SampleSectionStyle}" Tag="https://www.noesisengine.com/xamltoy/c693ea7b5c8d8b9b00ca5944abf4b320" TabIndex="100">
            <HeaderedContentControl.Header>
                <StackPanel>
                    <TextBlock Style="{StaticResource SampleSectionTitle}" Text="IsChecked"/>
                    <TextBlock Style="{StaticResource SampleSectionDesc}" Margin="0,5,0,0">
                        <Run FontWeight="Bold">IsChecked</Run>
                        <Run>property indicates if the ToggleButton is checked. When set to true the</Run>
                        <Run FontWeight="Bold">Checked</Run>
                        <Run>event is raised, and</Run>
                        <Run FontWeight="Bold">Unchecked</Run>
                        <Run>event when set to false.</Run>
                    </TextBlock>
                </StackPanel>
            </HeaderedContentControl.Header>
            <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
                <Grid.Triggers>
                    <EventTrigger RoutedEvent="ToggleButton.Checked">
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation Duration="0:0:0.5" Storyboard.TargetName="CheckedRect1" Storyboard.TargetProperty="Fill.Color" From="#00ADFF2F" To="#FFADFF2F"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="ToggleButton.Unchecked">
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation Duration="0:0:0.5" Storyboard.TargetName="UncheckedRect1" Storyboard.TargetProperty="Fill.Color" From="#00ADFF2F" To="#FFADFF2F"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Grid.Triggers>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition Width="50"/>
                    <ColumnDefinition Width="40"/>
                    <ColumnDefinition Width="40"/>
                    <ColumnDefinition Width="40"/>
                </Grid.ColumnDefinitions>
                <ToggleButton x:Name="Button1" Content="ToggleButton"/>
                <TextBlock Grid.Column="1" Text="{Binding IsChecked, ElementName=Button1}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                <Grid Grid.Column="2" Margin="8,0,0,0">
                    <Rectangle Fill="DodgerBlue" Width="40"/>
                    <Rectangle Fill="#FFADFF2F" x:Name="CheckedRect1"/>
                </Grid>
                <Grid Grid.Column="3" Margin="8,0,0,0">
                    <Rectangle Fill="OrangeRed" Width="40"/>
                    <Rectangle Fill="#FFADFF2F" x:Name="UncheckedRect1"/>
                </Grid>
            </Grid>
        </HeaderedContentControl>
        <HeaderedContentControl Style="{StaticResource SampleSectionStyle}" Tag="https://www.noesisengine.com/xamltoy/0abfb87099885156b1e151de30862dba" TabIndex="200">
            <HeaderedContentControl.Header>
                <StackPanel>
                    <TextBlock Style="{StaticResource SampleSectionTitle}" Text="IsThreeState"/>
                    <TextBlock Style="{StaticResource SampleSectionDesc}" Margin="0,5,0,0">
                        <Run FontWeight="Bold">IsThreeState</Run>
                        <Run>property determines if the ToggleButton supports two or three states. When true, the IsChecked property can be set to</Run>
                        <Run FontWeight="Bold">null</Run>
                        <Run>as third state.</Run>
                    </TextBlock>
                </StackPanel>
            </HeaderedContentControl.Header>
            <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
                <Grid.Triggers>
                    <EventTrigger RoutedEvent="ToggleButton.Checked">
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation Duration="0:0:0.5" Storyboard.TargetName="CheckedRect2" Storyboard.TargetProperty="Fill.Color" From="#00ADFF2F" To="#FFADFF2F"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="ToggleButton.Indeterminate">
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation Duration="0:0:0.5" Storyboard.TargetName="IndeterminateRect2" Storyboard.TargetProperty="Fill.Color" From="#00ADFF2F" To="#FFADFF2F"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="ToggleButton.Unchecked">
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation Duration="0:0:0.5" Storyboard.TargetName="UncheckedRect2" Storyboard.TargetProperty="Fill.Color" From="#00ADFF2F" To="#FFADFF2F"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Grid.Triggers>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition Width="50"/>
                    <ColumnDefinition Width="40"/>
                    <ColumnDefinition Width="40"/>
                    <ColumnDefinition Width="40"/>
                </Grid.ColumnDefinitions>
                <ToggleButton x:Name="Button2" Content="ToggleButton" IsThreeState="True"/>
                <TextBlock Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center">
                    <TextBlock.Style>
                        <Style TargetType="TextBlock">
                            <Setter Property="Text" Value="{Binding IsChecked, ElementName=Button2}"/>
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding IsChecked, ElementName=Button2}" Value="{x:Null}">
                                    <Setter Property="Text" Value="NULL"/>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </TextBlock.Style>
                </TextBlock>
                <Grid Grid.Column="2" Margin="8,0,0,0">
                    <Rectangle Fill="DodgerBlue" Width="40"/>
                    <Rectangle Fill="#FFADFF2F" x:Name="CheckedRect2"/>
                </Grid>
                <Grid Grid.Column="3" Margin="8,0,0,0">
                    <Rectangle Fill="Gray" Width="40"/>
                    <Rectangle Fill="#FFADFF2F" x:Name="IndeterminateRect2"/>
                </Grid>
                <Grid Grid.Column="4" Margin="8,0,0,0">
                    <Rectangle Fill="OrangeRed" Width="40"/>
                    <Rectangle Fill="#FFADFF2F" x:Name="UncheckedRect2"/>
                </Grid>
            </Grid>
        </HeaderedContentControl>
        <HeaderedContentControl Style="{StaticResource SampleSectionStyle}" Tag="https://www.noesisengine.com/xamltoy/b5e9c4cce253496046ed4f8f85532a8b" TabIndex="300">
            <HeaderedContentControl.Header>
                <TextBlock Style="{StaticResource SampleSectionTitle}" Text="Custom style"/>
            </HeaderedContentControl.Header>
            <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
                <Grid.Resources>
                    <SolidColorBrush x:Key="Brush.OuterBorder" Color="#FF919596"/>
                    <SolidColorBrush x:Key="Brush.OuterBorderInset" Color="#FFB0B1B3"/>
                    <SolidColorBrush x:Key="Brush.InnerBorder" Color="#FFD4D6D5"/>
                    <SolidColorBrush x:Key="Brush.SwitchThumbBg" Color="#FF878586"/>
                    <SolidColorBrush x:Key="Brush.PanelBorder" Color="#FFAFAFAF"/>
                    <SolidColorBrush x:Key="Brush.PanelBackground" Color="#FFCBCBCB"/>
                    <LinearGradientBrush x:Key="Brush.SwitchThumb" StartPoint="0,0" EndPoint="0,1">
                        <GradientStop Color="#FFE5E5E5" Offset="0"/>
                        <GradientStop Color="#FFAFAFAF" Offset="0.97"/>
                        <GradientStop Color="#00AFAFAF" Offset="1"/>
                    </LinearGradientBrush>
                    <LinearGradientBrush x:Key="Brush.DownShadow" StartPoint="0,0" EndPoint="0,1">
                        <GradientStop Color="#A5000000" Offset="0.5"/>
                        <GradientStop Color="#00000000" Offset="1"/>
                    </LinearGradientBrush>
                    <LinearGradientBrush x:Key="Brush.LeftShadow" StartPoint="0,0" EndPoint="1,0">
                        <GradientStop Color="#CC000000" Offset="0.5"/>
                        <GradientStop Color="#00000000"/>
                    </LinearGradientBrush>
                    <LinearGradientBrush x:Key="Brush.RightShadow" StartPoint="1,0" EndPoint="0,0">
                        <GradientStop Color="#CC000000" Offset="0.5"/>
                        <GradientStop Color="#00000000"/>
                    </LinearGradientBrush>
                    <RadialGradientBrush x:Key="Brush.InnerShadow">
                        <GradientStop Color="#00000000" Offset="0.5"/>
                        <GradientStop Color="#33000000" Offset="1"/>
                    </RadialGradientBrush>
                    <RadialGradientBrush x:Key="Brush.InnerShadowDark">
                        <GradientStop Color="#17000000" Offset="0.5"/>
                        <GradientStop Color="#33000000" Offset="1"/>
                    </RadialGradientBrush>
                    <ControlTemplate x:Key="Template.ToggleButton.Switch" TargetType="{x:Type ToggleButton}">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="0:0:0.1" To="MouseOver">
                                            <VisualTransition.GeneratedEasingFunction>
                                                <SineEase EasingMode="EaseInOut"/>
                                            </VisualTransition.GeneratedEasingFunction>
                                        </VisualTransition>
                                        <VisualTransition From="MouseOver" GeneratedDuration="0:0:0.2">
                                            <VisualTransition.GeneratedEasingFunction>
                                                <SineEase EasingMode="EaseInOut"/>
                                            </VisualTransition.GeneratedEasingFunction>
                                        </VisualTransition>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="border">
                                                <EasingColorKeyFrame KeyTime="0" Value="#FFFAFAFA"/>
                                            </ColorAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="border">
                                                <EasingColorKeyFrame KeyTime="0" Value="#FFBFBFBF"/>
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed"/>
                                    <VisualState x:Name="Disabled"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="CheckStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="0:0:0.4" To="Checked">
                                            <VisualTransition.GeneratedEasingFunction>
                                                <CubicEase EasingMode="EaseOut"/>
                                            </VisualTransition.GeneratedEasingFunction>
                                            <Storyboard>
                                                <DoubleAnimation Duration="0:0:0.4" To="1" Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="SwitchSpace">
                                                    <DoubleAnimation.EasingFunction>
                                                        <CubicEase EasingMode="EaseInOut"/>
                                                    </DoubleAnimation.EasingFunction>
                                                </DoubleAnimation>
                                            </Storyboard>
                                        </VisualTransition>
                                        <VisualTransition From="Checked" GeneratedDuration="0:0:0.5">
                                            <VisualTransition.GeneratedEasingFunction>
                                                <CubicEase EasingMode="EaseOut"/>
                                            </VisualTransition.GeneratedEasingFunction>
                                            <Storyboard>
                                                <DoubleAnimation Duration="0:0:0.5" Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="SwitchSpace">
                                                    <DoubleAnimation.EasingFunction>
                                                        <CubicEase EasingMode="EaseInOut"/>
                                                    </DoubleAnimation.EasingFunction>
                                                </DoubleAnimation>
                                            </Storyboard>
                                        </VisualTransition>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Checked">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="SwitchSpace">
                                                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="OffGroup">
                                                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unchecked"/>
                                    <VisualState x:Name="Indeterminate"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border CornerRadius="4" BorderThickness="1" BorderBrush="{StaticResource Brush.OuterBorder}" Background="Silver">
                                <Border CornerRadius="3" BorderThickness="1" BorderBrush="{StaticResource Brush.OuterBorderInset}" Padding="6">
                                    <Border CornerRadius="2" BorderThickness="1" BorderBrush="{StaticResource Brush.InnerBorder}">
                                        <Grid>
                                            <Grid x:Name="OnGroup">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition/>
                                                    <ColumnDefinition/>
                                                </Grid.ColumnDefinitions>
                                                <Border CornerRadius="1" Background="{TemplateBinding Background}" Grid.ColumnSpan="2"/>
                                                <Border CornerRadius="1" Grid.ColumnSpan="2" Background="{StaticResource Brush.InnerShadow}"/>
                                                <Viewbox>
                                                    <TextBlock Text="ON" Margin="2" Foreground="White" Width="32" TextAlignment="Center"/>
                                                </Viewbox>
                                            </Grid>
                                            <Grid x:Name="OffGroup">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition/>
                                                    <ColumnDefinition/>
                                                </Grid.ColumnDefinitions>
                                                <Decorator x:Name="SwitchWidth"/>
                                                <Border CornerRadius="1" Background="{TemplateBinding Background}" Grid.ColumnSpan="2"/>
                                                <Border CornerRadius="1" Background="#B2000000" Grid.ColumnSpan="2"/>
                                                <Border CornerRadius="1" Grid.ColumnSpan="2" Background="{StaticResource Brush.InnerShadow}"/>
                                                <Viewbox Grid.Column="1">
                                                    <TextBlock Text="OFF" Margin="2" Foreground="#7FFFFFFF" Width="32" TextAlignment="Center"/>
                                                </Viewbox>
                                            </Grid>
                                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                                                <Decorator x:Name="SwitchSpace" Width="{Binding ActualWidth, ElementName=SwitchWidth}">
                                                    <Decorator.LayoutTransform>
                                                        <TransformGroup>
                                                            <ScaleTransform ScaleX="0"/>
                                                            <SkewTransform/>
                                                            <RotateTransform/>
                                                            <TranslateTransform/>
                                                        </TransformGroup>
                                                    </Decorator.LayoutTransform>
                                                </Decorator>
                                                <Border Width="{Binding ActualWidth, ElementName=SwitchWidth}">
                                                    <Grid>
                                                        <Border CornerRadius="4" BorderThickness="0,6,0,6"  Margin="-2,0,-2,-8" VerticalAlignment="Bottom"
                                                    BorderBrush="{StaticResource Brush.DownShadow}"/>
                                                        <Border CornerRadius="4" BorderThickness="2,0,2,0"  Margin="-4,-4,-4,-3" HorizontalAlignment="Left"
                                                     BorderBrush="{StaticResource Brush.LeftShadow}"/>
                                                        <Border CornerRadius="4" BorderThickness="2,0,2,0"  Margin="-4,-4,-4,-3" HorizontalAlignment="Right"
                                                    BorderBrush="{StaticResource Brush.RightShadow}"/>
                                                        <Border CornerRadius="2" Margin="-3,-5,-3,-4" Background="{StaticResource Brush.SwitchThumbBg}"/>
                                                        <Border x:Name="border" Margin="-3,-5,-3,-4" CornerRadius="2,2,4,4" Background="{StaticResource Brush.SwitchThumb}"/>
                                                    </Grid>
                                                </Border>
                                            </StackPanel>
                                        </Grid>
                                    </Border>
                                </Border>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                    <Style x:Key="Style.ToggleButton.Switch" TargetType="{x:Type ToggleButton}">
                        <Setter Property="Background" Value="#1ea6e4"/>
                        <Setter Property="Template" Value="{StaticResource Template.ToggleButton.Switch}"/>
                        <Setter Property="FontFamily" Value="Samples/Fonts/#Aero Matics"/>
                        <Setter Property="ClickMode" Value="Press"/>
                    </Style>
                </Grid.Resources>
                <ToggleButton Width="150" Height="50" Padding="10,5"
                Style="{StaticResource Style.ToggleButton.Switch}" Background="#FF0CC736"/>
            </Grid>
        </HeaderedContentControl>
    </StackPanel>
</HeaderedContentControl>