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

最新推荐文章于 2015-01-13 15:00:59 发布

影天

最新推荐文章于 2015-01-13 15:00:59 发布

阅读量544

点赞数

分类专栏： .NET

本文链接：https://blog.csdn.net/xwlyun/article/details/9156839

版权

.NET 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

本文将建立一个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学习笔记目录

影天

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Silverlight学习笔记（1）——样式的运用

本文将建立一个silverlight项目中的运用样式的简单实例，以下是详细步骤：　　新建一个Silverlight应用程序，名称SilverlightTest 　　新建文件夹Assets，用以存放样式文件，在Assets文件夹中新建一个Silverlight资源字典，名称Styles.xaml，后面Silverlight项目引用到的样式资源我们将全部写在Styles.
复制链接

扫一扫