Chinaunix首页 | 论坛 | 博客
  • 博客访问: 2190696
  • 博文数量: 849
  • 博客积分: 17977
  • 博客等级: 上将
  • 技术积分: 8135
  • 用 户 组: 普通用户
  • 注册时间: 2005-08-26 09:59
  • 认证徽章:
个人简介

一个好老好老的老程序员了。

文章分类

全部博文(849)

文章存档

2018年(88)

2017年(130)

2015年(5)

2014年(12)

2013年(41)

2012年(36)

2011年(273)

2010年(1)

2009年(54)

2008年(66)

2007年(49)

2006年(82)

2005年(12)

分类: Android平台

2018-08-13 21:52:34

设备样式

Xamarin.Forms包含六种内置动态样式。 这些被称为设备样式,它们是名为Styles的嵌套类的成员。 这个Styles类定义了12个静态和只读字段,有助于在代码中引用这六个样式:

  • Style样式的BodyStyle。
  • 类型为String的BodyStyleKey,等于“BodyStyle”。
  • Ttyle类型的TitleStyle。
  • Tord类型为String的StyleStyleKey,等于“TitleStyle”。
  • 类型为Style的SubtitleStyle。
  • 字符串类型的SubtitleStyleKey,等于“SubtitleStyle”。
  • 类型为Style的CaptionStyle。
  • 字符串类型的CaptionStyleKey,等于“CaptionStyle”。
  • Ttyle类型的ListItemTextStyle。
  • List类型的ListItemTextStyleKey,等于“ListItemTextStyle”。
  • Style的ListItemDetailTextStyle。
  • List类型的ListItemDetailTextStyleKey,等于“ListItemDetailTextStyle”。

所有六种样式都具有LabelType的TargetType并存储在字典中 - 但不是应用程序可以直接访问的字典。
在代码中,您可以使用此列表中的字段来访问设备样式。 例如,您可以将Device.Styles.BodyStyle对象直接设置为Label的Style属性,以用于可能适合段落主体的文本。 如果您在代码中定义了一种源自其中一种设备样式的样式,请将BaseResourceKey设置为Device.Styles.BodyStyleKey,或者如果您不怕拼写错误,则将其设置为“BodyStyle”。
在XAML中,您只需使用带有DynamicResource的文本键“BodyStyle”将此样式设置为Label的Style属性,或者在从De?vice.Styles.BodyStyle派生样式时设置BaseResourceKey。
DeviceStylesList程序演示了如何访问这些样式 - 以及在XAML和代码中定义从SubtitleStyle继承的新样式。 这是XAML文件:


点击(此处)折叠或打开

  1. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
  2.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  3.              x:Class="DeviceStylesList.DeviceStylesListPage">

  4.     <ContentPage.Padding>
  5.         <OnPlatform x:TypeArguments="Thickness"
  6.                     iOS="10, 20, 10, 0"
  7.                     Android="10, 0"
  8.                     WinPhone="10, 0" />
  9.     </ContentPage.Padding>
  10.     <ContentPage.Resources>
  11.         <ResourceDictionary>
  12.             <Style x:Key="newSubtitleStyle" TargetType="Label"
  13.                    BaseResourceKey="SubtitleStyle">
  14.                 <Setter Property="TextColor" Value="Accent" />
  15.                 <Setter Property="FontAttributes" Value="Italic" />
  16.             </Style>
  17.         </ResourceDictionary>
  18.     </ContentPage.Resources>
  19.     <ScrollView>
  20.         <StackLayout Spacing="20">
  21.             <!-- Device styles set with DynamicResource -->
  22.             <StackLayout>
  23.                 <StackLayout HorizontalOptions="Start">
  24.                     <Label Text="Device styles set with DynamicResource" />
  25.                     <BoxView Color="Accent" HeightRequest="3" />
  26.                 </StackLayout>
  27.                 <Label Text="No Style whatsoever" />
  28.                 <Label Text="Body Style"
  29.                        Style="{DynamicResource BodyStyle}" />
  30.                 <Label Text="Title Style"
  31.                        Style="{DynamicResource TitleStyle}" />
  32.                 <Label Text="Subtitle Style"
  33.                        Style="{DynamicResource SubtitleStyle}" />
  34.                 <!-- Uses style derived from device style. -->
  35.                 <Label Text="New Subtitle Style"
  36.                        Style="{StaticResource newSubtitleStyle}" />
  37.                 <Label Text="Caption Style"
  38.                        Style="{DynamicResource CaptionStyle}" />
  39.                 <Label Text="List Item Text Style"
  40.                        Style="{DynamicResource ListItemTextStyle}" />
  41.                 <Label Text="List Item Detail Text Style"
  42.                        Style="{DynamicResource ListItemDetailTextStyle}" />
  43.             </StackLayout>
  44.             <!-- Device styles set in code -->
  45.             <StackLayout x:Name="codeLabelStack">
  46.                 <StackLayout HorizontalOptions="Start">
  47.                     <Label Text="Device styles set in code:" />
  48.                     <BoxView Color="Accent" HeightRequest="3" />
  49.                 </StackLayout>
  50.             </StackLayout>
  51.         </StackLayout>
  52.     </ScrollView>
  53. </ContentPage>

StackLayout包含两个Label和BoxView组合(一个位于顶部,一个位于bot?tom)以显示带下划线的标题。 在第一个标题之后,Label元素使用DynamicResource引用设备样式。 新的字幕样式在页面的Resources字典中定义。
代码隐藏文件通过使用Device.Styles类中的属性访问设备样式,并通过从SubtitleStyle派生来创建新样式:

点击(此处)折叠或打开

  1. public partial class DeviceStylesListPage : ContentPage
  2. {
  3.     public DeviceStylesListPage()
  4.     {
  5.         InitializeComponent();
  6.         var styleItems = new[]
  7.         {
  8.             new { style = (Style)null, name = "No style whatsoever" },
  9.             new { style = Device.Styles.BodyStyle, name = "Body Style" },
  10.             new { style = Device.Styles.TitleStyle, name = "Title Style" },
  11.             new { style = Device.Styles.SubtitleStyle, name = "Subtitle Style" },
  12.             // Derived style
  13.             new { style = new Style(typeof(Label))
  14.             {
  15.                 BaseResourceKey = Device.Styles.SubtitleStyleKey,
  16.                 Setters =
  17.                 {
  18.                     new Setter
  19.                     {
  20.                         Property = Label.TextColorProperty,
  21.                         Value = Color.Accent
  22.                     },
  23.                     new Setter
  24.                     {
  25.                         Property = Label.FontAttributesProperty,
  26.                         Value = FontAttributes.Italic
  27.                     }
  28.                 }
  29.             }, name = "New Subtitle Style" },
  30.             new { style = Device.Styles.CaptionStyle, name = "Caption Style" },
  31.             new { style = Device.Styles.ListItemTextStyle, name = "List Item Text Style" },
  32.             new { style = Device.Styles.ListItemDetailTextStyle,
  33.                   name = "List Item Detail Text Style" },
  34.         };
  35.         foreach (var styleItem in styleItems)
  36.         {
  37.             codeLabelStack.Children.Add(new Label
  38.             {
  39.                 Text = styleItem.name,
  40.                 Style = styleItem.style
  41.             });
  42.         }
  43.     }
  44. }

当然,代码和XAML会产生相同的样式,但每个平台都以不同的方式实现这些设备样式:
2018_08_13_080658
iOS上可以轻松演示这些样式的动态特性:在DeviceStyles程序运行时,点击“主页”按钮并运行“设置”。 选择常规项,然后选择辅助功能和更大的文本。 可以使用滑块使文本变小或变大。 更改该滑块,双击“主页”按钮以显示当前应用程序,然后再次选择“DeviceStyles”。 您将看到设备样式中的文本集(或从设备样式派生的样式)会更改大小,但应用程序中没有任何未设置样式的文本会更改大小。 新对象已替换字典中的设备样式。
设备样式的动态特性在Android上并不那么明显,因为更改“设置”中“显示”部分的“字体大小”项会影响Xamarin.Forms程序中的所有字体大小。
在Windows 10移动设备上,“设置的轻松访问”和“更多选项”部分中的“文本缩放”项也会影响所有文本。
下一章包括一个程序,演示如何制作一个小电子书阅读器,让您阅读爱丽丝梦游仙境的一章。 此程序使用设备样式来控制所有文本的格式,包括书籍和章节标题。
但是这个小电子书阅读器还包括插图,这需要探索位图的主题。
阅读(110) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~
评论热议
请登录后评论。

登录 注册