locked
How to make a a group of controls visible and invisible on user interaction?

    Question

  • Hi  can anybody tell me how to make a group of appbar buttons invisible and visible when a user clicks on them? For example say i have a group of 4 buttons one,two,three,four in a stackpanel and on clicking "one" i have to disable it and show 10 appbar buttons in which is inside another stackpanel say its named "TenStack".. And when i click on button "two" i have to enable button "one" and make "TenStack" invisible and Show the next stackpanel with 10 other buttons and so on.. This is for landscape and similarly for portrait when the number of buttons are more i am displaying 5 buttons and making others invisible and showing an additional button "more options" which on clicked shows the rest of the buttons.  This process of making the buttons visible and invisible is making me crazy.. is there any clean and fast way to do this? like looping through the grid and Stackpanels and making the required buttons visible and invisible?

    foreach (Control ctrl in ScreenSharePageAppBarGrid.Children)
                {
                    if (ctrl.GetType() == typeof(Button))
                    {
                        ((Button)ctrl).IsEnabled=false;
                        ((Button) ctrl).Opacity = 0.5;
    
                    }
                }
    The above code fails when there are stackpanels inside the grid,it works when there are no stackpanels inside but it makes all the buttons disabled and changes it opacity to 0.5. Any suggestion or guidance would help. Thanks in advance.


    Thanks and Regards, JohnnyWalker.

    Thursday, March 21, 2013 12:19 PM

Answers

  • Try using VisualTreeHelper to find child and then you set the visiblity and enabled property for that UI element. You can also check FindName function to locate particular control by Name.

    Thanks, Sachin


    • Edited by Sachin S Thursday, March 21, 2013 1:42 PM
    • Marked as answer by JohnnyWalker9 Monday, March 25, 2013 9:22 AM
    Thursday, March 21, 2013 1:40 PM
  • I agree with you that there may be such situations.  I would also consider whether the app bar is being used appropriately in that case.  Maybe app bar buttons opening menus would be less confusing to the user?

    A topic for the UI forum for sure.


    • Marked as answer by JohnnyWalker9 Monday, March 25, 2013 9:22 AM
    Thursday, March 21, 2013 2:49 PM

All replies

  • Try setting Visibility="Collapsed" on the StackPanel itself.

    Rebecca M. Riordan

    Thursday, March 21, 2013 1:22 PM
  • Try setting Visibility="Collapsed" on the StackPanel itself.

    Rebecca M. Riordan

    That doesn't help when i want to disable some buttons and make the visibility of some buttons to true.

    Thanks and Regards, JohnnyWalker.

    Thursday, March 21, 2013 1:25 PM
  • Try using VisualTreeHelper to find child and then you set the visiblity and enabled property for that UI element. You can also check FindName function to locate particular control by Name.

    Thanks, Sachin


    • Edited by Sachin S Thursday, March 21, 2013 1:42 PM
    • Marked as answer by JohnnyWalker9 Monday, March 25, 2013 9:22 AM
    Thursday, March 21, 2013 1:40 PM
  • So you're working with both visible/invisible and enabled/disabled? You can do both...

    Button1_Click(...)
    {
       Button1.Enabled = false;
       Button2.Enabled = true;
       StackForButton1.Visibility = "Visible";
       StackForButton2.Visibility = "Collapsed";
    }

    Button2_Click(...)
    {
      Button1.Enabled = true;
      Button2.
      StackForButton1.Visibility = "Collapsed";
      StackForButton2.Visibility = "Visible";
    }

    Now, you're right, that's a lot of repetitive code. You could re-factor the toggles:

    private void DisplayStackStackPanel stackToDisplay)
    {
        /// either hard code the stackpanels here, or use VisualTreeHelper to loop through children
    }

    Do the same for toggling the Enabled property of the Buttons, and your Click handlers would become:

    Button1_Click(...)
    {
       DisableButton(Button1);
       DisplayStackPanel(StackForButton1);
    }

    You might be able to make that even more generic by using the sender parameter, but I'm not sure off the top of my head how you'd know from the Button object which StackPanel should be displayed.


    Rebecca M. Riordan

    Thursday, March 21, 2013 1:50 PM
  • So you're working with both visible/invisible and enabled/disabled? You can do both...

    Button1_Click(...)
    {
       Button1.Enabled = false;
       Button2.Enabled = true;
       StackForButton1.Visibility = "Visible";
       StackForButton2.Visibility = "Collapsed";
    }

    Button2_Click(...)
    {
      Button1.Enabled = true;
      Button2.
      StackForButton1.Visibility = "Collapsed";
      StackForButton2.Visibility = "Visible";
    }

    Now, you're right, that's a lot of repetitive code. You could re-factor the toggles:

    private void DisplayStackStackPanel stackToDisplay)
    {
        /// either hard code the stackpanels here, or use VisualTreeHelper to loop through children
    }

    Do the same for toggling the Enabled property of the Buttons, and your Click handlers would become:

    Button1_Click(...)
    {
       DisableButton(Button1);
       DisplayStackPanel(StackForButton1);
    }

    You might be able to make that even more generic by using the sender parameter, but I'm not sure off the top of my head how you'd know from the Button object which StackPanel should be displayed.


    Rebecca M. Riordan

    I have done the following to disable the required buttons, Can you tell me on how to toggle the visibility state?

    public static string[] RequiredButtons = { "FifthButton", "SixthButton", "SeventhButton" };
            
            public static bool IsRequired(String name)
            {
                return -1 != Array.IndexOf(RequiredButtons, name);
            }
    
            
            public List<Control> DisableButtons(DependencyObject parent)
            {
                var list = new List<Control> {};
                for (var i = 0; i < VisualTreeHelper.GetChildrenCount(parent); i++)
                {
                    DependencyObject child = VisualTreeHelper.GetChild(parent, i);
                    if (child is Control)
                        list.Add(child as Control);
                    list.AddRange(AllChildren(child));
                    if ((child.GetType() == typeof (Button)) && (!IsRequired(((Button) child).Name)))
                    {
                        ((Button) child).IsEnabled = false;
                        ((Button) child).Opacity = 0.5;
                    }
                }
                return list;
            }



    Thanks and Regards, JohnnyWalker.

    Thursday, March 21, 2013 2:05 PM
  • Try this  to toggle the visibility 

    ((Button) child).Visibility = Windows.UI.Xaml.Visibility.Visible;

    or 

    ((Button) child).Visibility = Windows.UI.Xaml.Visibility.Collapsed;


    Thanks, Sachin

    Thursday, March 21, 2013 2:28 PM
  • Do you mean actually toggling the visibility? Just set MyStackPanel.Visibility=Visibility.Collapsed or MyStackPanel.Visibility = Visibility.Visible.

    But something tells me that isn't what you were actually asking....?


    Rebecca M. Riordan

    Thursday, March 21, 2013 2:29 PM
  • My suggestion is that you review Guidelines and checklists for app bars.

    Personally, I would never show a disabled button in the app bar.  If the user can't tap it, don't show it (i.e. Visibility.Collapsed).  Let the user focus on things he can do, not things he can't in any given context.

    Thursday, March 21, 2013 2:35 PM
  • My suggestion is that you review Guidelines and checklists for app bars.

    Personally, I would never show a disabled button in the app bar.  If the user can't tap it, don't show it (i.e. Visibility.Collapsed).  Let the user focus on things he can do, not things he can't in any given context.

    I've noticed before that the Guidelines don't speak to the issue of disabled controls.

    My feeling is that you don't show irrelevant commands, but you also don't let the UI jump around unexpectedly, which would happen if a button needed to be disabled while the AppBar is open (and that sounds like the situation here.) Does that not concern you? (A question without prejudice...)


    Rebecca M. Riordan

    Thursday, March 21, 2013 2:40 PM
  • I agree with you that there may be such situations.  I would also consider whether the app bar is being used appropriately in that case.  Maybe app bar buttons opening menus would be less confusing to the user?

    A topic for the UI forum for sure.


    • Marked as answer by JohnnyWalker9 Monday, March 25, 2013 9:22 AM
    Thursday, March 21, 2013 2:49 PM
  • I agree with you that there may be such situations.  I would also consider whether the app bar is being used appropriately in that case.  Maybe app bar buttons opening menus would be less confusing to the user?

    A topic for the UI forum for sure.


    Yes, it had occurred to me that this was sounding a bit more like a wizard than an AppBar. JohnnyWalker9, would you like to jump in and tell us what these buttons actually do?

    And yes, a topic for the UI forum. I'll start it if you promise to join in....


    Rebecca M. Riordan

    Thursday, March 21, 2013 2:58 PM
  • I agree with you that there may be such situations.  I would also consider whether the app bar is being used appropriately in that case.  Maybe app bar buttons opening menus would be less confusing to the user?

    A topic for the UI forum for sure.


    Yes, it had occurred to me that this was sounding a bit more like a wizard than an AppBar. JohnnyWalker9, would you like to jump in and tell us what these buttons actually do?

    And yes, a topic for the UI forum. I'll start it if you promise to join in....


    Rebecca M. Riordan

    Please have a look at this image in my skydrive, i hope this makes it clear. if it doesn't i will share a pptx file showing the flow tomorrow.see this picture.

    Thanks and Regards, JohnnyWalker.

    Thursday, March 21, 2013 7:25 PM
  • I think jrboddie is right, JohnnyWalker9, those should be popup menus, not additional buttons.

    Rebecca M. Riordan

    Thursday, March 21, 2013 7:35 PM
  • I think jrboddie is right, JohnnyWalker9, those should be popup menus, not additional buttons.

    Rebecca M. Riordan

    Ok i understand, popup menus would be easier. Thank you for the reply.

    Thanks and Regards, JohnnyWalker.

    Monday, March 25, 2013 9:21 AM