locked
Button Click Pressed event not fired on Window Tablet 8.1

    Question

  • hi ,

      I have tested my application on window 8 tablet , window 8, window 8.1 desktop  its working fine even on simulator in tablet mode working fine.  but in window 8.1 tablet its not working well, problem is that whenever i  click on any button in  application then pressed event not fired, If i click on button again then pressed event fired. this happen only once when page refresh.  

    This is the style that I am using for buttons

     <Style x:Key="NextQuestionButtonStyle" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Grid.Resources>
                                <BitmapImage x:Key="NormalButton" UriSource="/Assets/startnext-normal.png"></BitmapImage>
                                <BitmapImage x:Key="OnMouseOver" UriSource="/Assets/startnext-over.png"></BitmapImage>
                                <BitmapImage x:Key="OnPresed" UriSource="/Assets/startnext-pressed.png"></BitmapImage>
                                <BitmapImage x:Key="OnDisable" UriSource="/Assets/startnext-disable.png"></BitmapImage>
                            </Grid.Resources>
                            <VisualStateManager.VisualStateGroups>                           
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Source" Storyboard.TargetName="Border">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource OnMouseOver}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>                              
                                    <VisualState x:Name="Pressed">                                   
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Source" Storyboard.TargetName="Border">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource OnPresed}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">                                   
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Source" Storyboard.TargetName="Border">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource OnDisable}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Image x:Name="Border" Source="{StaticResource NormalButton}"  Stretch="None"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    thanks ,

    vineet

    Wednesday, July 02, 2014 7:48 AM

Answers

  • Hi.

    Now resolved the issue. My style for image button as following:

    <Style x:Key="ButtonWithImageStyle" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="NormalButton"/>
                                        </Storyboard>
                                    </VisualState>
                                    
                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="NormalButton">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="OnPressed">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="OnMouseOver"/>
                                        </Storyboard>
                                    </VisualState>
                                    
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>                                        
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="OnPressed"/>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="NormalButton">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="OnMouseOver">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
    
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="NormalButton">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="OnPressed">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="OnDisable"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused" />
                                    <VisualState x:Name="Unfocused" />
                                    <VisualState x:Name="PointerFocused" />
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
    
                            <Image x:Name="NormalButton" Stretch="None" Source="/Assets/play-normal.png"></Image>
                            <Image x:Name="OnMouseOver" Stretch="None" Source="/Assets/play-over.png" Opacity="0"></Image>
                            <Image x:Name="OnPressed" Stretch="None" Source="/Assets/play-pressed.png" Opacity="0"></Image>
                            <Image x:Name="OnDisable" Stretch="None" Source="/Assets/play-disable.png" Opacity="0"></Image>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    I have taken reference from http://social.msdn.microsoft.com/Forums/windowsapps/en-US/1c660d7b-5d87-44bd-b5ed-76485252127c/how-to-set-images-for-each-button-state 


    Thanks & Regards Ravi Shankar

    Monday, July 14, 2014 10:28 AM

All replies

  • I can't reproduce this without all of the images.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Wednesday, July 02, 2014 7:44 PM
    Moderator
  • image normal viewimage hover view

    Image normal, hover, view

    Thursday, July 03, 2014 4:18 AM
  • image pressed viewimage disable view

       image pressed and disable view

    • Proposed as answer by Vishal Kaushik Thursday, July 03, 2014 5:06 AM
    • Unproposed as answer by Vishal Kaushik Thursday, July 03, 2014 5:07 AM
    Thursday, July 03, 2014 4:21 AM
  • I could not reproduce it either, I used this:

    <Page
        x:Class="App1.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App1"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
        <Page.Resources>
            <Style x:Key="NextQuestionButtonStyle" TargetType="Button">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Grid>
                                <Grid.Resources>
                                    <BitmapImage x:Key="NormalButton" UriSource="/Assets/startnext-normal.png"></BitmapImage>
                                    <BitmapImage x:Key="OnMouseOver" UriSource="/Assets/startnext-over.png"></BitmapImage>
                                    <BitmapImage x:Key="OnPresed" UriSource="/Assets/startnext-pressed.png"></BitmapImage>
                                    <BitmapImage x:Key="OnDisable" UriSource="/Assets/startnext-disable.png"></BitmapImage>
                                </Grid.Resources>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="PointerOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Source" Storyboard.TargetName="Border">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource OnMouseOver}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Source" Storyboard.TargetName="Border">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource OnPresed}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Source" Storyboard.TargetName="Border">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource OnDisable}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Image x:Name="Border" Source="{StaticResource NormalButton}" Stretch="None"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Page.Resources>
        <StackPanel Margin="100">
            <Button Style="{StaticResource NextQuestionButtonStyle}" Margin="50" Click="Button_Click"/>
            <TextBlock TextWrapping="Wrap" x:Name="message" Foreground="White" Text="Please press me"/>
        </StackPanel>
    </Page>
    

    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    
    namespace App1
    {
        public sealed partial class MainPage : Page
        {
            int i = 0;
    
            public MainPage()
            {
                this.InitializeComponent();
            }
    
            private void Button_Click(object sender, RoutedEventArgs e)
            {
                message.Text = "I am clicked " + (++i).ToString() + '\n' + message.Text;
            }
        }
    }
    
    Can you post a code on one drive that has this actual issue?


    -- Vishal Kaushik --

    Please 'Mark as Answer' if my post answers your question and 'Vote as Helpful' if it helps you. Happy Coding!!!

    Thursday, July 03, 2014 5:36 AM
  •  did you check this issue on window 8.1 tablet.

    when you click first time then it is not clickable after that on every click it is working fine..

    thanks ,

    vineet

    Thursday, July 03, 2014 8:59 AM
  •  are you able to reproduce this issue
    Friday, July 04, 2014 11:16 AM
  • Hi 

    I have checked this code with Windows 8.1 Tablet (ARM). I am able to reproduce this issue. When i click first time on the button then Button_Click event not fired, after first click always fires this event.

    Note: Please test this on Tablet only not on Simulator.


    Thanks & Regards Ravi Shankar

    Friday, July 11, 2014 12:06 PM
  • Hi

    I have created a button style with VisualState PointerOver, Pressed, Disabled and Normal. I have applied images for all state. When i apply this style and testing on Touch Device (ARM) i am not able to get Button_Pressed event while clicking first time. On first click i am getting only PointerEntered, PointerExited event and after first click i am always getting  PointerEntered, Click and PointerExited event.

    This problem only happens when i am adding images in style for different VisualState of button.

    When i use only color instead of images then its working fine.

    Note: This issue can be seen only on touch device not even Simulator.

    Can you please help me into that.

    Is that any framework issue? 

    I have uploaded sample code on OneDrive. You can download full code from below link:

    Button Sample Code

    Below are my button style:

    <Style x:Key="ButtonWithImageStyle" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Grid.Resources>
                                <BitmapImage x:Key="NormalButton" UriSource="/Assets/play-normal.png"></BitmapImage>
                                <BitmapImage x:Key="OnMouseOver" UriSource="/Assets/play-over.png"></BitmapImage>
                                <BitmapImage x:Key="OnPressed" UriSource="/Assets/play-pressed.png"></BitmapImage>
                                <BitmapImage x:Key="OnDisable" UriSource="/Assets/play-disable.png"></BitmapImage>
                            </Grid.Resources>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused"/>
                                    <VisualState x:Name="Unfocused"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
    
                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Source" Storyboard.TargetName="Border">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource OnMouseOver}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
    
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Source" Storyboard.TargetName="Border">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource OnPressed}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
    
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                                       Storyboard.TargetProperty="Source">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource OnDisable}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
    
                            <Image x:Name="Border" Stretch="None" Source="{StaticResource NormalButton}"></Image>
    
                            <ContentPresenter x:Name="ContentPresenter"
                                              Content="{TemplateBinding Content}"
                                              ContentTransitions="{TemplateBinding ContentTransitions}"
                                              ContentTemplate="{TemplateBinding ContentTemplate}"
                                              Margin="{TemplateBinding Padding}"
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>


    Thanks & Regards Ravi Shankar

    Saturday, July 12, 2014 7:33 AM
  • Hi.

    Now resolved the issue. My style for image button as following:

    <Style x:Key="ButtonWithImageStyle" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="NormalButton"/>
                                        </Storyboard>
                                    </VisualState>
                                    
                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="NormalButton">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="OnPressed">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="OnMouseOver"/>
                                        </Storyboard>
                                    </VisualState>
                                    
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>                                        
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="OnPressed"/>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="NormalButton">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="OnMouseOver">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
    
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="NormalButton">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="OnPressed">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="OnDisable"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused" />
                                    <VisualState x:Name="Unfocused" />
                                    <VisualState x:Name="PointerFocused" />
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
    
                            <Image x:Name="NormalButton" Stretch="None" Source="/Assets/play-normal.png"></Image>
                            <Image x:Name="OnMouseOver" Stretch="None" Source="/Assets/play-over.png" Opacity="0"></Image>
                            <Image x:Name="OnPressed" Stretch="None" Source="/Assets/play-pressed.png" Opacity="0"></Image>
                            <Image x:Name="OnDisable" Stretch="None" Source="/Assets/play-disable.png" Opacity="0"></Image>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    I have taken reference from http://social.msdn.microsoft.com/Forums/windowsapps/en-US/1c660d7b-5d87-44bd-b5ed-76485252127c/how-to-set-images-for-each-button-state 


    Thanks & Regards Ravi Shankar

    Monday, July 14, 2014 10:28 AM