稳扎稳打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://webabcd.blog.51cto.com/1787395/342289

示例
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
稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSourceusing System; 
稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSourceusing System.Collections.Generic; 
稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSourceusing System.Linq; 
稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSourceusing System.Net; 
稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSourceusing System.Windows; 
稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSourceusing System.Windows.Controls; 
稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSourceusing System.Windows.Documents; 
稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSourceusing System.Windows.Input; 
稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSourceusing System.Windows.Media; 
稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSourceusing System.Windows.Media.Animation; 
稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSourceusing System.Windows.Shapes; 
稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSourceusing System.Windows.Navigation; 
稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSource 
稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSourceusing System.Xml.Linq; 
稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSource 
稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSourcenamespace Silverlight30.Style 
稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSource
稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSource        public partial class RuntimeChangeStyle : Page 
稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSource        { 
稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSource                public RuntimeChangeStyle() 
稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSource                { 
稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSource                        InitializeComponent(); 
稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSource                } 
稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSource 
稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSource                private void btn1_Click(object sender, RoutedEventArgs e) 
稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSource                { 
稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSource                        // 动态设置样式。样式来自于 Style/ButtonStyle1.xaml 
稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSource                        System.Windows.Style style = (System.Windows.Style)Application.Current.Resources["myButton1"]; 
稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSource                        btn1.Style = style; 
稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSource                        btn2.Style = style; 
稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSource                } 
稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSource 
稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSource                private void btn2_Click(object sender, RoutedEventArgs e) 
稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSource                { 
稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSource                        // 动态设置样式。样式来自于 Style/ButtonStyle2.xaml 
稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSource                        System.Windows.Style style = (System.Windows.Style)Application.Current.Resources["myButton2"]; 
稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSource                        btn1.Style = style; 
稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSource                        btn2.Style = style; 
稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSource                } 
稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSource        } 
稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSource}
 
 
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>
 
 

     本文转自webabcd 51CTO博客,原文链接:http://blog.51cto.com/webabcd/342770,如需转载请自行联系原作者
 
上一篇:MVC4之ModelBinder-模型绑定


下一篇:win7安装scrapy