How to add toggle switch button to .net WPF application?-CodePudding

I am working on a .NET WPF project using Visual Studio 2022. I want to add a toggle switch button to my app. I searched about this and none of the solutions looked proper with my app. How can it be done without adding external libraries. Is it possible? If not, what could be the best option to handle this?

I want something like this:

CodePudding user response：

I would also suggest mahapps metro. You could grab the markup out the source.

Maybe it's this markup here.

or this

Line to the left is edge of window

CodePudding user response：

There are several ways - you can override the ControlTemplate of CheckBox or ToggleButton, or you can create a UserControl.
Below is small example/idea which you can customize to don't have the hardcoded values.

In adjusted solution I just put two invisible ToggleButtons, which listen for click:

<StackPanel>
    <Border x:Name="switch" BorderThickness="2" CornerRadius="10" Height="20" Width="40" Padding="1" >
        <Border.Style>
            <Style TargetType="Border">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding}" Value="True">
                        <Setter Property="BorderBrush" Value="Green"/>
                    </DataTrigger>
                </Style.Triggers>
                <Setter Property="BorderBrush" Value="Gray"/>
            </Style>
        </Border.Style>
                
        <Grid>
            <Grid.Resources>
                <Style TargetType="ToggleButton">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ToggleButton">
                                <Grid Background="Transparent"/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Grid.Resources>

            <ToggleButton Width="20" HorizontalAlignment="Left" Height="20" Name="tbLeft"
                            IsChecked="{Binding IsChecked, ElementName=tbRight}" />

            <ToggleButton Width="20" HorizontalAlignment="Right" Height="20" Name="tbRight"
                            IsChecked="{Binding DataContext, ElementName=switch}"/>

            <Canvas VerticalAlignment="Top">
                <Ellipse Height="14" Width="14" Name="EL">
                    <Ellipse.Style>
                        <Style TargetType="Ellipse">
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding DataContext, RelativeSource={RelativeSource AncestorType=Border}}" Value="True">
                                    <Setter Property="Canvas.Left" Value="19"/> <!-- 40-14-7 -->
                                    <Setter Property="Fill" Value="Green"/>

                                </DataTrigger>
                            </Style.Triggers>
                            <Setter Property="Fill" Value="Gray"/>
                        </Style>
                    </Ellipse.Style>
                </Ellipse>
            </Canvas>
        </Grid>
    </Border>

    <ToggleButton Content="Test it" IsChecked="{Binding DataContext, ElementName=switch}" Margin="2" Width="50"/>
</StackPanel>