Question

so from this free software, I could make myself my own metro button as seen below:

the icon is white though, so may not see it properly, and I put it in my Grid (written in XAML) here:

Still it is technically an image, so I made it into Button, here’s a code of transformed image into button:

<Button x:Name="Button_CreateAccount" Content="" HorizontalAlignment="Center" Height="65" Margin="0" Style="{StaticResource Button_CreateAccount}" Width="65" Click="Button_CreateAccount_Clicked"/>

see I name it “Button_CreateAccount”, add a Clicked event handler “Button_CreateAccount_Clicked”, and using a custom style “{StaticResource Button_CreateAccount}”

it works as I expected, but unlike any other button, it won’t blink when pressed and release the blink when released, maybe because it is technically an image. So I reckon I could programmatically make it “blinked” when being pressed by changing its style. Here’s the unedited style added automatically by Blend in Visual Studio 2012:

<Style x:Key="Button_CreateAccount" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Pressed"/>
                                <VisualState x:Name="Disabled"/>
                                <VisualState x:Name="PointerOver"/>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused"/>
                                <VisualState x:Name="PointerFocused"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Image Source="Assets/Icons_White/add_user.png" Stretch="Fill"/>
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

However, I do not speak XAML language 🙁 I don’t have any idea how to simply change the color of the background of the image once being pressed. Any help would be deeply appreciated, thanks!

Answer 1

First, you should make the image have a transparent Background and not a green background. After that do not use your style and change your button to be this

<Button x:Name="Button_CreateAccount" HorizontalAlignment="Center" 
        Height="65" Margin="0" Width="65" Click="Button_CreateAccount_Clicked"
        Background="Green">
    <Image Source="Assets/Icons_White/add_user.png" Stretch="Fill"/>
</Button>

From here you will start to see the color changing when you press. If you want to change what the color is then give the button a new style. The best way is to use Visual Studio or Blend and right click the Button (in design view or in the document outline) and select Edit Template -> Edit a copy…

Change the colors within the Pressed VisualState to change the color when the button is pressed.

<VisualState x:Name="Pressed">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
            <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                    <SolidColorBrush Color="Blue"/>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedForegroundThemeBrush}"/>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>