日夜切换开关 代码见例子库中的 VickyThemeSwitchCtrls

XAML

    <Grid>
        <Grid.Resources>
            <Style TargetType="ToggleButton">
                <Setter Property="Background" Value="DarkSeaGreen" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ToggleButton">

                            <Grid
                                x:Name="RootGrid"
                                Width="{TemplateBinding Width}"
                                Height="{TemplateBinding Height}">

                                <Grid.Resources>
                                    <!--  一个计算切换开关的高度宽度的转换器， 简单的除 2  -->
                                    <local:ButtonRectangleHeightValueConverter x:Key="ButtonRectangleHeightValueConverter" />
                                </Grid.Resources>

                                <!--  开关的轨道  -->
                                <Rectangle
                                    x:Name="ButtonRectangle"
                                    Width="{TemplateBinding ActualWidth}"
                                    Height="{Binding ElementName=RootGrid, Path=ActualHeight, Converter={StaticResource ButtonRectangleHeightValueConverter}}"
                                    Fill="{TemplateBinding Background}"
                                    RadiusX="{Binding ElementName=ButtonRectangle, Path=ActualHeight, Converter={StaticResource ButtonRectangleHeightValueConverter}}"
                                    RadiusY="{Binding ElementName=ButtonRectangle, Path=ActualHeight, Converter={StaticResource ButtonRectangleHeightValueConverter}}" />

                                <!--  开关上的圆形  -->
                                <Ellipse
                                    x:Name="ButtonEllipse"
                                    Width="{Binding ElementName=RootGrid, Path=ActualHeight}"
                                    Height="{Binding ElementName=RootGrid, Path=ActualHeight}"
                                    HorizontalAlignment="Left"
                                    Fill="CornflowerBlue" />
                            </Grid>

                            <ControlTemplate.Triggers>

                                <!--  开关关闭时，将轨道即灰  -->
                                <Trigger Property="IsChecked" Value="False">
                                    <Setter TargetName="ButtonRectangle" Property="Fill" Value="LightGray" />
                                </Trigger>

                                <!--  切换开关时，将圆形向右移动  -->
                                <Trigger Property="IsChecked" Value="True">
                                    <Setter TargetName="ButtonEllipse" Property="HorizontalAlignment" Value="Right" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>

        <ToggleButton
            Width="160" Height="60"
            Content="切换" />

    </Grid>