How to fix this ToggleButton Style

时间:2018-07-24 10:24:16

标签: wpf styles togglebutton

So i have WPF application and i am using this ToggleButton Style:

enter image description here

enter image description here

<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:

enter image description here

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 ?

0 个答案:

没有答案