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,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,10,3" d:LayoutOverrides="Height" Content="申请单名称"/>
                    		<sdk:Label Margin="27,5,4" Grid.Row="1" d:LayoutOverrides="Height" Content="项目编号"/>
                    		<sdk:Label Grid.Column="2" Margin="28,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,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,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,20,2" Grid.Row="2"/>
                    		<CheckBox Content="" Grid.Column="3" Margin="-13,-2" Grid.Row="3"/>
                    		<ComboBox Grid.Column="1" Margin="5,4" Grid.Row="3" Height="21" VerticalAlignment="Bottom"/>
                    		<TextBox Grid.Column="1" Margin="5,2" textwrapping="Wrap" Text=""/>
                    		<TextBox Grid.Column="3" Margin="-14,1" textwrapping="Wrap" Text=""/>
                    		<TextBox Grid.Column="1" Margin="5,1" Grid.Row="1" textwrapping="Wrap" Text="" d:LayoutOverrides="Height"/>
                    		<TextBox Grid.Column="3" Margin="-14,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>

效果：

 

 

 

 

代码下载