Silverlight学习笔记（1）——样式的运用
本文将建立一个silverlight项目中的运用样式的简单实例，以下是详细步骤：
新建一个Silverlight应用程序，名称SilverlightTest
新建文件夹Assets，用以存放样式文件，在Assets文件夹中新建一个Silverlight资源字典，名称Styles.xaml，后面Silverlight项目引用到的样式资源我们将全部写在Styles.xaml中
打开Silverlight项目的App.xaml，添加资源字典的source相对路径，这样就可以全局使用该资源，当项目很大时可使用MergedDictionaries对资源进行分类管理
<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="SilverlightTest.App"
>
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Assets/Styles.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
回到MainPage.xaml中，添加一个Head区域，
<!--HeadGrid-->
<Grid x:Name="HeadGrid" Style="{StaticResource HeadGridStyle}">
</Grid>
这里使用一个Grid做容器，取名HeadGrid，样式Style引用自静态资源StaticResource，在样式文件Styles.xaml中，添加一个名称为HeadGridStyle的样式，
<!-- Head Grid Style -->
<Style x:Key="HeadGridStyle" TargetType="Grid">
<Setter Property="Background" Value="{StaticResource NavigationBackgroundColorBrush}"/>
<Setter Property="Height" Value="42"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="VerticalAlignment" Value="Top"/>
</Style>
在Styles.xaml中添加的HeadGridStyle样式，使用到了静态资源NavigationBackgroundColorBrush，同样来自Styles.xaml，
<!-- Primary Color Brushes -->
<SolidColorBrush x:Key="NavigationBackgroundColorBrush" Color="#FF484848"/>
<SolidColorBrush x:Key="HighLightColorBrush" Color="#FF0097FC"/>
<SolidColorBrush x:Key="NavigationForegroundColorBrush" Color="#FFFFFFFF"/>
<SolidColorBrush x:Key="BodyTextColorBrush" Color="#FF313131"/>
可以在Styles.xaml中，写下所有用到的ColorBrushes画笔，本身作为资源可以继续被其他资源所引用，
重新生成项目，可以看到MainPage上，HeadGrid的样式Style，已经按照Styles.xaml样式文件中设定的发生了改变，底色#FF484848，高度Height为42，边距空白Margin为0，在页面父元素中垂直对齐方式VerticalAlignment为Top，
在HeadGrid中，添加一块Border范围，用来显示程序的logo和应用名，样式Style引用自静态资源HeadGridStyle，
<!--HeadGrid-->
<Grid x:Name="HeadGrid" Style="{StaticResource HeadGridStyle}">
<!--LogoBorder-->
<Border x:Name="LogoBorder" Style="{StaticResource LogoBorderStyle}">
</Border>
</Grid>
在样式文件Styles.xaml文件中，添加一个名称为LogoBorderStyle的样式，TargetType="Border"标识该样式Style用于Border控件
<!-- Logo Border Style -->
<Style x:Key="LogoBorderStyle" TargetType="Border">
<Setter Property="Height" Value="42"/>
<Setter Property="Margin" Value="25,0,25,0"/>
<!--VerticalAlignment 在父元素中垂直对齐方式-->
<Setter Property="VerticalAlignment" Value="Top"/>
<!--HorizontalAlignment 在父元素中水平对齐方式-->
<Setter Property="HorizontalAlignment" Value="Left"/>
</Style>
在LogoBorder中添加一个StackPanel容器，存放一个logo区域ContentControl和一个应用名显示区域TextBlock，
<!--LogoBorder-->
<Border x:Name="LogoBorder" Style="{StaticResource LogoBorderStyle}">
<StackPanel x:Name="LogoStackPanel" Style="{StaticResource LogoStackPanelStyle}">
<ContentControl Style="{StaticResource LogoIcon}"/>
<TextBlock x:Name="ApplicationNameTextBlock" Style="{StaticResource ApplicationNameStyle}" Text="SilverlightDemo"/>
</StackPanel>
</Border>
添加的控件，样式Style均来自静态资源StaticResource，在Styles.xaml样式文件中，添加样式，
<!-- Logo StackPanel Style -->
<Style x:Key="LogoStackPanelStyle" TargetType="StackPanel">
<Setter Property="HorizontalAlignment" Value="Left"/>
<!--Orientation 内部元素的堆叠方式-->
<Setter Property="Orientation" Value="Horizontal"/>
</Style>
StackPanel的Orientation属性指定了，其内部元素的堆叠方式为Horizontal横向布局，
<!-- Logo Icon Style -->
<Style x:Key="LogoIcon" TargetType="ContentControl">
<Setter Property="Height" Value="24"/>
<Setter Property="Width" Value="24"/>
<Setter Property="Margin" Value="0,1,10,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<Grid>
<Path UseLayoutRounding='False' Fill="{StaticResource HighLightColorBrush}" Stretch="Fill" Data="M8,0 C12.417931,2.8898596E-06 16,3.5814998 16,8 C16,12.417819 12.41803,16 8,16 C3.5816212,16 6.1398991E-06,12.417912 0,8 C1.5351338E-06,6.8954077 0.22386749,5.8431153 0.62867981,4.8860393 C0.65398115,4.82622 0.6799894,4.7667723 0.70669389,4.7077074 L0.73170543,4.6541386 L5.6357112,9.5581446 L3.7429986,11.450858 L3.7429986,11.493001 L11.669835,11.493001 L11.669835,3.5661643 L11.627691,3.5661643 L9.7349787,5.4588776 L4.8993444,0.62324351 L5.0666013,0.55490673 C5.5510159,0.36389247 6.0585575,0.21878535 6.5838675,0.12495131 C6.8465204,0.078035071 7.1136146,0.043936942 7.3844767,0.023327276 C7.5199089,0.013022465 7.6562829,0.0060896641 7.7935166,0.0026129775 C7.862133,0.00087448902 7.9309645,4.5157563E-08 8,0 z"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
logo使用了一个Path路径来绘制，
<!-- ApplicationName Style -->
<Style x:Key="ApplicationNameStyle" TargetType="TextBlock">
<Setter Property="Foreground" Value="{StaticResource NavigationForegroundColorBrush}"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Margin" Value="0,2,0,0"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="10" Opacity="0.25" ShadowDepth="0"/>
</Setter.Value>
</Setter>
</Style>
AppName程序名使用到了Effect转换，添加了DropShadowEffect阴影效果，所使用到的画笔资源同样在Styles.xaml中添加，
<!-- Primary Color Brushes -->
<SolidColorBrush x:Key="NavigationBackgroundColorBrush" Color="#FF484848"/>
<SolidColorBrush x:Key="HighLightColorBrush" Color="#FF0097FC"/>
<SolidColorBrush x:Key="NavigationForegroundColorBrush" Color="#FFFFFFFF"/>
重新生成项目，可以看到logo区域LogoBorder的样式Style已经发生了变化
为了实现Silverlight模板页的效果，在页面中添加一块内容区域ContentBorder，当点击到不同页面时改变的只是内容区域，
<!--ContentBorder-->
<Border x:Name="ContentBorder" Style="{StaticResource ContentBorderStyle}">
<!--添加引用 xmlns:navigation-->
<navigation:Frame x:Name="ContentFrame" Style="{StaticResource ContentFrameStyle}" Source="/Home" Navigated="ContentFrame_Navigated" >
<!--添加引用 xmlns:uriMapper-->
<navigation:Frame.UriMapper>
<uriMapper:UriMapper>
<uriMapper:UriMapping Uri="" MappedUri="/Views/Home.xaml"/>
<uriMapper:UriMapping Uri="/{pageName}" MappedUri="/Views/{pageName}.xaml"/>
</uriMapper:UriMapper>
</navigation:Frame.UriMapper>
</navigation:Frame>
</Border>
navigation:Frame框架，需要添加引用命名空间 xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" ，
navigation:Frame.UriMapper对地址url对象的映射，需要添加引用命名空间 xmlns:uriMapper="clr-namespace:System.Windows.Navigation;assembly=System.Windows.Controls.Navigation"，
需要用到样式Style，同样在Styles.xaml文件中添加如下，
<!-- Content Border Style -->
<Style x:Key="ContentBorderStyle" TargetType="Border">
<Setter Property="Background">
<Setter.Value>
<!--LinearGradientBrush 线性渐变-->
<LinearGradientBrush EndPoint="0.5,0.045" StartPoint="0.5,0">
<GradientStop Color="#6FCCCCCC"/>
<GradientStop Color="#00CCCCCC" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="#FFFFFFFF"/>
<Setter Property="BorderThickness" Value="0,3,0,0"/>
<Setter Property="Margin" Value="0,42,0,0"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
</Style>
<!-- Content Frame Style -->
<!--添加引用 xmlns:navigation-->
<Style x:Key="ContentFrameStyle" TargetType="navigation:Frame">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<!--Padding 内边距-->
<Setter Property="Padding" Value="58,15,58,15"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
地址映射UriMapper的作用，是将标识符（URL）转换为新的相对路径（url），在程序中调用时会很简单和便于管理，
<navigation:Frame.UriMapper>
<uriMapper:UriMapper>
<uriMapper:UriMapping Uri="" MappedUri="/Views/Home.xaml"/>
<uriMapper:UriMapping Uri="/{pageName}" MappedUri="/Views/{pageName}.xaml"/>
</uriMapper:UriMapper>
</navigation:Frame.UriMapper>
可以看到在地址栏中，只有#/Home，地址映射UriMapper会将其映射为相对路径/Views/Home.xaml
在HeadGrid区域中，添加一个超链接区域AboutBorder，用来演示不通页面间的切换，
<!--AboutBorder-->
<Border x:Name="AboutBorder" Style="{StaticResource AboutBorderStyle}">
<StackPanel x:Name="AboutStackPanel" Style="{StaticResource AboutStackPanelStyle}">
<HyperlinkButton x:Name="LinkHome" Style="{StaticResource LinkStyle}" NavigateUri="/Home" TargetName="ContentFrame" Content="主页"/>
<Rectangle x:Name="Divider1" Style="{StaticResource DividerStyle}"/>
<HyperlinkButton x:Name="LinkAbout" Style="{StaticResource LinkStyle}" NavigateUri="/About" TargetName="ContentFrame" Content="关于"/>
</StackPanel>
</Border>
超链接区域AboutBorder中，用到了一个StackPanel容器，存放两个HyperlinkButton超链接按钮，TargetName="ContentFrame"说明需要导航到的框架名为内容区域ContentFrame，用到的样式Style，在样式文件Styles.xaml中添加，
<!-- About Border Style -->
<Style x:Key="AboutBorderStyle" TargetType="Border">
<Setter Property="Height" Value="42"/>
<Setter Property="Margin" Value="25,0,25,0"/>
<Setter Property="HorizontalAlignment" Value="Right"/>
</Style>
<!-- About StackPanel Style -->
<Style x:Key="AboutStackPanelStyle" TargetType="StackPanel">
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="Orientation" Value="Horizontal"/>
</Style>
<!-- Link Style -->
<Style x:Key="LinkStyle" TargetType="HyperlinkButton">
<Setter Property="Background" Value="{StaticResource HighLightColorBrush}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="#FF9D9492"/>
<Setter Property="Foreground" Value="{StaticResource NavigationForegroundColorBrush}"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="MinHeight" Value="28"/>
<Setter Property="MinWidth" Value="78"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="8,4,8,4"/>
</Style>
<!-- Divider Style -->
<Style x:Key="DividerStyle" TargetType="Rectangle">
<Setter Property="Fill" Value="#1FFFFFFF"/>
<Setter Property="Stroke" Value="Transparent"/>
<Setter Property="Width" Value="1"/>
<Setter Property="Margin" Value="2,4,2,4"/>
</Style>
重新生成项目，可以看到超链接区域AboutBorder的样式Style发生了改变，
点击超链接"主页"和"关于"，可以实现两个页面间的切换，变换内容区域ContentBorder，其中显示新建的Home.xaml和About.xaml的内容
Silverlight学习笔记目录
