CommandBar AppBarButton Размер значка

Question

Я пытаюсь изменить значки CommandBar AppBarButton, чтобы они выглядели как Календарь, Почта и т. Д. Microsoft Apps.

Как вы можете видеть ниже, значки Microsoft Apps более гладкие, тонкие, чем у меня, а такжеимеют яркий белый цвет.

Я пытался применить ресурсы, и другие конфигурации, такие как размер шрифта, высота, ширина и ничего не работает, я не знаю, как это сделать.

Этомой исходный код:

<Page.Resources>
    link to resouse file:
    https://msdn.microsoft.com/pt-br/library/windows/apps/mt299105.aspx
</Page.Resources>

<CommandBar Height="40" OverflowButtonVisibility="Collapsed" Background="Transparent" IsOpen="True" DefaultLabelPosition="Right">
    <CommandBar.Content>
        <TextBlock Text="X" FontFamily="SEGOE" Padding="10,0,0,0"/>
    </CommandBar.Content>
    <AppBarButton Icon="Save" Label="Save"/>
    <AppBarButton Icon="Delete" Label="Save"/>
    <AppBarButton Style="{StaticResource AppBarButtonStyle1}" Icon="Save" Label="Save"/>
    <AppBarButton Style="{StaticResource AppBarButtonStyle1}" Icon="Delete" Label="Delete"/>
</CommandBar>

Answer 1

Стиль AppBarButton, который вы упомянули в комментарии выше, не самый последний.

Вы можете получить последний стиль, выполнив следующие действия:

Перейдите к «Схема документа -> Щелкните правой кнопкой мыши AppBarButton -> Изменить шаблон -> Редактировать копию» .

Затем вы обнаружите, что <ContentPresenter x:Name="Content" Content="{TemplateBinding Icon}" Foreground="{TemplateBinding Foreground}"/> обернуто в ViewBox. Этот ViewBox имеет фиксированную высоту (16). Вы можете изменить желаемое значение высоты.

<Style x:Key="AppBarButtonStyle" 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" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="{TemplateBinding CornerRadius}" MinWidth="{TemplateBinding MinWidth}" MaxWidth="{TemplateBinding MaxWidth}">
                        <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="Visible" />
                                    </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" AutomationProperties.AccessibilityView="Raw" HorizontalAlignment="Stretch" Height="50" Margin="{ThemeResource AppBarButtonContentViewboxCollapsedMargin}">
                                <ContentPresenter x:Name="Content" Content="{TemplateBinding Icon}" Foreground="{TemplateBinding Foreground}" Height="20" />
                            </Viewbox>
                            <TextBlock x:Name="TextLabel" AutomationProperties.AccessibilityView="Raw" FontFamily="{TemplateBinding FontFamily}" Foreground="{TemplateBinding Foreground}" FontSize="12" Margin="2,0,2,6" Grid.Row="1" Text="{TemplateBinding Label}" TextWrapping="Wrap" TextAlignment="Center" />
                            <TextBlock x:Name="OverflowTextLabel" AutomationProperties.AccessibilityView="Raw" FontFamily="{TemplateBinding FontFamily}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Stretch" Margin="12,0,12,0" Padding="{StaticResource AppBarButtonOverflowTextLabelPadding}" Text="{TemplateBinding Label}" TextTrimming="Clip" TextWrapping="NoWrap" TextAlignment="Left" VerticalAlignment="Center" Visibility="Collapsed" />
                            <TextBlock x:Name="KeyboardAcceleratorTextLabel" AutomationProperties.AccessibilityView="Raw" Grid.Column="1" Foreground="{ThemeResource AppBarButtonKeyboardAcceleratorTextForeground}" HorizontalAlignment="Right" MinWidth="{Binding TemplateSettings.KeyboardAcceleratorTextMinWidth, RelativeSource={RelativeSource Mode=TemplatedParent}}" Margin="24,0,12,0" Style="{ThemeResource CaptionTextBlockStyle}" Text="{TemplateBinding KeyboardAcceleratorTextOverride}" VerticalAlignment="Center" Visibility="Collapsed" />
                            <FontIcon x:Name="SubItemChevron" AutomationProperties.AccessibilityView="Raw" Grid.Column="2" FontFamily="{ThemeResource SymbolThemeFontFamily}" Foreground="{ThemeResource MenuFlyoutSubItemChevron}" FontSize="12" Glyph="&#xE0E3;" MirroredWhenRightToLeft="True" Margin="12,0,12,0" Visibility="Collapsed" />
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

<CommandBar>
    <AppBarButton Style="{StaticResource AppBarButtonStyle}" Label="add" Icon="Save">
    </AppBarButton>
</CommandBar>