0

How do I know if my AppBarButton is collapsed to the Commandbar.SecondaryCommand? As you can see from the image, when the window size is smaller, some of my buttons are added to the Flyout of More. And they are not displayed properly because I give them CornerRadius. How can I set the CornerRadius to zero when the buttons are added to the SecondaryCommand?

Normal

Collapsed

A better solution for me would be implementing this effect on my own, because the provided More button doesn't have its label and I want to customize the SecondaryCommand Flyout. But I don't know how.

Seaky Lone
  • 992
  • 1
  • 10
  • 29

2 Answers2

1

You can use the VisualState that comes with AppBarButton to solve your problem.

AppBarButton has two modes: normal state and overflow state. It displays rounded corners in normal state and removes rounded corners in overflow state. You can write this way:

<Style TargetType="AppBarButton" x:Key="BasicAppButtonStyle">
    <Setter Property="Background" Value="{ThemeResource AppBarButtonRevealBackground}" />
    <Setter Property="Foreground" Value="{ThemeResource AppBarButtonForeground}" />
    <Setter Property="BorderThickness" Value="{ThemeResource AppBarButtonRevealBorderThemeThickness}" />
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="VerticalAlignment" Value="Top" />
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
    <Setter Property="FontWeight" Value="Normal" />
    <Setter Property="Width" Value="Auto" />
    <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
    <Setter Property="AllowFocusOnInteraction" Value="False" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="AppBarButton">
                <Grid x:Name="Root" MinWidth="{TemplateBinding MinWidth}" MaxWidth="{TemplateBinding MaxWidth}" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding CornerRadius}" Margin="1,0">

                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="ApplicationViewStates">
                            <VisualState x:Name="FullSize" />
                            <VisualState x:Name="Compact">

                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentViewbox" Storyboard.TargetProperty="Margin">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonContentViewboxCompactMargin}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="LabelOnRight">

                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentViewbox" Storyboard.TargetProperty="Margin">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonContentViewboxMargin}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="MinHeight">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarThemeCompactHeight}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="(Grid.Row)">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="(Grid.Column)">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="TextAlignment">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Left" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Margin">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonTextLabelOnRightMargin}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="LabelCollapsed">

                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="MinHeight">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarThemeCompactHeight}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentViewbox" Storyboard.TargetProperty="Margin">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonContentViewboxCompactMargin}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Overflow">
                                <VisualState.Setters>
                                    <Setter Target="ContentRoot.MinHeight" Value="0" />
                                    <Setter Target="ContentViewbox.Visibility" Value="Collapsed" />
                                    <Setter Target="TextLabel.Visibility" Value="Collapsed" />
                                    <Setter Target="OverflowTextLabel.Visibility" Value="Visible" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="OverflowWithToggleButtons">
                                <VisualState.Setters>
                                    <Setter Target="ContentRoot.MinHeight" Value="0" />
                                    <Setter Target="ContentViewbox.Visibility" Value="Collapsed" />
                                    <Setter Target="TextLabel.Visibility" Value="Collapsed" />
                                    <Setter Target="OverflowTextLabel.Visibility" Value="Visible" />
                                    <Setter Target="OverflowTextLabel.Margin" Value="38,0,12,0" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="OverflowWithMenuIcons">
                                <VisualState.Setters>
                                    <Setter Target="ContentRoot.MinHeight" Value="0" />
                                    <Setter Target="ContentViewbox.HorizontalAlignment" Value="Left" />
                                    <Setter Target="ContentViewbox.VerticalAlignment" Value="Center" />
                                    <Setter Target="ContentViewbox.Width" Value="16" />
                                    <Setter Target="ContentViewbox.Height" Value="16" />
                                    <Setter Target="ContentViewbox.Margin" Value="12,0,12,0" />
                                    <Setter Target="TextLabel.Visibility" Value="Collapsed" />
                                    <Setter Target="OverflowTextLabel.Visibility" Value="Visible" />
                                    <Setter Target="OverflowTextLabel.Margin" Value="38,0,12,0" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="OverflowWithToggleButtonsAndMenuIcons">
                                <VisualState.Setters>
                                    <Setter Target="ContentRoot.MinHeight" Value="0" />
                                    <Setter Target="ContentViewbox.HorizontalAlignment" Value="Left" />
                                    <Setter Target="ContentViewbox.VerticalAlignment" Value="Center" />
                                    <Setter Target="ContentViewbox.Width" Value="16" />
                                    <Setter Target="ContentViewbox.Height" Value="16" />
                                    <Setter Target="ContentViewbox.Margin" Value="38,0,12,0" />
                                    <Setter Target="TextLabel.Visibility" Value="Collapsed" />
                                    <Setter Target="OverflowTextLabel.Visibility" Value="Visible" />
                                    <Setter Target="OverflowTextLabel.Margin" Value="76,0,12,0" />
                                </VisualState.Setters>
                            </VisualState>

                        </VisualStateGroup>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <VisualState.Setters>
                                    <Setter Target="Root.CornerRadius" Value="20"/>
                                </VisualState.Setters>
                                <Storyboard>
                                    <PointerUpThemeAnimation Storyboard.TargetName="ContentRoot" />
                                </Storyboard>
                            </VisualState>

                            <VisualState x:Name="PointerOver">
                                <VisualState.Setters>
                                    <Setter Target="Root.CornerRadius" Value="20"/>
                                    <Setter Target="Root.(RevealBrush.State)" Value="PointerOver" />
                                    <Setter Target="Root.Background" Value="{ThemeResource AppBarButtonRevealBackgroundPointerOver}" />
                                    <Setter Target="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
                                    <Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
                                    <Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
                                </VisualState.Setters>

                                <Storyboard>
                                    <PointerUpThemeAnimation Storyboard.TargetName="OverflowTextLabel" />
                                </Storyboard>
                            </VisualState>

                            <VisualState x:Name="Pressed">
                                <VisualState.Setters>
                                    <Setter Target="Root.CornerRadius" Value="15"/>
                                    <Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
                                    <Setter Target="Root.Background" Value="{ThemeResource AppBarButtonRevealBackgroundPressed}" />
                                    <Setter Target="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}" />
                                    <Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}" />
                                    <Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}" />
                                </VisualState.Setters>

                                <Storyboard>
                                    <PointerDownThemeAnimation Storyboard.TargetName="OverflowTextLabel" />
                                </Storyboard>
                            </VisualState>

                            <VisualState x:Name="Disabled">
                                <VisualState.Setters>
                                    <Setter Target="Root.CornerRadius" Value="15"/>
                                    <Setter Target="Root.Background" Value="{ThemeResource AppBarButtonRevealBackgroundDisabled}" />
                                    <Setter Target="Border.BorderBrush" Value="{ThemeResource AppBarButtonRevealBorderBrushDisabled}" />
                                    <Setter Target="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundDisabled}" />
                                    <Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundDisabled}" />
                                    <Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundDisabled}" />
                                    <Setter Target="KeyboardAcceleratorTextLabel.Foreground" Value="{ThemeResource AppBarButtonKeyboardAcceleratorTextForegroundDisabled}" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="OverflowNormal">
                                <VisualState.Setters>
                                    <Setter Target="Root.CornerRadius" Value="0"/>
                                </VisualState.Setters>
                                <Storyboard>
                                    <PointerUpThemeAnimation Storyboard.TargetName="ContentRoot" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="OverflowPointerOver">
                                <VisualState.Setters>
                                    <Setter Target="Root.CornerRadius" Value="0"/>
                                    <Setter Target="Root.Background" Value="{ThemeResource AppBarButtonRevealBackgroundPointerOver}" />
                                    <Setter Target="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
                                    <Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
                                    <Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
                                    <Setter Target="KeyboardAcceleratorTextLabel.Foreground" Value="{ThemeResource AppBarButtonKeyboardAcceleratorTextForegroundPointerOver}" />
                                </VisualState.Setters>

                                <Storyboard>
                                    <PointerUpThemeAnimation Storyboard.TargetName="ContentRoot" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="OverflowPressed">
                                <VisualState.Setters>
                                    <Setter Target="Root.CornerRadius" Value="0"/>
                                    <Setter Target="Root.Background" Value="{ThemeResource AppBarButtonRevealBackgroundPressed}" />
                                    <Setter Target="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}" />
                                    <Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}" />
                                    <Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}" />
                                    <Setter Target="KeyboardAcceleratorTextLabel.Foreground" Value="{ThemeResource AppBarButtonKeyboardAcceleratorTextForegroundPressed}" />
                                </VisualState.Setters>

                                <Storyboard>
                                    <PointerDownThemeAnimation Storyboard.TargetName="ContentRoot" />
                                </Storyboard>
                            </VisualState>

                        </VisualStateGroup>
                        <VisualStateGroup x:Name="InputModeStates">
                            <VisualState x:Name="InputModeDefault" />
                            <VisualState x:Name="TouchInputMode">
                                <VisualState.Setters>
                                    <Setter Target="OverflowTextLabel.Padding" Value="{ThemeResource AppBarButtonOverflowTextTouchMargin}" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="GameControllerInputMode">
                                <VisualState.Setters>
                                    <Setter Target="OverflowTextLabel.Padding" Value="{ThemeResource AppBarButtonOverflowTextTouchMargin}" />
                                </VisualState.Setters>
                            </VisualState>

                        </VisualStateGroup>
                        <VisualStateGroup x:Name="KeyboardAcceleratorTextVisibility">
                            <VisualState x:Name="KeyboardAcceleratorTextCollapsed" />
                            <VisualState x:Name="KeyboardAcceleratorTextVisible">
                                <VisualState.Setters>
                                    <Setter Target="KeyboardAcceleratorTextLabel.Visibility" Value="Visible" />
                                </VisualState.Setters>
                            </VisualState>

                        </VisualStateGroup>

                    </VisualStateManager.VisualStateGroups>
                    <Grid x:Name="ContentRoot" MinHeight="{ThemeResource AppBarThemeMinHeight}" Margin="-1,0">

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>

                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Viewbox x:Name="ContentViewbox"
                        Height="{ThemeResource AppBarButtonContentHeight}"
                        Margin="{ThemeResource AppBarButtonContentViewboxCollapsedMargin}"
                        HorizontalAlignment="Stretch"
                        AutomationProperties.AccessibilityView="Raw" >
                            <ContentPresenter x:Name="Content"
                            Content="{TemplateBinding Icon}"
                            Foreground="{TemplateBinding Foreground}"/>
                        </Viewbox>
                        <TextBlock x:Name="TextLabel"
                        Grid.Row="1"
                        Text="{TemplateBinding Label}"
                        Foreground="{TemplateBinding Foreground}"
                        FontSize="12"
                        FontFamily="{TemplateBinding FontFamily}"
                        TextAlignment="Center"
                        TextWrapping="Wrap"
                        Margin="{ThemeResource AppBarButtonTextLabelMargin}"
                        AutomationProperties.AccessibilityView="Raw" />
                        <TextBlock x:Name="OverflowTextLabel"
                        Text="{TemplateBinding Label}"
                        Foreground="{TemplateBinding Foreground}"
                        FontSize="15"
                        FontFamily="{TemplateBinding FontFamily}"
                        TextAlignment="Left"
                        TextTrimming="Clip"
                        TextWrapping="NoWrap"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Center"
                        Margin="12,0,12,0"
                        Padding="{ThemeResource AppBarButtonOverflowTextLabelPadding}"
                        Visibility="Collapsed"
                        AutomationProperties.AccessibilityView="Raw" />
                        <TextBlock x:Name="KeyboardAcceleratorTextLabel"
                        Grid.Column="1"
                        Style="{ThemeResource CaptionTextBlockStyle}"
                        Text="{TemplateBinding KeyboardAcceleratorTextOverride}"
                        MinWidth="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.KeyboardAcceleratorTextMinWidth}"
                        Margin="24,0,12,0"
                        Foreground="{ThemeResource AppBarButtonKeyboardAcceleratorTextForeground}"
                        HorizontalAlignment="Right"
                        VerticalAlignment="Center"
                        Visibility="Collapsed"
                        AutomationProperties.AccessibilityView="Raw" />
                        <Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}" Grid.RowSpan="2" Grid.ColumnSpan="2" Margin="1,0" />

                    </Grid>

                </Grid>

            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Usage

<AppBarButton Style="{StaticResource BasicAppButtonStyle}" Icon="Shuffle" Label="Shuffle"/>

Best regards.

Richard Zhang
  • 7,523
  • 1
  • 7
  • 13
  • Great! How can I customize the overflow `More` button? – Seaky Lone Sep 05 '19 at 13:42
  • The style of MoreButton is contained within the CommandBar. The amount of code is too large. It is not convenient to write it here, giving you a method: 1. Add a built-in style to the CommandBar ``. 2. Point the cursor on the resource name and press F12 to jump to the resource details. 3. Copy the code inside, find the section about MoreButton inside, modify it as you need it. – Richard Zhang Sep 05 '19 at 13:53
  • Can you elaborate on the second step? On which page should I move my pointer? Do you mean the xaml? It only leads me to the csharp code. – Seaky Lone Sep 06 '19 at 02:01
  • Move the cursor to `CommandBarWithoutRevealStyle`, press F12 to help you jump to the ControlTemplate corresponding to `generic.xaml`, copy the corresponding Style to your project, and modify the content of MoreButton. – Richard Zhang Sep 06 '19 at 07:21
  • Thank you so much! How can I remove the `Commandbar.Content` with that? Is it `ContentControl`? – Seaky Lone Sep 06 '19 at 07:39
  • Why do you want to delete it, many property animations depend on this control, deleting it means you have to adjust the layout of the entire CommandBar. – Richard Zhang Sep 06 '19 at 07:53
  • Because I only need the `PrimaryCommand`. The content is useless to me in this special case. If I remove it, would `PrimaryCommand` still get collapsed to the more button? – Seaky Lone Sep 06 '19 at 08:00
  • If you don't want to overflow the menu, don't delete the SecondaryCommand in the ControlTemplate. Instead, set the CommandBar's `IsDynamicOverflowEnabled` property to `false`. – Richard Zhang Sep 06 '19 at 08:07
  • I do want the overflow. I just want the buttons to be on the left. And the Content seems useless to me. – Seaky Lone Sep 06 '19 at 08:14
  • You can try to modify the ControlTemplate, which is a learning process. But so far, the content of our communication has nothing to do with the question. If you encounter other problems that cannot be solved during the process of modifying the ControlTemplate, you can open a new thread. – Richard Zhang Sep 06 '19 at 08:29
0

I just want to directly answer the question in the title:

There is a property IsInOverflow for AppBarButton that tells you if it is collapsed.

Seaky Lone
  • 992
  • 1
  • 10
  • 29