CODEWITHSUNDEEP
uwp
edjoker
edjoker

Reputation: 167

a custom togglebutton in UWP

<ToggleButton Content="This is a custom button" Name="toggleButton">
        <ToggleButton.Template>
            <ControlTemplate TargetType="ToggleButton">
                <Grid Name="RootGrid">
                    <TextBlock Text="{TemplateBinding Content}"
                           Name="Text"
                               FontSize="10"
                              />
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CheckStates">
                            <VisualState x:Name="Checked">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="Text" Storyboard.TargetProperty="FontSize"
                                                     To="50" Duration="0:0:2" EnableDependentAnimation="True"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unchecked">
                                <Storyboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="Text" Storyboard.TargetProperty="FontSize"
                                                     To="10" Duration="0"  EnableDependentAnimation="True"/>
                                    </Storyboard>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Grid>
            </ControlTemplate>
        </ToggleButton.Template>
    </ToggleButton>

I want to create a custom togglebutton when it's checked, the fontsize of the text will be 50 in doubleanimation when it's unchecked, the fontsize of the text will be 10 in doubleanimation .The code is below. But when i run the code.when i click the button first , the fontsize doesn't become 50 immediately.it starts to change after several seconds.And when i click the button again so that the button is unchecked.But the fontsize doesn't change,it still be 50. How can i change the code so that i can make a button that meets my need?

Upvotes: 4

Views: 1218

Answers (1)

Jessica
Jessica

Reputation: 2067

Just change the Duration from "0:0:2" to "0" since you cannot animate the font size anyway.

You don't need to set anything in the Unchecked state, and an easier way is use visual state setters.

<ToggleButton Content="This is a custom button"
              Name="toggleButton"
              HorizontalAlignment="Center">
    <ToggleButton.Template>
        <ControlTemplate TargetType="ToggleButton">
            <Grid Name="RootGrid">
                <TextBlock Text="{TemplateBinding Content}"
                           Name="Text"
                           FontSize="10" />
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CheckStates">
                        <VisualState x:Name="Checked">
                            <VisualState.Setters>
                                <Setter Target="Text.(TextBlock.FontSize)"
                                        Value="50" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Unchecked" />
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
            </Grid>
        </ControlTemplate>
    </ToggleButton.Template>
</ToggleButton>

Use a style

<ToggleButton Content="This is a custom button">
    <ToggleButton.Style>
        <Style TargetType="ToggleButton">
            <Setter Property="Background"
                    Value="Transparent" />
            <Setter Property="Foreground"
                    Value="{ThemeResource ToggleButtonForeground}" />
            <Setter Property="BorderBrush"
                    Value="{ThemeResource ToggleButtonBorderBrush}" />
            <Setter Property="BorderThickness"
                    Value="{ThemeResource ToggleButtonBorderThemeThickness}" />
            <Setter Property="Padding"
                    Value="8,4,8,4" />
            <Setter Property="HorizontalAlignment"
                    Value="Center" />
            <Setter Property="VerticalAlignment"
                    Value="Center" />
            <Setter Property="FontFamily"
                    Value="{ThemeResource ContentControlThemeFontFamily}" />
            <Setter Property="FontWeight"
                    Value="Normal" />
            <Setter Property="FontSize"
                    Value="10" />
            <Setter Property="UseSystemFocusVisuals"
                    Value="True" />
            <Setter Property="FocusVisualMargin"
                    Value="-3" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Grid x:Name="RootGrid"
                                Background="{TemplateBinding Background}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
                                                                            Storyboard.TargetName="RootGrid">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource ToggleButtonBackgroundPointerOver}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
                                                                            Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource ToggleButtonBorderBrushPointerOver}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                            Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource ToggleButtonForegroundPointerOver}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
                                                                            Storyboard.TargetName="RootGrid">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource ToggleButtonBackgroundPressed}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
                                                                            Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource ToggleButtonBorderBrushPressed}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                            Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource ToggleButtonForegroundPressed}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
                                                                            Storyboard.TargetName="RootGrid">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource ToggleButtonBackgroundDisabled}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                            Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource ToggleButtonForegroundDisabled}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
                                                                            Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource ToggleButtonBorderBrushDisabled}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Checked">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="FontSize"
                                                                            Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="50" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
                                                                            Storyboard.TargetName="RootGrid">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource ToggleButtonBackgroundChecked}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                            Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource ToggleButtonForegroundChecked}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
                                                                            Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource ToggleButtonBorderBrushChecked}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="CheckedPointerOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="FontSize"
                                                                            Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="50" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
                                                                            Storyboard.TargetName="RootGrid">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource ToggleButtonBackgroundCheckedPointerOver}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
                                                                            Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource ToggleButtonBorderBrushCheckedPointerOver}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                            Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource ToggleButtonForegroundCheckedPointerOver}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="CheckedPressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="FontSize"
                                                                            Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="50" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
                                                                            Storyboard.TargetName="RootGrid">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource ToggleButtonBackgroundCheckedPressed}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                            Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource ToggleButtonForegroundCheckedPressed}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
                                                                            Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource ToggleButtonBorderBrushCheckedPressed}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="CheckedDisabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="FontSize"
                                                                            Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="50" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
                                                                            Storyboard.TargetName="RootGrid">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource ToggleButtonBackgroundCheckedDisabled}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                            Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource ToggleButtonForegroundCheckedDisabled}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
                                                                            Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource ToggleButtonBorderBrushCheckedDisabled}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ContentPresenter x:Name="ContentPresenter"
                                                AutomationProperties.AccessibilityView="Raw"
                                                BorderBrush="{TemplateBinding BorderBrush}"
                                                BorderThickness="{TemplateBinding BorderThickness}"
                                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                                ContentTransitions="{TemplateBinding ContentTransitions}"
                                                Content="{TemplateBinding Content}"
                                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                Padding="{TemplateBinding Padding}"
                                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ToggleButton.Style>
</ToggleButton>

Upvotes: 2

Related Questions