wp7 不重启程序之动态换肤实现原理以及源码

   

 每一款商业软件都离不开程序,程序UI制作的是否精美直接影响客户对您软件的第一感觉。打个比方,程序UI就像一件传统商品的外包装,该包装的好坏,可以看出该产品是否做工精细,是否质量过硬。现在我将向您介绍如何为您的wp7程序换肤,而且不用重启你的程序。点击直接更换皮肤。

当然应用这一原理,你几乎可以一键更换所有东西,包括字符串,字体,字号,图片,边框,甚至整个页面。废话不多说,来张图吧。

 

 

 

 

在这里我不得不感谢一直支持我的卤面网版主,是他让我提起兴趣写了这么一篇文章,再次感谢卤面网,一个非常不错的wp7开发论坛,后面我也将再次向大家发布几篇高质量文章,请大家到卤面上找我吧,呵呵

    进入正题:

1.定义theme类,这个将会是所有主题的起源

  public class Theme : DependencyObject
    {
    }

 

2.定义 你的文本颜色属性

  #region 文本的颜色
public static DependencyProperty TextBrushProperty = DependencyProperty.Register("TextBrush",
typeof(Brush),
typeof(Theme),
new PropertyMetadata(/*"默认值"*/null, null));

public Brush TextBrush
{
get
{
return (Brush)base.GetValue(TextBrushProperty);
}
set
{
base.SetValue(TextBrushProperty, value);
}
}

#endregion

3.同理定义你的图片属性

 #region 背景的图片
public static DependencyProperty BkImgProperty = DependencyProperty.Register("BkImg",
typeof(ImageSource),
typeof(Theme),
new PropertyMetadata(/*"默认值"*/null, null));

public ImageSource BkImg
{
get
{
return (ImageSource)base.GetValue(BkImgProperty);
}
set
{
base.SetValue(BkImgProperty, value);
}
}

#endregion

3.在App.xaml中加入资源

   <local:Theme x:Key="Theme"/>

4.好了,下面是UI元素了

 <Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<!--TitlePanel 包含应用程序的名称和页标题-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="我的应用程序" Style="{StaticResource PhoneTextNormalStyle}" Foreground="{Binding Source={StaticResource Theme}, Path=cuTheme.TextBrush}"/>
<TextBlock x:Name="PageTitle" Text="页面名称" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" Foreground="{Binding Source={StaticResource Theme}, Path=cuTheme.TextBrush}"/>
</StackPanel>

<!--ContentPanel - 在此处放置其他内容-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" >
<Image Source="{Binding Source={StaticResource Theme}, Path=cuTheme.BkImg}" Margin="41,85,153,167"></Image>
<Button Content="点击即可换肤" Height="72" HorizontalAlignment="Left" Margin="41,482,0,0" Name="button1" VerticalAlignment="Top" Width="240" Click="button1_Click" />
<TextBlock x:Name="testBlock1" Foreground="{Binding Source={StaticResource Theme}, Path=cuTheme.TextBrush}" Height="61" HorizontalAlignment="Left" Margin="41,48,0,0" Text="TextBlock" VerticalAlignment="Top" Width="163" />
</Grid>
</Grid>

5.当按钮点击时,进行动态换肤

 private void button1_Click(object sender, RoutedEventArgs e)
{
if (Theme.IsCurrentRed)
{
Theme.TurnGreen();
}
else
{
Theme.TurnRed();
}

}

6.批量赋值

public void copy(Theme a)
{
// TextBrush = a.TextBrush;
// BkImg = a.BkImg;

MemberInfo[] memInfos = a.GetType().GetMembers(); //获取成员变量
foreach (MemberInfo mInfo in memInfos) //遍历成员变量
{
if (mInfo is PropertyInfo)
{
PropertyInfo info = mInfo as PropertyInfo;
if (info.CanWrite)
{

info.SetValue(this, info.GetValue(a,null),null);

}

}

}
}



7.怎么样,还不错吧,这样你就可以更方便的对你的程序加入换肤功能了哦。

 

我希望你能喜欢我的文章!如果你有更多想法,请到卤面网 wp7开发论坛(codewp7.com)问答区联系我,我会很高兴知道你在想什么。同时wp7交流QQ群172765887中,也能找到我的身影,感谢大家,也欢迎大家关注我的微薄(www.weibo.com/codewp7)


源码请猛击







posted on 2012-03-12 23:57  yewenpeng  阅读(2426)  评论(6编辑  收藏  举报