locked
Cannot cick on button normally after changing the style to appbar button style in Windows Store app development RRS feed

  • Question

  • Hi, I just add a button in the canvas and change the style of the button to a play button.

    The code is like:

    b1.Style = Application.Current.Resources[buttonStyle] as Style;
             

    buttonStyle is just the string that denotes the style.

    However, after successfully adding in a play button, I could not click on it normally. When the mouse was moved into the button and clicked, nothing happened. However, if you move the button a little bit out of the button, sometimes it works. Does anyone know why this happened and how to solve it?


    Qingye Jiang

    Tuesday, November 19, 2013 12:57 AM

Answers

  • The problem appears to be elsewhere in your app, not in the code you included. Do you have another control that may be overriding the pointer messages?

    I dropped your sample code into a new project and it worked just fine. Calling addButtonIntoCanvas to create a PlayAppBarButtonStyle button showed a button with the Play icon and clicking it called playbuttonClick.

    Can you please provide a minimal project which demonstrates the problem?

    Also your app should always set the AutomationProperties.Name . This is essential for accessibility: otherwise screen readers won't be able to identify the button to vision impaired users.

    If you don't want the text to show up under the button then you can alter the AppBarButtonStyle to remove or to collapse the TextLabel.

    --Rob

    • Marked as answer by Qingye Jiang Wednesday, November 20, 2013 5:40 PM
    Wednesday, November 20, 2013 1:15 AM
    Moderator

All replies

  • Can you please provide more context to explain what you are doing here?

    How is the button originally defined? What is in buttonStyle? Is this a Windows 8 app with an app bar button style or is it a Windows 8.1 app with an AppBarButton?

    Can you provide a minimal sample demonstrating the problem?

    --Rob

    Tuesday, November 19, 2013 1:45 AM
    Moderator
  • Thanks for your reply Rob. Here is the thing:

    I am trying to read the task data from the Project Server, and for each task, I will create a canvas to contain all the information of that task.

    The button I mentioned is just an element that I want to add into the canvas.

    Here is the whole code that I used to add an appbar style button into the canvas.

        
            /**
             * The following function is used to add in the button into certain canvas
             * Based on the button type, there will be different handlers attached to the button
             * The task ID will be transmitted together with the handler for handler dictionary search
             * @author   Qingye Jiang
             * @date   11-13-2013
             * @para   "buttonStyle" is the appbar button style you want the button to be
             * @para   "newName" is the String that you want to add beneath the button
             * @para   "leftOffset" and "TopOffset" define the relative location of the button to the Canvas
             * @para   "ID" is the task ID corresponding to this Canvas
             */
            public Button addButtonIntoCanvas(Canvas C, String buttonStyle, String newName, int leftOffset, int TopOffset, String ID,double totalWork)// the two paremters determins the relative position of the button in the Canvas
            {
    
    
    
    
                Button b1 = new Button();
    
                b1.Style = Application.Current.Resources[buttonStyle] as Style;
              
               
                switch (buttonStyle)
                {
    
                    // Add the handler of the play button click  
                    case "PlayAppBarButtonStyle":
                        b1.Click += new RoutedEventHandler((sender, e) => playbuttonClick(sender, e, ID,totalWork));
                        break;
    
                    // Add the handler of the pause button click
                    case "PauseAppBarButtonStyle":
                        b1.Click += new RoutedEventHandler((sender, e) => pausebuttonClick(sender, e, ID));
                        break;
    
                    default:
                        break;
                }
    
    
                b1.Background = new SolidColorBrush(Colors.Black);
                
    
                //set the text beneath the button. My initial plan is to set it empty 
                AutomationProperties.SetName(b1, newName);
                
    
                //set relative location of the button
               
                Canvas.SetLeft(b1, Canvas.GetLeft(C) + leftOffset);
                Canvas.SetTop(b1, Canvas.GetTop(C) + TopOffset);
                
                //Now we define the render tranformation for the button we want to add
               
                //add the button into the canvas
                C.Children.Add(b1);
                transformButton(b1, 0, .9, .9);
               
               
    
                return b1;
            }
    


    Qingye Jiang

    Tuesday, November 19, 2013 5:09 PM
  • I used two styles currently, one is "PlayAppBarButtonStyle", and the other one is "PauseAppBarButtonStyle"

    Qingye Jiang

    Tuesday, November 19, 2013 5:11 PM
  • The problem appears to be elsewhere in your app, not in the code you included. Do you have another control that may be overriding the pointer messages?

    I dropped your sample code into a new project and it worked just fine. Calling addButtonIntoCanvas to create a PlayAppBarButtonStyle button showed a button with the Play icon and clicking it called playbuttonClick.

    Can you please provide a minimal project which demonstrates the problem?

    Also your app should always set the AutomationProperties.Name . This is essential for accessibility: otherwise screen readers won't be able to identify the button to vision impaired users.

    If you don't want the text to show up under the button then you can alter the AppBarButtonStyle to remove or to collapse the TextLabel.

    --Rob

    • Marked as answer by Qingye Jiang Wednesday, November 20, 2013 5:40 PM
    Wednesday, November 20, 2013 1:15 AM
    Moderator
  • Thank you sir! Yes, I also created another project to run the code and actually the code works very well. I will check the other parts of my code the if I find the reason, I will report you.

    Thank you very much for the AutomationProperties advice. However I am a little confused what kind of vision impaired users will be influenced? I have already removed the text beneath the button


    Qingye Jiang

    Wednesday, November 20, 2013 5:40 PM
  • I think I got the reason. In the function AddCanvas(), except for adding the buttons, I also add several TextBlocks. Those TextBlocks' height were set too high that they may have covered the button.

    I do appreciate that you spend time trying my code. I will definitely do more testing before I bring up questions on forum next time!~


    Qingye Jiang

    Wednesday, November 20, 2013 5:59 PM