稳扎稳打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.voidcn.com/article/p-boakcggz-tq.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
[源码下载]