How to Changing button on click color to none and shrink it

Question

Below is my windows 8 html 5 app code

<Button Click="Button_Click_2" Content="" BorderBrush="{x:Null}" Margin="9,22,9,23">
   <Button.Background>
      <ImageBrush ImageSource="/Assets/Image/Resized-CQ18G.png"/>
   </Button.Background>
</Button>

I want the button to shrink instead of displaying the accent color brush. I searched but i couldnt find any working examples.

Answer 1

You will need to edit the button template to change its pressed behaviour. It's not clear what type of app you mean by "Windows 8 html 5 app" (likely a Windows Store app, but your snippet is Xaml not Html), but the basic concept is the same for all Xaml targets.

The easiest way to do this is in Blend.

Right click on your button and select Edit Template.Edit a Copy... to create a copy of the Button Template and go into the Template editor. This will let you edit the look and feel of the Button.

To clear out the old behaviour go to source view, find the Pressed VisualState, and delete its Storyboard, then go back to the design pane. Leave the state itself:

To change the pressed behaviour to what you want go back to the design pane, select the States tab, and choose the "Pressed" state. You should see a notification "Pressed state recording is on".

Change the bits of the button template you want to change and set the properties to what you want in the Pressed state. To make it smaller, set RenderTransform to scale:

You can also set transition times in the States pane to make the change smoother.

Your final state will be something like:

<VisualState x:Name="Pressed">
    <Storyboard>
        <DoubleAnimation Duration="0" To="0.25" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
        <DoubleAnimation Duration="0" To="0.25" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
    </Storyboard>
</VisualState>

And you'll want to do something similar for the PointerOver state. I had the border turn a custom accent colour:

<Storyboard>
    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush)" Storyboard.TargetName="Border">
        <DiscreteObjectKeyFrame KeyTime="0">
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush)" Storyboard.TargetName="Border">
                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource MyCustomAccentBrush}"/>
            </ObjectAnimationUsingKeyFrames>
        </DiscreteObjectKeyFrame>
    </ObjectAnimationUsingKeyFrames>
</Storyboard>