Silverlight学习笔记（1）——样式的运用

最新推荐文章于 2020-08-07 23:36:24 发布
最新推荐文章于 2020-08-07 23:36:24 发布
阅读量370 收藏
点赞数
分类专栏： SilverLight



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的内容




简单的绿竹
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
SilverLight学习笔记
05-19
《SilverLight学习笔记》 SilverLight，作为微软推出的一种基于.NET Framework的富互联网应用程序平台，为开发者提供了丰富的图形渲染和媒体处理能力。本篇笔记主要探讨SilverLight中的独立存储（Isolated Storage...
WPF and Silverlight 学习笔记 chm版
11-01
将网上流传甚广的“WPF and Silverlight 学习笔记”精心制作成CHM格式，供各位WPF和Silverlight程序员学习使用。
Silverlight通过代码设置样式
技术积累、分享成果
12-30 1179
1.从页面资源中获取样式并应用 btnTest.Style = (Style)this.Resources["BigButtonStyle"] 2.从项目中单独分开的资源字典文件(或一个引用的程序集中)中获取样式。 首先，需要创建一个ResourceDictionary对象并提供正确的URI: ResourceDictionary dictionary = new ResourceDict
WPF and Silverlight 学习笔记
CSDN1332531529的博客
03-27 101
WPF学习网址：http://www.cnblogs.com/DragonInSea/archive/2009/04/07/1430948.html 前一段时间一直很忙很忙，从4月份开始终于有时间学习一些新的东西了。回头一看，要学习整理的东西太多了：WPF、WCF、WF、Silverlight、JQuery、Ajax、ASP.Net MVC、ADO.Net Entry…想了想，终于决...
Silverlight学习笔记（4）——数据绑定ListBox
xwlyun的专栏
06-23 465
本文将建立一个silverlight项目中运用ListBox演示数据绑定的简单实例，以下是详细步骤：     在Silverlight项目中新建一个silverlight页，修改布局使其显示一个ListBox，本例Grid布局可以如下， "auto"/> "600"/>
WPF学习笔记——没有前途的WPF
qq_44894655的博客
04-13 320
WPF学习笔记——没有前途的WPF
前端学习笔记——MVC、MVP、MVVM模式
wsy55378的博客
08-07 363
MVC、MVP、MVVM模式的概念与区别1. MVC框架1.1 MVC 编程模式Model（模型）View（视图）Controller（控制器）1.2 MVC优点1.3 缺点2. MVP模式1.1 优点1.2 缺点1.3 MVP与MVC区别3.MVVM框架3.1 MVVM模式的组成部分3.2 MVVM优点3.3 MVVM与MVP区别： 1. MVC框架 MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一
有关DataVisualization类组件的研究——Silverlight学习笔记
shenyuyin的专栏
01-13 1241
Data Visualization类组件以直观的图表方式显示数据的分布，能够让我们更好地分析各数据的内在联系。本文主要向大家介绍该类组件的基本特性以及使用实例。 一、基本特性介绍1、chart组件该组件是整个Data Visualization类组件的核心。从整体上讲，该组件可以看成是各类图表序列的容器。 组件所在命名空间：System.Windows.Control
Silverlight学习笔记--Silverlight初接触
刘军的专栏
10-28 1367
Microsoft Silverlight是微软所发展的 Web 前端应用程序开发解决方案
Silverlight学习笔记
xwlyun的专栏
08-28 506
Silverlight学习笔记（1）——样式的运用 Silverlight学习笔记（2）——GridSplitter Silverlight学习笔记（3）——动画Storyboard Silverlight学习笔记（4）——数据绑定ListBox Silverlight学习笔记（5）——读取宿主web.config
silverlight学习
08-10
silverlight基础学习的基本例子
WPF学习笔记 ——主流桌面应用开发技术
03-17
WPF 通过一整套应用程序开发功能扩展了这个核心，这些功能包括 可扩展应用程序标记语言 (XAML)、控件、数据绑定、布局、二维和三维图形、动画、样式、模板、文档、媒体、文本和版式。WPF 包含在 Microsoft .NET ...
SilverlightQQ项目实践——Silverlight架构思考
02-02
关于 Silverlight 的发展，不可避免要拿去和 Flash 比较，别忘了具有...如果 Silverlight 能完整地解决跨平台问题，这场战争鹿死谁手还真难说。世界本应是多元化的，未来它们各自的定位也许会决定如何占有一席之地。
个人做的HTML5学习笔记
12-13
主要作用是减少网页浏览器对于需要插件的丰富性网络应用服务，例如：Adobe Flash、Microsoft Silverlight与Oracle JavaFX的需求，并且提供更多能有效加强网络应用的标准集。 通过对HTML5的定义，我们可以了解到...
SilverLight学习笔记--Silverlight之数据校验的实现
09-17
在前两篇“Silverlight学习笔记”中，我们已经学习了数据绑定的基础和`INotifyPropertyChanged`接口的使用。现在，我们将结合这些知识，了解如何在双向绑定过程中进行数据验证。 Silverlight提供了内置机制来处理...
silverlight 学习入门DEMO SilverlightLearningPortal.rar
11-05
Silverlight学习入门DEMO源码 源码描述： 一、源码特点 Silverlight学习入门DEMO集合，初学者的福音，希望对你有所帮助，欢迎下载 二、菜单功能 1、控件 2、浏览器外 3、被信任度应用程序 4、用户界面 5、...
Silverlight2入门学习指南
这是一份关于Silverlight技术的入门教程，适合初学者学习。Silverlight是微软推出的一种RIA（Rich Internet Application，富互联网应用）开发平台，它允许开发者创建具有丰富视觉效果和交互性的网络应用程序。教程以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值