It seems to me that your problem is you are using fixed sizes for your slider inside the ToggleButton.
So that, when the button size is increased, the slider range does not change in proportion. To solve this you can place the elements in separate cells inside a Grid
and use percentages to resize the elements as the Grid
size changes. But there is a more simple approach. Don't trigger the Margin
size to change the sider's positon, trigger the HorizontalAlignment
. Avoid setting any absolute values in the Elipse
Something like this.
<Ellipse
x:Name="Dot"
Width="{Binding ActualHeight, ElementName= ToggleButtonGrid, Mode=OneWay}"
Stretch="Uniform"
Margin="5"
HorizontalAlignment="Left"
Fill="White"
Stroke="DimGray"
StrokeThickness="0.2" / >
<Trigger Property="IsChecked" Value="true" >
<Setter TargetName="Dot" Property="HorizontalAlignment" Value="Right" / >
<Setter TargetName="ToggleButtonBack" Property="Fill" Value="#FF3AEC62" / >
</Trigger >
<Trigger Property="IsChecked" Value="False" >
<Setter TargetName="Dot" Property="HorizontalAlignment" Value="Left" / >
</Trigger >