CODEWITHSUNDEEP
c#win-universal-appwindows-10-universal
user3821206
user3821206

Reputation: 619

prevent the going forward of an icon when I apply a Style on a button in a universal app

I 'am having a problem in setting the image icon style of my SplitView Menu like the Groove app menu,this is my code :

<Style  x:Key="ButtontopStyleGroove"
        TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                   Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="transparent" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ContentPresenter x:Name="ContentPresenter"
                          BorderBrush="#393185"
                          Content="{TemplateBinding Content}"
                          />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

this is the result I get:

enter image description here

the problem is that when I click on the button to apply the style that I have defined,the icon goes forward,because of the Border that I have added in style

so please have you any idea,in how to correct my code to prevent the going forward of the icon when I select the button

thanks for help

Upvotes: 0

Views: 23

Answers (1)

Nicholas Schuster
Nicholas Schuster

Reputation: 282

The problem here is that the border has no thickness when being invisible. When it becomes visible the whole client area will then become shifted (and possibly cropped) by the amount of space that is now needed to draw the border (aka the thickness).

To avoid shifting you could change the padding to negative border thickness. This way the border thickness moves the content to the right whereas the content moves to the left. This results in no movement at all.

Upvotes: 1

Related Questions