Question

我有两个AppBarButton放在一个网格中。当没有附加弹出按钮时，它们将按预期显示，但是在我附加弹出按钮的时候，系统在图标右侧添加了V形符号/箭头。

如何去除人字形/箭头？我意识到这可能是出于可用性目的，但是考虑到...表示一个菜单，而另一个则显示带有文本框的Flyout，我觉得这些都是多余的。

XAML如下：

            <AppBarButton Icon="NewFolder" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" Height="40">
                <AppBarButton.Flyout>
                    <Flyout>
                        <!-- Removed for brevity -->
                    </Flyout>
                </AppBarButton.Flyout>
            </AppBarButton>

Answer 1

在FontIcon控件中，人字形为SubItemChevron，名称为AppBarButton。它的前景是MenuFlyoutSubItemChevron。因此，简单的方法是使前景透明，您可以像下面这样自定义MenuFlyoutSubItemChevron。

<StaticResource x:Key="MenuFlyoutSubItemChevron" ResourceKey="SystemControlDisabledTransparentBrush" />

以上方法仅使FontIcon透明，但没有隐藏。如果要隐藏FontIcon，则需要自定义AppBarButton样式。找到HasFlyout VisualState并将SubItemChevron.Visibility更改为Collapsed。

<VisualStateGroup x:Name="FlyoutStates">
    <VisualState x:Name="NoFlyout" />
    <VisualState x:Name="HasFlyout">
        <VisualState.Setters>
            <Setter Target="SubItemChevron.Visibility" Value="Collapsed" />
        </VisualState.Setters>
    </VisualState>    
</VisualStateGroup>

更新

<Style TargetType="AppBarButton">
    <Setter Property="Background" Value="{ThemeResource AppBarButtonBackground}" />
    <Setter Property="Foreground" Value="{ThemeResource AppBarButtonForeground}" />
    <Setter Property="BorderBrush" Value="{ThemeResource AppBarButtonBorderBrush}" />
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="VerticalAlignment" Value="Top" />
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
    <Setter Property="FontWeight" Value="Normal" />
    <Setter Property="Width" Value="68" />
    <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
    <Setter Property="AllowFocusOnInteraction" Value="False" />
    <Setter Property="KeyboardAcceleratorPlacementMode" Value="Hidden" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="AppBarButton">
                <Grid x:Name="Root"
                    MinWidth="{TemplateBinding MinWidth}"
                    MaxWidth="{TemplateBinding MaxWidth}"
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    CornerRadius="{TemplateBinding CornerRadius}" >

                    <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>
                                </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="{StaticResource 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>
                                </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">

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

                            <VisualState x:Name="PointerOver">
                                <VisualState.Setters>
                                    <Setter Target="Root.Background" Value="{ThemeResource AppBarButtonBackgroundPointerOver}" />
                                    <Setter Target="Root.BorderBrush" Value="{ThemeResource AppBarButtonBorderBrushPointerOver}" />
                                    <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="OverflowTextLabel" />
                                </Storyboard>
                            </VisualState>

                            <VisualState x:Name="Pressed">
                                <VisualState.Setters>
                                    <Setter Target="Root.Background" Value="{ThemeResource AppBarButtonBackgroundPressed}" />
                                    <Setter Target="Root.BorderBrush" Value="{ThemeResource AppBarButtonBorderBrushPressed}" />
                                    <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="OverflowTextLabel" />
                                </Storyboard>
                            </VisualState>

                            <VisualState x:Name="Disabled">
                                <VisualState.Setters>
                                    <Setter Target="Root.Background" Value="{ThemeResource AppBarButtonBackgroundDisabled}" />
                                    <Setter Target="Root.BorderBrush" Value="{ThemeResource AppBarButtonBorderBrushDisabled}" />
                                    <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">

                                <Storyboard>
                                    <PointerUpThemeAnimation Storyboard.TargetName="ContentRoot" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="OverflowPointerOver">
                                <VisualState.Setters>
                                    <Setter Target="Root.Background" Value="{ThemeResource AppBarButtonBackgroundPointerOver}" />
                                    <Setter Target="Root.BorderBrush" Value="{ThemeResource AppBarButtonBorderBrushPointerOver}" />
                                    <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}" />
                                    <Setter Target="SubItemChevron.Foreground" Value="{ThemeResource AppBarButtonSubItemChevronForegroundPointerOver}" />
                                </VisualState.Setters>

                                <Storyboard>
                                    <PointerUpThemeAnimation Storyboard.TargetName="ContentRoot" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="OverflowPressed">
                                <VisualState.Setters>
                                    <Setter Target="Root.Background" Value="{ThemeResource AppBarButtonBackgroundPressed}" />
                                    <Setter Target="Root.BorderBrush" Value="{ThemeResource AppBarButtonBorderBrushPressed}" />
                                    <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}" />
                                    <Setter Target="SubItemChevron.Foreground" Value="{ThemeResource AppBarButtonSubItemChevronForegroundPressed}" />
                                </VisualState.Setters>

                                <Storyboard>
                                    <PointerDownThemeAnimation Storyboard.TargetName="ContentRoot" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="OverflowSubMenuOpened">
                                <VisualState.Setters>
                                    <Setter Target="Root.Background" Value="{ThemeResource AppBarButtonBackgroundSubMenuOpened}" />
                                    <Setter Target="Root.BorderBrush" Value="{ThemeResource AppBarButtonBorderBrushSubMenuOpened}" />
                                    <Setter Target="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundSubMenuOpened}" />
                                    <Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundSubMenuOpened}" />
                                    <Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundSubMenuOpened}" />
                                    <Setter Target="KeyboardAcceleratorTextLabel.Foreground" Value="{ThemeResource AppBarButtonKeyboardAcceleratorTextForegroundSubMenuOpened}" />
                                    <Setter Target="SubItemChevron.Foreground" Value="{ThemeResource AppBarButtonSubItemChevronForegroundSubMenuOpened}" />
                                </VisualState.Setters>

                                <Storyboard>
                                    <PointerUpThemeAnimation 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="{StaticResource AppBarButtonOverflowTextTouchMargin}" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="GameControllerInputMode">
                                <VisualState.Setters>
                                    <Setter Target="OverflowTextLabel.Padding" Value="{StaticResource 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>
                        <VisualStateGroup x:Name="FlyoutStates">
                            <VisualState x:Name="NoFlyout" />
                            <VisualState x:Name="HasFlyout">
                                <VisualState.Setters>
                                    <Setter Target="SubItemChevron.Visibility" Value="Collapsed" />
                                </VisualState.Setters>
                            </VisualState>

                        </VisualStateGroup>

                    </VisualStateManager.VisualStateGroups>
                    <Grid x:Name="ContentRoot" MinHeight="{ThemeResource AppBarThemeMinHeight}">

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

                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Viewbox x:Name="ContentViewbox"
                            Height="20"
                            Margin="{ThemeResource AppBarButtonContentViewboxCollapsedMargin}"
                            HorizontalAlignment="Stretch"
                            AutomationProperties.AccessibilityView="Raw" >
                            <ContentPresenter x:Name="Content"
                                Height="20"
                                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="2,0,2,6"
                            AutomationProperties.AccessibilityView="Raw" />
                        <TextBlock x:Name="OverflowTextLabel"
                            Text="{TemplateBinding Label}"
                            Foreground="{TemplateBinding Foreground}"
                            FontFamily="{TemplateBinding FontFamily}"
                            TextAlignment="Left"
                            TextTrimming="Clip"
                            TextWrapping="NoWrap"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Center"
                            Margin="12,0,12,0"
                            Padding="{StaticResource 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" />
                        <FontIcon x:Name="SubItemChevron"
                            Grid.Column="2"
                            Glyph="&#xE0E3;"
                            FontFamily="{ThemeResource SymbolThemeFontFamily}"
                            FontSize="12"
                            AutomationProperties.AccessibilityView="Raw"
                            Foreground="{ThemeResource MenuFlyoutSubItemChevron}"
                            Margin="12,0,12,0"
                            MirroredWhenRightToLeft="True"
                            Visibility="Collapsed" />

                    </Grid>

                </Grid>

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

附加了弹出按钮后，删除添加到AppBarButton的V形箭头

1 个答案: