none
[UWP][14393]OverflowButtonVisibility

    Question

  • I am not having success in using OverflowButtonVisibility=Auto. The overflow menu still appears even though I don't have SecondaryCommands populated and all my PrimaryCommands are appearing.

    The only way this is working for me is when I use DefaultLabelPosition=Right.

    And there is other issue: when the Appbuttons go to the overflow menu, and I press the [...] button, it opens it, but the Appbuttons don't show. It opens as a blank menu, but I can press the Appbuttons.

    Maybe I understood this wrong. I am using VS 2017 Community version.

    Any advice?


    Monday, March 20, 2017 10:28 PM

Answers

  • Hi augustobotossi

    It’s because the Secondary Commandbar doesn’t show Icon by default AppBarButton template. If you specify “Label” for the AppBarButton, then you will see them in overflow menu.

    <CommandBar x:Name="MainCommandBar"
                        DefaultLabelPosition="Right"
                        OverflowButtonVisibility="Auto">
                <AppBarButton x:Name="BtNewFile"
                              Label="New Document"
                              Icon="NewFolder"
                              />
                <AppBarButton x:Name="BtOpenFile"
                              Label="Open Document"
                              Icon="OpenFile"
                              />
                <AppBarButton x:Name="BtSaveFile"
                              Label="Save Document"
                              Icon="Save"
                              />
                <AppBarSeparator/>
                <AppBarButton x:Name="BtUndo"
                              ToolTipService.ToolTip="Undo"
                              Icon="Undo"
                              />
                <AppBarButton x:Name="BtRedo"
                              ToolTipService.ToolTip="Redo"
                              Icon="Redo"
                              />
                <AppBarSeparator/>
                <AppBarToggleButton x:Name="BtBold"
                                    ToolTipService.ToolTip="Bold"
                                    Icon="Bold" Label="Bold"
                                    />
                <AppBarToggleButton x:Name="BtItalic"
                                    ToolTipService.ToolTip="Italic"
                                    Icon="Italic" Label="Italic"
                                    />
                <AppBarToggleButton x:Name="BtUnderline"
                                    ToolTipService.ToolTip="Underline"
                                    Icon="Underline" Label="Underline"
                                    />
                <AppBarSeparator/>
                <AppBarToggleButton x:Name="BtWriteMode"
                                        ToolTipService.ToolTip="Write Mode"
                                        Icon="Edit" Label="Edit"
                                        />
                
            </CommandBar>

    If you also want to show the Icon and text, you would need to modify its style. You could refer to my previous reply in this thread: Icons and text in CommandBar.SecondaryCommands 

    Best Regards,

    Xavier Eoro


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Wednesday, March 22, 2017 2:52 AM
    Moderator

All replies

  • Hi augustobotossi,

    I could not understand your question. What did you want to do? What have you done? Please post your code here. Thank you.

    Best Regards,

    Xavier Eoro


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Tuesday, March 21, 2017 8:29 AM
    Moderator
  • That's my code now:

    <CommandBar x:Name="MainCommandBar"
                        DefaultLabelPosition="Right"
                        OverflowButtonVisibility="Auto">
                <AppBarButton x:Name="BtNewFile"
                              Label="New Document"
                              Icon="NewFolder"
                              Click="BtNewFile_Click"/>
                <AppBarButton x:Name="BtOpenFile"
                              Label="Open Document"
                              Icon="OpenFile"
                              Click="BtOpenFile_Click"/>
                <AppBarButton x:Name="BtSaveFile"
                              Label="Save Document"
                              Icon="Save"
                              Click="BtSaveFile_Click"/>
                <AppBarSeparator/>
                <AppBarButton x:Name="BtUndo"
                              ToolTipService.ToolTip="Undo"
                              Icon="Undo"
                              Click="BtUndo_Click"/>
                <AppBarButton x:Name="BtRedo"
                              ToolTipService.ToolTip="Redo"
                              Icon="Redo"
                              Click="BtRedo_Click"/>
                <AppBarSeparator/>
                <AppBarToggleButton x:Name="BtBold"
                                    ToolTipService.ToolTip="Bold"
                                    Icon="Bold"
                                    Click="BtBold_Click"/>
                <AppBarToggleButton x:Name="BtItalic"
                                    ToolTipService.ToolTip="Italic"
                                    Icon="Italic"
                                    Click="BtItalic_Click"/>
                <AppBarToggleButton x:Name="BtUnderline"
                                    ToolTipService.ToolTip="Underline"
                                    Icon="Underline"
                                    Click="BtUnderline_Click"/>
                <AppBarSeparator/>
                <AppBarToggleButton x:Name="BtWriteMode"
                                        ToolTipService.ToolTip="Write Mode"
                                        Icon="Edit"
                                        Click="BtWriteMode_Click"/>
            </CommandBar>
     

    What I want to accomplish is to create a Command Bar that will only show the More button when the primary buttons are moved to the overflow menu. So, when there is no overflow menu, the More button stays hidden.

    By using the code below, I was able to accomplish that. However, if I remove the line DefaultLabelPosition="Right", the More button is not hidden, even though I don't have items there.

    And the other problem I am having is that when items are moved to the overflow menu, they don't show there. They are there, because I can click on them, but the overflow menu appears as as gray column.


    Tuesday, March 21, 2017 10:43 PM
  • Hi augustobotossi

    It’s because the Secondary Commandbar doesn’t show Icon by default AppBarButton template. If you specify “Label” for the AppBarButton, then you will see them in overflow menu.

    <CommandBar x:Name="MainCommandBar"
                        DefaultLabelPosition="Right"
                        OverflowButtonVisibility="Auto">
                <AppBarButton x:Name="BtNewFile"
                              Label="New Document"
                              Icon="NewFolder"
                              />
                <AppBarButton x:Name="BtOpenFile"
                              Label="Open Document"
                              Icon="OpenFile"
                              />
                <AppBarButton x:Name="BtSaveFile"
                              Label="Save Document"
                              Icon="Save"
                              />
                <AppBarSeparator/>
                <AppBarButton x:Name="BtUndo"
                              ToolTipService.ToolTip="Undo"
                              Icon="Undo"
                              />
                <AppBarButton x:Name="BtRedo"
                              ToolTipService.ToolTip="Redo"
                              Icon="Redo"
                              />
                <AppBarSeparator/>
                <AppBarToggleButton x:Name="BtBold"
                                    ToolTipService.ToolTip="Bold"
                                    Icon="Bold" Label="Bold"
                                    />
                <AppBarToggleButton x:Name="BtItalic"
                                    ToolTipService.ToolTip="Italic"
                                    Icon="Italic" Label="Italic"
                                    />
                <AppBarToggleButton x:Name="BtUnderline"
                                    ToolTipService.ToolTip="Underline"
                                    Icon="Underline" Label="Underline"
                                    />
                <AppBarSeparator/>
                <AppBarToggleButton x:Name="BtWriteMode"
                                        ToolTipService.ToolTip="Write Mode"
                                        Icon="Edit" Label="Edit"
                                        />
                
            </CommandBar>

    If you also want to show the Icon and text, you would need to modify its style. You could refer to my previous reply in this thread: Icons and text in CommandBar.SecondaryCommands 

    Best Regards,

    Xavier Eoro


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Wednesday, March 22, 2017 2:52 AM
    Moderator
  • Hi augustobotossi

    It’s because the Secondary Commandbar doesn’t show Icon by default AppBarButton template. If you specify “Label” for the AppBarButton, then you will see them in overflow menu.

    <CommandBar x:Name="MainCommandBar"
                        DefaultLabelPosition="Right"
                        OverflowButtonVisibility="Auto">
                <AppBarButton x:Name="BtNewFile"
                              Label="New Document"
                              Icon="NewFolder"
                              />
                <AppBarButton x:Name="BtOpenFile"
                              Label="Open Document"
                              Icon="OpenFile"
                              />
                <AppBarButton x:Name="BtSaveFile"
                              Label="Save Document"
                              Icon="Save"
                              />
                <AppBarSeparator/>
                <AppBarButton x:Name="BtUndo"
                              ToolTipService.ToolTip="Undo"
                              Icon="Undo"
                              />
                <AppBarButton x:Name="BtRedo"
                              ToolTipService.ToolTip="Redo"
                              Icon="Redo"
                              />
                <AppBarSeparator/>
                <AppBarToggleButton x:Name="BtBold"
                                    ToolTipService.ToolTip="Bold"
                                    Icon="Bold" Label="Bold"
                                    />
                <AppBarToggleButton x:Name="BtItalic"
                                    ToolTipService.ToolTip="Italic"
                                    Icon="Italic" Label="Italic"
                                    />
                <AppBarToggleButton x:Name="BtUnderline"
                                    ToolTipService.ToolTip="Underline"
                                    Icon="Underline" Label="Underline"
                                    />
                <AppBarSeparator/>
                <AppBarToggleButton x:Name="BtWriteMode"
                                        ToolTipService.ToolTip="Write Mode"
                                        Icon="Edit" Label="Edit"
                                        />
                
            </CommandBar>

    If you also want to show the Icon and text, you would need to modify its style. You could refer to my previous reply in this thread: Icons and text in CommandBar.SecondaryCommands 

    Best Regards,

    Xavier Eoro


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.


    Thank you!
    Saturday, March 25, 2017 5:30 PM