在Xamarin.Form中,我们可以这样定义界面的风格;
<?xml version="1.0" encoding="utf-8"?>
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:ForStyle"
x:Class="ForStyle.ForStylePage">
<StackLayout>
<Button
Text=" Carpe diem "
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"
BorderWidth="3"
TextColor="Red"
FontSize="Large"/>
<Button
Text=" Sapere aude "
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"
BorderWidth="3"
TextColor="Red"
FontSize="Large"/>
<Button
Text=" Discere faciendo "
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"
BorderWidth="3"
TextColor="Red"
FontSize="Large"/>
</StackLayout>
</ContentPage>
下面是在Android平台和iOS平台的运行效果,至于WinPhone上的运行效果,我手头既没有WinPhone的真机也没有模拟器,就不给出来了。
上面的代码的有个很明显的问题,三个按键的风格都是一样的,但是却都要写三遍,既冗长,又不便于修改。这个时候,我们可以使用Style来解决这个问题;
<?xml version="1.0" encoding="utf-8"?>
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:ForStyle"
x:Class="ForStyle.ForStylePage">
<ContentPage.Resources>
<ResourceDictionary>
<Style
x:Key="buttonStyle"
TargetType="Button">
<Setter
Property="HorizontalOptions"
Value="Center" />
<Setter
Property="VerticalOptions"
Value="CenterAndExpand" />
<Setter
Property="BorderWidth"
Value="3" />
<Setter
Property="TextColor"
Value="Red" />
<Setter
Property="FontSize"
Value="Large" />
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout>
<Button
Text=" Carpe diem "
Style="{StaticResource buttonStyle}" />
<Button
Text=" Sapere aude "
Style="{StaticResource buttonStyle}" />
<Button
Text=" Discere faciendo "
Style="{StaticResource buttonStyle}" />
</StackLayout>
</ContentPage>
注意:
- 这里我们要将Style的定义放在
<ContentPage.Resources><ResourceDictionary>...</ResourceDictionary></ContentPage.Resources>
之中; - 用
x:Key="buttonStyle"
指定Style的变量名; - 用
TargetType="Button"
指定Style应用的控件类型,这里就是Button; - 用
Style="{StaticResource buttonStyle}"
声明对该Style的引用。
其实,我们还可以有更简洁的写法,就是将x:Key="buttonStyle"
和Style="{StaticResource buttonStyle}"
都去掉,没有变量名的Style会默认应用到其将指定的控件类型上,即会默认将这个Button的Style应用到页面中的所有Button控件上。
<?xml version="1.0" encoding="utf-8"?>
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:ForStyle"
x:Class="ForStyle.ForStylePage">
<ContentPage.Resources>
<ResourceDictionary>
<Style
TargetType="Button">
<Setter
Property="HorizontalOptions"
Value="Center" />
<Setter
Property="VerticalOptions"
Value="CenterAndExpand" />
<Setter
Property="BorderWidth"
Value="3" />
<Setter
Property="TextColor"
Value="Red" />
<Setter
Property="FontSize"
Value="Large" />
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout>
<Button
Text=" Carpe diem " />
<Button
Text=" Sapere aude " />
<Button
Text=" Discere faciendo " />
</StackLayout>
</ContentPage>
但是这个Style目前只能在这个页面中使用,如果我们在整个App中使用这个Style呢?在Xamarin.Form中有个App.xaml文件,我们需要把将Style放在这个文件中。
<?xml version="1.0" encoding="utf-8"?>
<Application
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ForStyle.App">
<Application.Resources>
<!-- Application resource dictionary -->
<ResourceDictionary>
<Style
x:Key="buttonStyle"
TargetType="Button">
<Setter
Property="HorizontalOptions"
Value="Center" />
<Setter
Property="VerticalOptions"
Value="CenterAndExpand" />
<Setter
Property="BorderWidth"
Value="3" />
<Setter
Property="TextColor"
Value="Red" />
<Setter
Property="FontSize"
Value="Large" />
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>
在这里x:Key="buttonStyle"
是不可避免的,因为在App中定义的Style不会自动应用到程序中的控件,不定义这个变量名,我们就没办法在其它页面中引用到这个Style。此外,我们还需要在具体页面中做一些处理;
<?xml version="1.0" encoding="utf-8"?>
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:ForStyle"
x:Class="ForStyle.ForStylePage">
<ContentPage.Resources>
<ResourceDictionary>
<Style
TargetType="Button"
BasedOn="{StaticResource buttonStyle}" />
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout>
<Button
Text=" Carpe diem " />
<Button
Text=" Sapere aude " />
<Button
Text=" Discere faciendo " />
</StackLayout>
</ContentPage>
用BasedOn="{StaticResource buttonStyle}"
引用App.xaml文件中定义的buttonStyle之后,页面中的Button都会应用到这个Style。这个时候,页面的代码就会显得简洁许多,我们的关注点就可以放在控件的特性上。