国内的WPF技术先行者周银辉曾介绍过如何动态改变应用程序的主题样式,今天我们来介绍一种轻量级的改变界面风格的方式——动态改变主题色。
程序允许用户根据自己的喜好来对界面进行配色,这种技术在很多软件中都有应用,比如这款名为AirPlay的音乐播放器软件:
下面我们就来自己动手实现这种技术:
首先在App.xaml文件中定义一个键值为“color”的单色笔刷,这个笔刷就是可以被用户改变的动态资源:
x:Key="color" Color="SkyBlue" />
然后来设计这样一个界面:
我们让用户通过4个滑块来分别定制颜色的A、R、G、B值,其完整代码为:
Height="28" />
Height="28" />
Height="28" />
Height="28" />
Height="*" />
Width="65*" />
Width="213*" />
Grid.Row="0" HorizontalContentAlignment="Right">透明度:
Grid.Row="1" HorizontalContentAlignment="Right">红色:
Grid.Row="2" HorizontalContentAlignment="Right">绿色:
Grid.Row="3" HorizontalContentAlignment="Right">蓝色:
Grid.Row="0" Grid.Column="1" Margin="3" Name="a" SmallChange="1" LargeChange="15" Maximum="255" Value="255" />
Grid.Row="1" Grid.Column="1" Margin="3" Name="r" SmallChange="1" LargeChange="15" Maximum="255" Value="255" />
Grid.Row="2" Grid.Column="1" Margin="3" Name="g" SmallChange="1" LargeChange="15" Maximum="255" Value="255" />
Grid.Row="3" Grid.Column="1" Margin="3" Name="b" SmallChange="1" LargeChange="15" Maximum="255" Value="255" />
Grid.Column="1" Grid.Row="4" HorizontalAlignment="Left" Margin="3,5,0,5" Name="button1" Width="75" Click="button1_Click">更新颜色
需注意,要把滑块的最大值设为255。
然后回到App.xaml中,我们来定义窗口、标签及按钮的样式:
窗口样式代码如下:
:Key="window" TargetType="Window">
Property="OverridesDefaultStyle" Value="true" />
Property="AllowsTransparency" Value="true" />
Property="SnapsToDevicePixels" Value="true" />
Property="WindowStyle" Value="None" />
Property="Template">
TargetType="Window">
BorderBrush="{DynamicResource color}" BorderThickness="3" CornerRadius="5" Padding="4">
BorderBrush="{DynamicResource color}" BorderThickness="3" CornerRadius="5" Background="{DynamicResource color}">
BorderBrush="#1000" BorderThickness="3" CornerRadius="5" Padding="6">
StartPoint="0,0" EndPoint="0,1">
Color="#3FFF" Offset="0.5" />
Color="#1666" Offset="0.5" />
定义样式为几个Border进行嵌套,在最底层引用的之前定义的单色笔刷,在上层用低不透明度的白色和黑色覆盖以产生不同的层次效果。
标签样式为:
="Label">
Property="Foreground" Value="#AAFFFFFF" />
按钮样式为:
="Button">
Property="Template">
TargetType="Button">
Background="{DynamicResource color}" CornerRadius="3">
BorderThickness="2" CornerRadius="3" Padding="{TemplateBinding Padding}">
StartPoint="0,0" EndPoint="0,1">
Color="#6FFF" Offset="0" />
Color="#2000" Offset="1" />
StartPoint="0,0" EndPoint="0,1">
Color="#1000" Offset="0" />
Color="#4000" Offset="1" />
TextAlignment="Center" Foreground="#AFFF">
其原理与窗口样式相同。
然后回到主界面设计窗口,设置窗体的样式:
Style="{StaticResource window}"
接下来编辑后台代码,首先为窗体增加事件处理以提供拖动功能:
MouseLeftButtonDown="Window_MouseLeftButtonDown"
后台事件处理代码:
private void Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
this.DragMove();
}
为按钮增加事件处理来更新界面颜色:
private void button1_Click(object sender, RoutedEventArgs e)
{
更新颜色(Color.FromArgb((byte)a.Value, (byte)r.Value, (byte)g.Value, (byte)b.Value));
}
“更新颜色”方法代码如下:
public void 更新颜色(Color c)
{
this.Resources.Remove("color");
this.Resources.Add("color", new SolidColorBrush(c));
}
此方法首先移除资源“color”,然后再添加一个同名的新笔刷,这样就完成了动态替换工作。
现在编译并执行程序,可以看到如下效果:
来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/10474909/viewspace-440488/,如需转载,请注明出处,否则将追究法律责任。
转载于:http://blog.itpub.net/10474909/viewspace-440488/