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" />

2018-8-10-win10-uwp-横向-AppBarButton的更多相关文章

win10 uwp 横向 AppBarButton
一般看到的 AppBarButton 都是图片在上面,文字在下面,是否可以更改让文字在和图片相同的位置?本文告诉大家如何做出横向的 AppBarButton 把图标和文本放在一起. 如果需要添加 Ap ...
win10 uwp 使用 Microsoft.Graph 发送邮件
在 2018 年 10 月 13 号参加了张队长的 Office 365 训练营学习如何开发 Office 365 插件和 OAuth 2.0 开发,于是我就使用 UWP 尝试使用 Micros ...
Win10 UWP开发实现Bing翻译
微软在WP上的发展从原来的Win7到Win8,Win8.1,到现在的Win10 UWP,什么是UWP,UWP即Windows 10 中的Universal Windows Platform简称.即Wi ...
Win10/UWP开发—使用Cortana语音与App后台Service交互
上篇文章中我们介绍了使用Cortana调用前台App,不熟悉的移步到:Win10/UWP开发—使用Cortana语音指令与App的前台交互,这篇我们讲讲如何使用Cortana调用App的后台任务,相比 ...
Win10 UWP应用发布流程
简介 Win10 UWP应用作为和Win8.1 UAP应用不同的一种新应用形式,其上传至Windows应用商店的流程也有了一些改变. 这篇博文记录了我们发布一款Win10 UWP应用的基本流程,希望为 ...
win10 uwp 列表模板选择器
本文主要讲ListView等列表可以根据内容不同,使用不同模板的列表模板选择器,DataTemplateSelector. 如果在 UWP 需要定义某些列的显示和其他列不同,或者某些行的显示和其他行不 ...
win10 uwp 获得元素绝对坐标
有时候需要获得一个元素,相对窗口的坐标,在修改他的位置可以使用. 那么 UWP 如何获得元素坐标? 我提供了一个方法,可以获得元素的坐标. 首先需要获得元素,如果没有获得元素,那么如何得到他的坐标? ...
win10 uwp 毛玻璃
毛玻璃在UWP很简单,不会和WPF那样伤性能. 本文告诉大家,如何在 UWP 使用 win2d 做毛玻璃. 毛玻璃可以使用 win2D 方法,也可以使用 Compositor . 使用 win2d 得 ...
win10 uwp 读取保存WriteableBitmap 、BitmapImage
我们在UWP,经常使用的图片,数据结构就是 BitmapImage 和 WriteableBitmap.关于 BitmapImage 和 WriteableBitmap 区别,我就不在这里说.主要说的 ...
【广告】win10 uwp 水印图床含代码
本文主要是广告我的软件. 图床可以加速大家写博客上传图片的时间,通过简化我们的操作来得到加速. 在写博客的时候,我们发现,我们需要上传一张图片,需要先打开图片,然后选择本地图片,然后上传. 但是我经常 ...

随机推荐

rabbitmq消息的路由
https://blog.csdn.net/lby0307/article/details/80875666 三种模式
NotePad++安装compare插件(两个文件对比功能)
首先百度搜索“notepad compare”,找到“Notepad++ Compare plugin download | SourceForge.net”,SourceForge提供了一个Comp ...
Center os6.5 mysql
1 # yum -y install mysql-server mysql mysql-dev 2 启动mysql # service mysqld start 3 为root用户配置一个密码 ...
Java中的String、StringBuffer、StringBuilder区别以及Java之StringUtils的用法
1.String.StringBuffer.StringBuilder的区别 String是Java中基础类型,是immutable类(不可变)的典型实现,利用string进行拼接是会产生过多无用对象 ...
PL/SQL-FOR UPDATE 与 FOR UPDATE OF的区别
PL/SQL-FOR UPDATE 与 FOR UPDATE OF的区别数据库 oracle for update of 和 for update区别 select * from T ...
Python格式输出汇总
print ('%10s'%('test')) print ('{:<10}'.format('test'))#left-aligned print ('{:>10}'.format('t ...
django.core.exceptions.ImproperlyConfigured: mysqlclient 1.3.3 or newer is required; you have 0.7.11
搭建Django2.0+Python3+MySQL5时同步数据库时报错:django.core.exceptions.ImproperlyConfigured: mysqlclient 1.3.3 o ...
【leetcode】1018. Binary Prefix Divisible By 5
题目如下: Given an array A of 0s and 1s, consider N_i: the i-th subarray from A[0] to A[i] interpreted a ...
mui is not defined
vue项目中引用mui.js,我是在main.js中这样引入的, 结果报错查找资料,最后在mui.js的最后添加了这样一句这是因为mui并不能像jquery那样作为全局对象存在,加上wi ...
TypeError:NoneType object is not callable情况下的错误
只用在该视图函数下面加上return ‘值’

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

2018-8-10-win10-uwp-横向-AppBarButton的更多相关文章

随机推荐

热门专题