CODEWITHSUNDEEP
windows-phone-8.1imagebutton
Andrew Simpson
Andrew Simpson

Reputation: 7324

Changing appearance of button when pressed in Windows Phone 8.1

I have a Windows Phone 8.1 RT app.

I have an image button on my page.

What I want is that when i press this button I either set the border to a yellow color or/and change the image.

So, in my mind I just need to trap the keydown and keup events.

In the keydown event I set the 'affect'

In the keyup I revert back to the default state.

The only problem is that these events are never hit when I run/test for this.

This is my markup:

        <Button Name="btn0" Width="75" Height="75">
            <Button.Background >
                <ImageBrush ImageSource="ms-appx:///Images/0.png" Stretch="Uniform"/>
            </Button.Background>
        </Button>

This is my code for the events:

//set in the initialize event of my page:

      btn0.KeyDown += btn0_KeyDown;
      btn0.KeyUp += btn0_KeyUp;

//set in the initialize event of my page:

    void btn0_KeyUp(object sender, KeyRoutedEventArgs e)
    {
        lblTitle.Text = "btn0_KeyUp";  //never hit
    }

    void btn0_KeyDown(object sender, KeyRoutedEventArgs e)
    {
        lblTitle.Text = "btn0_KeyDown";  //never hit
    }

What do I need to do?

Thanks

Upvotes: 0

Views: 1671

Answers (1)

Rob Caplan - MSFT
Rob Caplan - MSFT

Reputation: 21899

KeyDown and KeyUp are keyboard events. They should get hit if the user sets the keyboard focus to the button and types. This probably isn't what you want.

To change the button's appearance when it is pushed you'll want to edit the button's style and modify its visual states. Select your button, right click, and choose Edit Template... to create a copy of the default template, then go to the default template and edit the section to make the changes you want.

To add changing the border to yellow to the default pressed handling change the state to the following:

<VisualState x:Name="Pressed">
    <Storyboard>
        <PointerDownThemeAnimation Storyboard.TargetName="Grid"/>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPressedForegroundThemeBrush}"/>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPressedBackgroundThemeBrush}"/>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush)" Storyboard.TargetName="Border">
            <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                    <SolidColorBrush Color="Yellow"/>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>

See MSDN's Specifying the visual behavior of a control for a walkthrough of of Visual States (on a Checkbox, but the concepts are the same)

The easiest way to do this is to edit the visual states in Blend with its visual state recorder. Edit the template, choose the States tab, then set the properties you want applied for that state.

Upvotes: 2

Related Questions