http://www.cnblogs.com/xwlyun/archive/2012/01/13/2321799.html
本文将建立一个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的内容