Silverlight之资源样式的应用（5）

代码下载

1.样式关键点
 <UserControl.Resources>
        <!-- 将样式应用于按钮Button-->
        <Style TargetType="Button" x:Key="t1">
            <!-- 设置Button上字体色为蓝色到红色渐变-->
            <Setter  Property="Foreground">
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0,0.5" EndPoint="0.5,1">
                        <GradientStop Color="Blue" Offset="0"/>
                        <GradientStop Color="Red" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <!-- 设置Button背景色为红色-->
            <Setter Property="Background">
                <Setter.Value >
                   red
                </Setter.Value>
            </Setter>
            <!-- 设置Button字体字号为22-->
            <Setter Property="FontSize"  Value="22"></Setter>
        </Style>
        <!-- 将样式应用于TextBox-->
        <Style  TargetType="TextBox" x:Key="txt1">
            <!-- 设置TextBox背景色为蓝色-->
            <Setter Property="Background" Value="blue"></Setter>
        </Style>

        <!-- 将样式继承关系-->
        <Style  TargetType="TextBox" x:Key="txt2" BasedOn="{StaticResource txt1}">
            <!-- 设置TextBox背景色为蓝色-->
            <Setter Property="FontSize" Value="12"></Setter>
            <!-- 覆盖父样式-->
            <Setter Property="Background" Value="Red"></Setter>
        </Style>
       
        <LinearGradientBrush x:Key="l1">
            <GradientStop Color="Blue" Offset="0"></GradientStop>
            <GradientStop Color="Black"  Offset="1"></GradientStop>
        </LinearGradientBrush>
    </UserControl.Resources>
2.应用样式代码
<Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions >
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <!-- TextBox应用样式-->   
        <TextBox Style="{StaticResource txt1}" Height="30" Width="100" Grid.Row="0" Grid.Column="0"></TextBox>
        <!-- TextBox不应用样式-->
        <TextBox  Height="30" Width="100"  Grid.Row="1" Grid.Column="0"></TextBox>
        <!-- TextBox应用继承的样式-->
        <TextBox  Height="30" Width="100"  Grid.Row="2" Grid.Column="0" Text="TextBox应用继承的样式" Style="{StaticResource txt2}"></TextBox>
     
        <!-- Button不应用样式-->
        <Button  x:Name="b2" Height="30" Width="100" Grid.Row="0" Grid.Column="1" Content="bt1"></Button>
        <Button  x:Name="b3" Height="30" Width="100" Grid.Row="1" Grid.Column="1" Content="bt1"></Button>
        <Button  x:Name="b4" Height="30" Width="100" Grid.Row="2" Grid.Column="1" Content="中华人民共和国" Foreground="{StaticResource l1}"></Button>
       <!-- Button应用样式-->
        <Button x:Name="b1" Grid.Row="2" Grid.Column="2" Content="得到资源值" Style="{StaticResource t1}" Click="b1_Click" Margin="16,35,0,23"></Button>
</Grid>
3.说明
1）可以使用X：key。也可以使用X:Name来定义资源。
不同的是，使用X:Name必须是唯一的，使用X:key在一个范围内必须唯一，但是在小范围之外是可以重复。
关键在cs代码方法如果是X:Name，可以直接把name当作cs的对象来使用，但是如果是key，必须使用this.Resources["l1"]；来获得属性
2）样式Style基本是为特定的元素类型分配的属性集合，除了有Key外，还有一个TargetType属性，设置作用的控件类型。
3)样式的继承使用Baseon={StaticResource btnStyle}
继承父样式以后，可以直接使用父样式中的定义，如果有重复的定义，子样式会覆盖父样式的内容

3.执行效果

补充文档

新增样式代码

<UserControl xmlns:my="clr-namespace:SLUI"  x:Class="SLUI.MainPage"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d"    d:DesignHeight="600" d:DesignWidth="800" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">    <Grid x:Name="LayoutRoot" Style="{StaticResource GridStyle}">        <Grid.ColumnDefinitions >            <ColumnDefinition ></ColumnDefinition>        </Grid.ColumnDefinitions>        <Grid.RowDefinitions >            <RowDefinition Height="Auto" MinHeight="600"></RowDefinition>        </Grid.RowDefinitions>        <Border Name="borderAll"  CornerRadius="10" Height="500" Style="{StaticResource BorderStyle}">            <StackPanel Height="500" HorizontalAlignment="Center"  Name="stackPanel3" VerticalAlignment="Top" Style="{StaticResource StackPanelStyle}" Orientation="Vertical" FlowDirection="RightToLeft" >                <!--大标题高50-->                <StackPanel   Name="stackPanelBigTitle"  Style="{StaticResource StackPanelBigTitleStyle}">                    <TextBlock Name="txtBigTitle" Text="借款申请单" Style="{StaticResource TextBlockBigTitleStyle}"/>                </StackPanel>                <!--小标题高30-->                <StackPanel  Name="stackPanel1"  Style="{StaticResource StackPanelSmallTitleStyle}">                    <TextBlock  Name="txtTitle" Text="基本信息"  Style="{StaticResource TextBlockSmallTitleStyle}"/>                </StackPanel>                <!--工具栏30-->                <StackPanel  Name="stackPanel2"  Style="{StaticResource StackPanelToolStyle}" >                    <Button Content="取消" Name="button2" Width="75"  Style="{StaticResource ButtonStyle}"/>                    <Button Content="保存" Name="btnSave" Width="75" Style="{StaticResource ButtonStyle}"/>                </StackPanel>                <!--内容100-->                <Border Height="100" Name="border1" Style="{StaticResource BorderContentStyle}" >                    <StackPanel  Height="99"   Name="stackPanelContent1"  Style="{StaticResource StackPanelContentStyle}">                    <Grid Height="102"  FlowDirection="LeftToRight">                    <Grid.ColumnDefinitions>                    <ColumnDefinition/>                    <ColumnDefinition/>                    <ColumnDefinition/>                    <ColumnDefinition/>                    </Grid.ColumnDefinitions>                    <Grid.RowDefinitions>                    <RowDefinition/>                    <RowDefinition/>                    <RowDefinition/>                    <RowDefinition/>                    </Grid.RowDefinitions>                    <sdk:Label Margin="27,6,51,3" d:LayoutOverrides="Height" Content="申请单编号"/>                    <sdk:Label Grid.Column="2" Margin="28,6,10,3" d:LayoutOverrides="Height" Content="申请单名称"/>                    <sdk:Label Margin="27,5,35,4" Grid.Row="1" d:LayoutOverrides="Height" Content="项目编号"/>                    <sdk:Label Grid.Column="2" Margin="28,5,26,4" Grid.Row="1" d:LayoutOverrides="Height" Content="项目名称"/>                    <sdk:Label Margin="27,4,43,5" Grid.Row="2" d:LayoutOverrides="Height" Content="业务类别"/>                    <sdk:Label Grid.Column="2" Margin="28,5,42,0" Grid.Row="2" Content="币种"/>                    <sdk:Label Margin="27,3,59,6" Grid.Row="3" d:LayoutOverrides="Height" Content="借款单位"/>                    <sdk:Label Grid.Column="2" Margin="28,3,42,6" Grid.Row="3" d:LayoutOverrides="Height" Content="是否合作项目"/>                    <ComboBox Grid.Column="1" Margin="5,2,1,3" Grid.Row="2"/>                    <ComboBox Grid.Column="3" Margin="-14,2,20,2" Grid.Row="2"/>                    <CheckBox Content="" Grid.Column="3" Margin="-13,3,35,-2" Grid.Row="3"/>                    <ComboBox Grid.Column="1" Margin="5,0,1,4" Grid.Row="3" Height="21" VerticalAlignment="Bottom"/>                    <TextBox Grid.Column="1" Margin="5,0,1,2" TextWrapping="Wrap" Text=""/>                    <TextBox Grid.Column="3" Margin="-14,0,20,1" TextWrapping="Wrap" Text=""/>                    <TextBox Grid.Column="1" Margin="5,0,1,1" Grid.Row="1" TextWrapping="Wrap" Text="" d:LayoutOverrides="Height"/>                    <TextBox Grid.Column="3" Margin="-14,0,20,1" Grid.Row="1" TextWrapping="Wrap" Text=""/>                    </Grid>                    </StackPanel>                </Border>                <!--小标题高30-->                <StackPanel   Name="stackPanelTitle2"  Style="{StaticResource StackPanelSmallTitleStyle}">                    <TextBlock Name="txtTitle2" Text="合作方信息"  Style="{StaticResource TextBlockSmallTitleStyle}"/>                </StackPanel>                <!--工具栏30-->                <StackPanel  Name="stackPanelTool2" Style="{StaticResource StackPanelToolStyle}">                    <Button Content="添加合作方信息" Name="btnSave2" Width="100"  Style="{StaticResource ButtonStyle}"/>                </StackPanel>                <!--内容100-->                <Border Height="100" Name="border2" Style="{StaticResource BorderContentStyle}">                    <StackPanel  Height="100"  Name="stackPanelContent2" Style="{StaticResource StackPanelContentStyle}">                    <sdk:DataGrid Height="100" Background="White" FlowDirection="LeftToRight">                    <sdk:DataGrid.Columns>                    <sdk:DataGridCheckBoxColumn Header="选择"/>                    <sdk:DataGridTextColumn Header="合作方名称"/>                    <sdk:DataGridTextColumn Header="出资比例"/>                    <sdk:DataGridTextColumn Header="出资金额"/>                    </sdk:DataGrid.Columns>                    </sdk:DataGrid></StackPanel>                </Border>                                <!--小标题高30-->                <StackPanel   Name="stackPanelTitle3" Style="{StaticResource StackPanelSmallTitleStyle}">                    <TextBlock Name="txtTitle3" Text="支付信息"   Style="{StaticResource TextBlockSmallTitleStyle}"/>                </StackPanel>                <!--工具栏30-->                <!--内容100-->                <Border Height="100" Name="border3" Style="{StaticResource BorderContentStyle}">                    <StackPanel  Height="100" Name="stackPanelContent3" Style="{StaticResource StackPanelContentStyle}"></StackPanel>                </Border>            </StackPanel>        </Border>    </Grid></UserControl>

效果：

 

 

 

 

代码下载