02、Universal app 中按钮图标使用

来源:http://www.guanqinbiaoye.com 作者:计算机软件 人气:75 发布时间:2020-03-22
摘要:关于字符缩放在哪里设置的问题解答   步骤一:“遥远”所运用的是字符缩放中的变胖效果,先选择要设置的文本,从“开始”菜单选择字体右下角的小按钮单击,可以打开“字体”对

关于字符缩放在哪里设置的问题解答

 

步骤一:“遥远”所运用的是字符缩放中的变胖效果,先选择要设置的文本,从“开始”菜单选择字体右下角的小按钮单击,可以打开“字体”对话框

     前言,windows10 昨天凌晨发布了,windows store 开发模型比以前的 silverlight 模型由很多优势,

图片 1

我也小兴奋了一把。

步骤二:打开“字体”对话框后,选择“字符间距”,选择缩放比例为200%

 

图片 2

正文:

在 windows phone 8.0 以前的开发中, application bar 的图标设置相对单一,到了 windows store app 后,

app bar 的设置方式较多了。

 

首先在页面中,5个按钮的显示效果(按钮放大后,明显看到第三个 “搜索按钮” 出现了锯齿现象,原因是使用了 png 图片作为图标,

其它的是使用的矢量图标 或者控件,支持无损缩放):

前面 4个:

 图片 3

第5个:

图片 4

 

全部的相关 xaml 代码: 

 <Page.BottomAppBar>
     <CommandBar>
         <AppBarButton Label="飞机">
             <AppBarButton.Icon>
                 <FontIcon FontFamily="Segoe UI Symbol" Glyph="&#xE0EB;"/>
             </AppBarButton.Icon>
         </AppBarButton>

         <AppBarButton Label="笑脸">
             <AppBarButton.Icon>
                 <SymbolIcon/>
             </AppBarButton.Icon>
         </AppBarButton>

         <AppBarButton Label="搜索">
             <AppBarButton.Icon>
                 <BitmapIcon UriSource="Images/test/search.png"/>
             </AppBarButton.Icon>
         </AppBarButton>


         <AppBarButton Label="椭圆">
             <AppBarButton.Icon>
                 <PathIcon>
                     <PathIcon.Data>
                         <EllipseGeometry  RadiusX="10" RadiusY="5" Center="20,20"/>
                     </PathIcon.Data>
                 </PathIcon>
             </AppBarButton.Icon>
         </AppBarButton>  


         <AppBarButton Label="控件">
             <TextBlock Text="love" Foreground="Yellow" FontSize="15" Margin="8,10,0,0"/>
         </AppBarButton>
     </CommandBar>
 </Page.BottomAppBar>

 

1、飞机图标

使用的是 windows 系统默认安装的 “Segoe UI Symbol” 字体

1)在 win8.1 系统桌面右侧的 “超级按钮” 中搜索选项中,输入“字符”,打开 “字符映射表” :

图片 5

 

2)打开后,选择 “Segoe UI Symbol” 字体,并且选择需要设置的图标(这里选择 “飞机”):

图片 6

 

将  "" 设置给 FontIcon 的 Glyph属性,注意前缀 &#x 和 后缀 ; 

<AppBarButton Label="飞机">
    <AppBarButton.Icon>
        <FontIcon FontFamily="Segoe UI Symbol" Glyph="&#xE0EB;"/>
    </AppBarButton.Icon>
</AppBarButton>

 

3) 可以在 xaml 页面中,选中 AppBarButton 后,点击键盘的 F4, 在属性窗口中,进行设置:

图片 7

 

2、笑脸图标

在 xaml 中,选中app bar 中的按钮,F4 打开属性对话框,在 Symbol 下拉框中,有很多

ICON 枚举可以选择:

图片 8

 

相关的 xaml:

 <AppBarButton Label="笑脸">
     <AppBarButton.Icon>
         <SymbolIcon/>
     </AppBarButton.Icon>
 </AppBarButton>

 

 3、搜索图标

这个是最简单的了,把 BitmapIcon 对象设置为本地工程目录下的一张 png 图片即可,缺点是

如果在高清屏上,有可能出现锯齿,而其它几个是支持矢量缩放的。

图片 9

相关 xaml:

 <AppBarButton Label="搜索">
     <AppBarButton.Icon>
         <BitmapIcon UriSource="Images/test/search.png"/>
     </AppBarButton.Icon>
 </AppBarButton>

本文由威尼斯游戏网站发布于计算机软件,转载请注明出处:02、Universal app 中按钮图标使用

关键词:

最火资讯