稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSource; 样式之动态修改样式, 样式继承, 自定义光标

[索引页]
[源码下载]

稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSource; 样式之动态修改样式, 样式继承, 自定义光标

作者： webabcd


介绍
Silverlight 3.0 绑定的新增功能，样式相关的新增功能

• Element to Element Binding - Element 到 Element 之间的绑定 
• RelativeSource - 一个扩展标记，用于指定关联数据源为 Self 或 TemplatedParent 
• 动态修改样式 - 在 Runtime 时修改样式 
• 样式继承 - 通过 BasedOn 使某样式可以继承自另一个样式 
• 自定义光标 - 通过 CaretBrush 自定义输入框的光标的样式 

在线DEMO
http://www.cnblogs.com/webabcd/archive/2009/08/04/1538238.html


示例
1、Element to Element 绑定的演示
Element2Element.xaml

< navigation:Page  x:Class ="Silverlight30.Binding.Element2Element"  
           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"
           xmlns:navigation ="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth ="640"  d:DesignHeight ="480"
           Title ="Element to Element Binding Page" >
     < Grid  x:Name ="LayoutRoot" >
         < StackPanel  VerticalAlignment ="Top"  HorizontalAlignment ="Left" >
        
             <!-- Element to Element 绑定的支持 -->
            
             <!--
                绑定方式1：{Binding 绑定的属性名称, Mode=, ElementName=绑定的对象名称}
                绑定方式2：{Binding ElementName=绑定的对象名称, Path=绑定的属性名称, Mode=}
                Mode的可用值有：OneTime, OneWay, TwoWay
             -->
             < Slider  x:Name ="silder"  Value ="50"  Minimum ="1"  Maximum ="100"  LargeChange ="5"  Width ="500" ></ Slider >
             < TextBox  Text =" {Binding Value, Mode=TwoWay, ElementName=silder} "   />
            
             < Slider  Minimum ="1"  Maximum ="100"  LargeChange ="5"  Width ="500"
                    Value =" {Binding ElementName=textBox, Path=Text, Mode=TwoWay } " ></ Slider >
             < TextBox  x:Name ="textBox"  Text ="50"   />
            
         </ StackPanel >
     </ Grid >
</ navigation:Page >

2、RelativeSource 扩展标记应用的 Demo
RelativeSourceDemo.xaml

< navigation:Page  x:Class ="Silverlight30.Binding.RelativeSourceDemo"  
           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"
           xmlns:navigation ="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth ="640"  d:DesignHeight ="480"
           Title ="RelativeSourceDemo Page" >
     < Grid  x:Name ="LayoutRoot" >
    
         <!--
            RelativeSource - 一个扩展标记，用于指定关联数据源。这是 Silverlight 3.0 绑定的新增功能
                RelativeSource={RelativeSource Self} - 指定数据源为自己本身
                RelativeSource={RelativeSource TemplatedParent} - 在 ControlTemplate 出现，指定数据源为引用了该 ControlTemplate 的 Control
         -->
        
         < StackPanel >
        
             < StackPanel.Resources >
                 < ControlTemplate  x:Key ="myButton"  TargetType ="Button" >
                     < Grid >
                         <!-- 演示 {RelativeSource TemplatedParent} 的 Demo -->
                         < Border  x:Name ="Background"  CornerRadius ="3"  Background =" {Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background} "  BorderThickness =" {TemplateBinding BorderThickness} "  BorderBrush =" {TemplateBinding BorderBrush} " >
                             < Grid  Background =" {TemplateBinding Background} "   Margin ="1" >
                                 < Border  Opacity ="0"   x:Name ="BackgroundAnimation"  Background ="#FF448DCA"   />
                                 < Rectangle  x:Name ="BackgroundGradient"   >
                                     < Rectangle.Fill >
                                         < LinearGradientBrush  StartPoint =".7,0"  EndPoint =".7,1" >
                                             < GradientStop  Color ="#FFFFFFFF"  Offset ="0"   />
                                             < GradientStop  Color ="#F9FFFFFF"  Offset ="0.375"   />
                                             < GradientStop  Color ="#E5FFFFFF"  Offset ="0.625"   />
                                             < GradientStop  Color ="#C6FFFFFF"  Offset ="1"   />
                                         </ LinearGradientBrush >
                                     </ Rectangle.Fill >
                                 </ Rectangle >
                             </ Grid >
                         </ Border >
                         < ContentPresenter
                               x:Name ="contentPresenter"
                              Content =" {TemplateBinding Content} "
                              ContentTemplate =" {TemplateBinding ContentTemplate} "
                              VerticalAlignment =" {TemplateBinding VerticalContentAlignment} "
                              HorizontalAlignment =" {TemplateBinding HorizontalContentAlignment} "
                              Margin =" {TemplateBinding Padding} " />
                         < Rectangle  x:Name ="DisabledVisualElement"  RadiusX ="3"  RadiusY ="3"  Fill ="#FFFFFFFF"  Opacity ="0"  IsHitTestVisible ="false"   />
                         < Rectangle  x:Name ="FocusVisualElement"  RadiusX ="2"  RadiusY ="2"  Margin ="1"  Stroke ="#FF6DBDD1"  StrokeThickness ="1"  Opacity ="0"  IsHitTestVisible ="false"   />
                     </ Grid >
                 </ ControlTemplate >

             </ StackPanel.Resources >

             <!-- 演示 {RelativeSource Self} 的 Demo -->
             < TextBlock  x:Name ="lbl"  Text =" {Binding RelativeSource={RelativeSource Self}, Path=Name} "   />
            
             < Button  Content ="Button"  Template =" {StaticResource myButton} "  Background ="Red"   />

         </ StackPanel >

     </ Grid >
</ navigation:Page >

3、Runtime 时修改样式的演示
ButtonStyle1.xaml（样式 1）

< ResourceDictionary  xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:vsm ="clr-namespace:System.Windows;assembly=System.Windows"
>
     <!--
        自定义 Button 样式 1
     -->
     < Style  x:Key ="myButton1"  TargetType ="Button" >
         < Setter  Property ="Foreground"  Value ="Red" />
         < Setter  Property ="Padding"  Value ="3" />
         < Setter  Property ="BorderThickness"  Value ="3"   />
         < Setter  Property ="BorderBrush"  Value ="Green"   />
     </ Style >
</ ResourceDictionary >

ButtonStyle2.xaml（样式 2）

< ResourceDictionary  xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:vsm ="clr-namespace:System.Windows;assembly=System.Windows"
>
     <!--
        自定义 Button 样式 2
     -->
     < Style  x:Key ="myButton2"  TargetType ="Button" >
         < Setter  Property ="Foreground"  Value ="Blue" />
         < Setter  Property ="Padding"  Value ="3" />
         < Setter  Property ="BorderThickness"  Value ="3"   />
         < Setter  Property ="BorderBrush"  Value ="Red"   />
     </ Style >
</ ResourceDictionary >

RuntimeChangeStyle.xaml

< navigation:Page  x:Class ="Silverlight30.Style.RuntimeChangeStyle"  
           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"
           xmlns:navigation ="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth ="640"  d:DesignHeight ="480"
           Title ="RuntimeChangeStyle Page" >
     < Grid  x:Name ="LayoutRoot" >

         <!--
            runtime 时修改样式的 Demo
         -->             
         < StackPanel  Orientation ="Horizontal" >
             < Button  x:Name ="btn1"  Content ="Button 样式 1"  Click ="btn1_Click"  Width ="160"  Height ="30"  Margin ="10"   />
             < Button  x:Name ="btn2"  Content ="Button 样式 2"  Click ="btn2_Click"  Width ="160"  Height ="30"  Margin ="10"   />
         </ StackPanel >
        
     </ Grid >
</ navigation:Page >

RuntimeChangeStyle.xaml.cs

using  System;
using  System.Collections.Generic;
using  System.Linq;
using  System.Net;
using  System.Windows;
using  System.Windows.Controls;
using  System.Windows.Documents;
using  System.Windows.Input;
using  System.Windows.Media;
using  System.Windows.Media.Animation;
using  System.Windows.Shapes;
using  System.Windows.Navigation;

using  System.Xml.Linq;

namespace  Silverlight30.Style
{
    public partial class RuntimeChangeStyle : Page
    {
        public RuntimeChangeStyle()
        {
            InitializeComponent();
        }

        private void btn1_Click(object sender, RoutedEventArgs e)
        {
            // 动态设置样式。样式来自于 Style/ButtonStyle1.xaml
            System.Windows.Style style = (System.Windows.Style)Application.Current.Resources["myButton1"];
            btn1.Style = style;
            btn2.Style = style;
        }

        private void btn2_Click(object sender, RoutedEventArgs e)
        {
            // 动态设置样式。样式来自于 Style/ButtonStyle2.xaml
            System.Windows.Style style = (System.Windows.Style)Application.Current.Resources["myButton2"];
            btn1.Style = style;
            btn2.Style = style;
        }
    }
}

4、样式的可继承性的演示
BasedOn.xaml

< navigation:Page  x:Class ="Silverlight30.Style.BasedOn"  
           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"
           xmlns:navigation ="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth ="640"  d:DesignHeight ="480"
           Title ="BasedOn Page" >
     < Grid  x:Name ="LayoutRoot" >

         <!--
            样式的可继承性（BasedOn）的演示
         -->

         < Grid.Resources >
             <!-- 基样式 -->
             < Style  x:Key ="baseButton"  TargetType ="Button" >
                 < Setter  Property ="Foreground"  Value ="Red" />
                 < Setter  Property ="Padding"  Value ="3" />
                 < Setter  Property ="BorderThickness"  Value ="3"   />
                 < Setter  Property ="BorderBrush"  Value ="Green"   />
             </ Style >
            
             <!-- 子样式 -->
             <!-- BasedOn - 指定当前样式的父样式（此样式会继承指定的父样式） -->
             < Style  x:Key ="myButton"  TargetType ="Button"  BasedOn =" {StaticResource baseButton} " >
                 < Setter  Property ="BorderBrush"  Value ="Red"   />
             </ Style >
         </ Grid.Resources >

         < StackPanel >
             < Button  x:Name ="btn1"  Content ="Button 1"  Width ="120"  Height ="30"  Margin ="5"
                Style =" {StaticResource baseButton} "    />
             < Button  x:Name ="btn2"  Content ="Button 2"  Width ="120"  Height ="30"  Margin ="5"
                Style =" {StaticResource myButton} "    />
         </ StackPanel >

     </ Grid >
</ navigation:Page >

5、自定义光标的实现
CaretBrush.xaml

< navigation:Page  x:Class ="Silverlight30.Style.CaretBrush"  
           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"
           xmlns:navigation ="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth ="640"  d:DesignHeight ="480"
           Title ="CaretBrush Page" >
     < Grid  x:Name ="LayoutRoot" >
        
         <!--
            CaretBrush - 定义输入框的光标的样式
            GradientBrush.MappingMode - 指定渐变点的位置类型 [System.Window.Media.BrushMappingMode 枚举]
                RelativeToBoundingBox - 百分比定位（0,0 - 1,1 之间）
                Absolute - 绝对定位
         -->
    
         < TextBox >
             < TextBox.CaretBrush >
                 < LinearGradientBrush  MappingMode ="RelativeToBoundingBox"  StartPoint ="0,0"  EndPoint ="0,1" >
                     < LinearGradientBrush.GradientStops >
                         < GradientStop  Color ="Red"  Offset ="0.0"   />
                         < GradientStop  Color ="Green"  Offset ="1.0"   />
                     </ LinearGradientBrush.GradientStops >
                 </ LinearGradientBrush >
             </ TextBox.CaretBrush >
         </ TextBox >
        
     </ Grid >
</ navigation:Page >

OK
[源码下载]