Windows Phone开发经验谈(15)-动态的改变APP的字体大小
虽然Windows Phone 8快要出来了...但是丝毫不能使我减少对WP7的研究...这次教大家如何动态改变APP的字体大小,想看具体的演示可以去windows phone市场下载 公交路线查询http://www.windowsphone.com/?appsid=384ba16d-d30f-44a5-9a8e-e395eea269df
我在公交路线查询里面设置了3种的字体大小（大，中，小） 我用一个枚举来表示
public enum FontSizePattern { Small = 0, Middle, Large }
但是大家要知道，虽然字体分为了大、中、小，但是很多地方的字体显示大小还是不一样的，所以任何一种字体大小里面还要设置不同的字体SIZE，这里我把字体大小的配置写成XAML文件
large.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:sys="clr-namespace:System;assembly=mscorlib" > <sys:Double x:Key="FontSize18">22.4</sys:Double> <sys:Double x:Key="FontSize22">26.4</sys:Double> <sys:Double x:Key="FontSize24">28.8</sys:Double> <sys:Double x:Key="FontSize30">32.8</sys:Double> <sys:Double x:Key="FontSize36">43.2</sys:Double> <sys:Double x:Key="FontSize48">57.6</sys:Double> <sys:Double x:Key="FontSize60">72.0</sys:Double> <sys:Double x:Key="FontSize72">86.4</sys:Double> </ResourceDictionary>
middle.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:sys="clr-namespace:System;assembly=mscorlib" > <sys:Double x:Key="FontSize18">22.0</sys:Double> <sys:Double x:Key="FontSize22">22.0</sys:Double> <sys:Double x:Key="FontSize24">24.0</sys:Double> <sys:Double x:Key="FontSize30">28.0</sys:Double> <sys:Double x:Key="FontSize36">36.0</sys:Double> <sys:Double x:Key="FontSize48">48.0</sys:Double> <sys:Double x:Key="FontSize60">60.0</sys:Double> <sys:Double x:Key="FontSize72">72.0</sys:Double> </ResourceDictionary>
small.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:sys="clr-namespace:System;assembly=mscorlib" > <sys:Double x:Key="FontSize18">16.6</sys:Double> <sys:Double x:Key="FontSize22">17.6</sys:Double> <sys:Double x:Key="FontSize24">19.2</sys:Double> <sys:Double x:Key="FontSize30">23.8</sys:Double> <sys:Double x:Key="FontSize36">28.8</sys:Double> <sys:Double x:Key="FontSize48">38.4</sys:Double> <sys:Double x:Key="FontSize60">48.0</sys:Double> <sys:Double x:Key="FontSize72">57.6</sys:Double> </ResourceDictionary>
现在我们要做的是用户选择不同的字体的时候加载不同的xaml文件就可以了，接下来我们来创建一个类Configuration 用来存储用户的配置信息同样用到了AppSettingHelper这个类，可以去Windows Phone开发经验谈(14)-动态的改变APP的语言里面获取...下面是Configuration的代码
using System.ComponentModel; namespace ChinaBus.Utility { public class Configuration : INotifyPropertyChanged { Configuration() { this._fontSizePattern = AppSettingHelper.GetValueOrDefault<FontSizePattern>("FontSizePattern", FontSizePattern.Small); this._themesPattern = AppSettingHelper.GetValueOrDefault<ThemesPattern>("ThemesPattern", ThemesPattern.Blue); } private static Configuration _instance; public static Configuration Instance { get { if (Configuration._instance == null) { Configuration._instance = new Configuration(); } return Configuration._instance; } } public event PropertyChangedEventHandler PropertyChanged; private void OnPropertyChanged(string propertyName) { if (this.PropertyChanged != null) { this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName)); } } private ThemesPattern _themesPattern; public ThemesPattern ThemesPattern { get { return this._themesPattern; } set { if (this._themesPattern != value) { this._themesPattern = value; this.UpdateValue("ThemesPattern", value); this.OnPropertyChanged("ThemesPattern"); } } } private FontSizePattern _fontSizePattern; public FontSizePattern FontSizePattern { get { return this._fontSizePattern; } set { if (this._fontSizePattern != value) { this._fontSizePattern = value; this.UpdateValue("FontSizePattern", value); this.OnPropertyChanged("FontSizePattern"); } } } private void UpdateValue(string key, object value) { AppSettingHelper.AddOrUpdateValue(key, value); } } }
这时候再创建一个类叫做FontSizeProvider 用来加载xaml获取各种字体的大小，下面是完整的代码。
using System; using System.ComponentModel; using System.Windows; using System.IO.IsolatedStorage; namespace ChinaBus.Utility { public class FontSizeProvider : INotifyPropertyChanged { private double _fontSize18; private double _fontSize22; private double _fontSize24; private double _fontSize30; private double _fontSize36; private double _fontSize48; private double _fontSize60; private double _fontSize72; public event PropertyChangedEventHandler PropertyChanged; public double F18 { get { return this._fontSize18; } private set { if (this._fontSize18 != value) { this._fontSize18 = value; if (this.PropertyChanged != null) { this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs("F18")); } } } } public double F22 { get { return this._fontSize22; } private set { if (this._fontSize22 != value) { this._fontSize22 = value; if (this.PropertyChanged != null) { this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs("F22")); } } } } public double F24 { get { return this._fontSize24; } private set { if (this._fontSize24 != value) { this._fontSize24 = value; if (this.PropertyChanged != null) { this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs("F24")); } } } } public double F30 { get { return this._fontSize30; } private set { if (this._fontSize30 != value) { this._fontSize30 = value; if (this.PropertyChanged != null) { this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs("F30")); } } } } public double F36 { get { return this._fontSize36; } private set { if (this._fontSize36 != value) { this._fontSize36 = value; if (this.PropertyChanged != null) { this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs("F36")); } } } } public double F48 { get { return this._fontSize48; } private set { if (this._fontSize48 != value) { this._fontSize48 = value; if (this.PropertyChanged != null) { this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs("F48")); } } } } public double F60 { get { return this._fontSize60; } private set { if (this._fontSize60 != value) { this._fontSize60 = value; if (this.PropertyChanged != null) { this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs("F60")); } } } } public double F72 { get { return this._fontSize72; } private set { if (this._fontSize72 != value) { this._fontSize72 = value; if (this.PropertyChanged != null) { this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs("F72")); } } } } public FontSizeProvider() { this.ApplyPattern(); Configuration.Instance.PropertyChanged += new PropertyChangedEventHandler(this.Configuration_PropertyChanged); } private void Configuration_PropertyChanged(object sender, PropertyChangedEventArgs e) { if (string.Compare(e.PropertyName, "FontSizePattern", StringComparison.OrdinalIgnoreCase) == 0) { this.ApplyPattern(); } } ~FontSizeProvider() { Configuration.Instance.PropertyChanged -= new PropertyChangedEventHandler(this.Configuration_PropertyChanged); } private void ApplyPattern() { FontSizePattern fontSizePattern = Configuration.Instance.FontSizePattern; string text = string.Format("/ChinaBus;component/Themes/Fonts/{0}.xaml", fontSizePattern.ToString()); ResourceDictionary resourceDictionary = new ResourceDictionary(); Application.LoadComponent(resourceDictionary, new Uri(text, UriKind.Relative)); this.F18 = (double)resourceDictionary["FontSize18"]; this.F22 = (double)resourceDictionary["FontSize22"]; this.F24 = (double)resourceDictionary["FontSize24"]; this.F30 = (double)resourceDictionary["FontSize30"]; this.F36 = (double)resourceDictionary["FontSize36"]; this.F48 = (double)resourceDictionary["FontSize48"]; this.F60 = (double)resourceDictionary["FontSize60"]; this.F72 = (double)resourceDictionary["FontSize72"]; } } }
这时候你在app.xaml加入下面代码
<utility:FontSizeProvider x:Key="FontSizeProvider"/>
这样你就可以在xaml里面使用，代码如下
<TextBlock Text="{Binding BusDescription}" TextWrapping="Wrap" Margin="0,0,50,0" Foreground="{Binding Path=BusForeground, Source={StaticResource ThemeProvider}}" FontSize="{Binding Path=F18, Source={StaticResource FontSizeProvider}}"
当然在CS文件里面也同样可以使用，你可以用单例模式来实现..也可以每次都创建一个类来实现，代码如下
FontSizeProvider fzp = new FontSizeProvider(); var tbBacklineInfo = new TextBlock(); tbBacklineInfo.TextWrapping = TextWrapping.Wrap; tbBacklineInfo.Text = info.BackLine; tbBacklineInfo.FontSize = fzp.F30;
好了..介绍完了...有什么问题欢迎留言讨论！
