win10 uwp 橫向 AppBarButton

一般看到的 AppBarButton 都是圖片在上面，文字在下麵，是否可以更改讓文字在和圖片相同的位置？本文告訴大家如何做出橫向的 AppBarButton 把圖標和文本放在一起。

如果需要添加 AppBarButton 一般都是用於顯示圖標，但是有時候圖標不知道功能，就需要添加文本，添加文本的代碼很簡單。

<AppBarButton Icon="Back" Margin=" 30 40 0 0" Label=" CitiKiosk Settings">

這樣看起來的界面就是

但是如果要做出下麵的圖片的樣子，就需要修改Style，下麵我來告訴大家如何做出下麵圖片

首先在資源寫下麵的Style，建議寫在 Page 的資源，這樣在整個頁面都可以指定

        <Style TargetType="AppBarButton">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="VerticalAlignment" Value="Top"/>
            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
            <Setter Property="FontWeight" Value="Normal"/>
            <Setter Property="UseSystemFocusVisuals" Value="True" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="AppBarButton">
                        <Grid x:Name="Root"
                              MinWidth="{TemplateBinding MinWidth}"
                              MaxWidth="{TemplateBinding MaxWidth}"
                              Background="{TemplateBinding Background}">
                            <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="Overflow">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                            </ObjectAnimationUsingKeyFrames>

                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="OverflowWithToggleButtons">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                            </ObjectAnimationUsingKeyFrames>


                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>

                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>

                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="InputModeStates">
                                    <VisualState x:Name="InputModeDefault" />
                                    <VisualState x:Name="TouchInputMode" >
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

                            <StackPanel x:Name="ContentRoot" MinHeight="{ThemeResource AppBarThemeCompactHeight}" Orientation="Horizontal">
                                <ContentPresenter x:Name="Content"
                                                  Height="20"
                                                  Margin="0,0,0,4"
                                                  Content="{TemplateBinding Icon}"
                                                  Foreground="{TemplateBinding Foreground}"
                                                  HorizontalAlignment="Stretch"
                                                  AutomationProperties.AccessibilityView="Raw"/>
                                <TextBlock x:Name="TextLabel"
                                           Text="{TemplateBinding Label}"
                                           Foreground="{TemplateBinding Foreground}"
                                           FontSize="30"
                                           FontFamily="{TemplateBinding FontFamily}"
                                           TextAlignment="Center"
                                           TextWrapping="Wrap"
                                           Margin="10,0,0,6"
                                           VerticalAlignment="Center"/>
                            </StackPanel>

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

使用的時候，只需要和上面的代碼一樣，不需要做修改，不過可能出現文字有部分不顯示，所以需要設置長度

<AppBarButton Width="300" Icon="Back" Margin="30 0 0 0" Label="CitiKiosk Settings" />

因為最近 csdn 在修改，寫博客感覺很爛，所以在博客園發一下。我的博客會寫在 csdn 、博客園和自己搭建的博客。

本作品採用知識共用署名-非商業性使用-相同方式共用 4.0 國際許可協議進行許可。歡迎轉載、使用、重新發佈，但務必保留文章署名林德熙(包含鏈接:http://blog.csdn.net/lindexi_gd )，不得用於商業目的，基於本文修改後的作品務必以相同的許可發佈。如有任何疑問，請與我聯繫。