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" />
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>