• 2018-8-10-win10-uwp-横向-AppBarButton


    title author date CreateTime categories
    win10 uwp 横向 AppBarButton
    lindexi
    2018-08-10 19:16:50 +0800
    2018-2-13 17:23:3 +0800
    Win10 UWP

    一般看到的 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" />
  • 相关阅读:
    ICON 收集
    vs2015with_update_3
    文件大全,以后就从这些格式入手fuzz
    诗词
    tools URL 收集
    (四)ORBSLAM运动估计
    (三)ORB特征匹配
    (二)ORB描述子提取源码思路与实现
    (一)ORB描述子提取
    双目立体匹配——归一化互相关(NCC)
  • 原文地址:https://www.cnblogs.com/lindexi/p/12085549.html
Copyright © 2020-2023  润新知