So i have WPF
application and i am using this ToggleButton Style
:
<Style x:Key="SwitchTypeToggleButton"
TargetType="{x:Type ToggleButton}">
<Style.Resources>
<Color x:Key="Color.Additional.LightGrey">LightCoral</Color>
<Color x:Key="Color.Additional.MediumGrey">Red</Color>
<Color x:Key="Color.MedtronicBranding.MedtronicBlue">Gainsboro</Color>
<Color x:Key="Color.MedtronicBranding.CobaltBlue">LightSeaGreen</Color>
<Style x:Key="ToggleButtonContentTextbox"
TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Stretch" />
</Style>
<SolidColorBrush x:Key="ToggleButtonFalseBackground"
Color="{StaticResource Color.Additional.LightGrey}" />
<SolidColorBrush x:Key="ToggleButtonTrueBackground"
Color="{StaticResource Color.MedtronicBranding.CobaltBlue}" />
<SolidColorBrush x:Key="ToggleButtonFalseForeground"
Color="{StaticResource Color.Additional.MediumGrey}" />
<SolidColorBrush x:Key="ToggleButtonTrueForeground"
Color="{StaticResource Color.MedtronicBranding.MedtronicBlue}" />
<TextBlock x:Key="OffContent"
Style="{StaticResource ToggleButtonContentTextbox}"
Text="Off" />
<Style x:Key="OnContentControl"
TargetType="ContentControl">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<TextBlock FontFamily="Wingdings 2"
FontSize="16"
FontWeight="Bold"
Foreground="White"
Style="{StaticResource ToggleButtonContentTextbox}"
Text="P"
Margin="0,4,0,0"/>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
</Style>
<Style x:Key="OffContentControl"
TargetType="ContentControl">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<TextBlock FontSize="13"
Foreground="Gainsboro"
Style="{StaticResource ToggleButtonContentTextbox}"
Text="X"
Margin="0,3,0,0"/>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
</Style>
</Style.Resources>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Grid x:Name="MainRow">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding ElementName=TopRow,
Path=ActualHeight}" />
<ColumnDefinition />
<ColumnDefinition Width="{Binding ElementName=TopRow,
Path=ActualHeight}" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition x:Name="TopRow" />
<RowDefinition />
</Grid.RowDefinitions>
<Ellipse x:Name="BackgroundEllipse1"
Grid.RowSpan="2"
Grid.Column="0"
Grid.ColumnSpan="3"
Width="{Binding ElementName=MainRow, Path=ActualHeight}"
Height="{Binding ElementName=MainRow, Path=ActualHeight}"
HorizontalAlignment="Left"
Fill="{StaticResource ToggleButtonTrueBackground}" />
<Ellipse x:Name="BackgroundEllipse2"
Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="0"
Grid.ColumnSpan="3"
Width="{Binding ElementName=MainRow, Path=ActualHeight}"
Height="{Binding ElementName=MainRow, Path=ActualHeight}"
HorizontalAlignment="Right"
Fill="{StaticResource ToggleButtonFalseBackground}" />
<Border x:Name="BackgroundBorder"
Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="1"
Background="{StaticResource ToggleButtonTrueBackground}" />
</Grid>
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="AnimationWidth" />
<ColumnDefinition Width="{Binding ElementName=MainRow,
Path=ActualHeight}" />
</Grid.ColumnDefinitions>
<Border x:Name="AnimationSizeBorder"
Grid.Column="0" />
<ContentControl Grid.Column="0"
Style="{StaticResource OnContentControl}" />
</Grid>
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding ElementName=MainRow,
Path=ActualHeight}" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<ContentControl Grid.Column="1"
Style="{StaticResource OffContentControl}" />
</Grid>
<Grid Background="Transparent">
<StackPanel HorizontalAlignment="Left"
Orientation="Horizontal">
<Border Width="{Binding ElementName=AnimationSizeBorder,
Path=ActualWidth}" />
<Ellipse x:Name="ForegroundEllipse"
Width="{Binding ElementName=MainRow,
Path=ActualHeight}"
Height="{Binding ElementName=MainRow,
Path=ActualHeight}"
HorizontalAlignment="Right"
Fill="{StaticResource ToggleButtonTrueForeground}" />
</StackPanel>
</Grid>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="False">
<Setter TargetName="BackgroundBorder" Property="Background"
Value="{StaticResource ToggleButtonFalseBackground}" />
<Setter TargetName="ForegroundEllipse" Property="Fill"
Value="{StaticResource ToggleButtonFalseForeground}" />
<!--<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName
="AnimationSizeBorder"
Storyboard.TargetProperty="(Border.Width)"
To="0" Duration="0:0:3"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName=
"AnimationSizeBorder"
Storyboard.TargetProperty="(Border.Width)"
From="0" Duration="0:0:3"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>-->
<Setter TargetName="AnimationSizeBorder" Property="Width" Value="0" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And want to change its Style
to look like this:
As you can see the Border
under the small Ellipse
is lower and after search inside the Style
i couldn't figure and find what i need to change in order to get this Style
Any idea what i need to do to fit this Style
?
Any idea what i need to do to fit this Style
?