wpfxamluser-interfacematerial-designtogglebutton

Change Background size of wpf toggle button


We have a normal toggle button deisgned with wpf using XAML. Our toggle switch

However we would like to achieve the following button design, where the background fills the circular switch: Desired toggle switch

Is this achivable without creating a custom button, and by somehow increasing the background size to have almost the same size as the circle switch in the middle.

The style of our designed toggle button:

<ToggleButton x:Name="btn_Rly_1" Content="0" Height="24.4" Margin="54.78,31.355,0,0" VerticalAlignment="Top" Width="56.107" Unchecked="un" Checked="btn_test_Checked" Background="#d7568d" HorizontalAlignment="Left" />

Solution

  • I have written a style for the ToggleButton and hope it can solve your problem.

    <ToggleButton Content="14" IsChecked="False" Padding="2">
        <ToggleButton.Style>
            <Style TargetType="{x:Type ToggleButton}">
                <Setter Property="OverridesDefaultStyle" Value="True" />
                <Setter Property="FocusVisualStyle" Value="{x:Null}" />
                <Setter Property="Background" Value="LightGray" />
                <Setter Property="Width" Value="180" />
                <Setter Property="Height" Value="90" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ToggleButton}">
                            <!-- Root Container -->
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition />
                                    <RowDefinition />
                                </Grid.RowDefinitions>
                                <!-- Used to determine the value of Border.CornerRadius. -->
                                <Rectangle x:Name="PART_OuterRadius" Grid.Row="0" />
                                <Border Background="{TemplateBinding Background}"
                                        BorderBrush="{TemplateBinding BorderBrush}"
                                        BorderThickness="{TemplateBinding BorderThickness}"
                                        CornerRadius="{Binding Path=ActualHeight, ElementName=PART_OuterRadius}"
                                        Padding="{TemplateBinding Padding}"
                                        SnapsToDevicePixels="True"
                                        Grid.RowSpan="2">
                                    <Grid>
                                        <Grid>
                                            <Grid.RowDefinitions>
                                                <RowDefinition />
                                                <RowDefinition />
                                            </Grid.RowDefinitions>
                                            <Rectangle x:Name="PART_InnerRadius" Grid.RowSpan="2" />
                                        </Grid>
                                        <Grid x:Name="PART_Button"
                                                Width="{Binding Path=ActualHeight, ElementName=PART_InnerRadius}"
                                                Height="{Binding Path=ActualHeight, ElementName=PART_InnerRadius}"
                                                HorizontalAlignment="Left">
                                            <Ellipse Fill="White" />
                                            <!-- Scale the content and limit its size within a circular area. -->
                                            <Viewbox>
                                                <ContentPresenter Margin="5" />
                                            </Viewbox>
                                        </Grid>
                                    </Grid>
                                </Border>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsChecked" Value="True">
                                    <Setter Property="HorizontalAlignment" Value="Right" TargetName="PART_Button" />
                                    <Setter Property="Background" Value="LimeGreen" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ToggleButton.Style>
    </ToggleButton>