[源码下载]
稳扎稳打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
[源码下载] 总结
以上是内存溢出为你收集整理的稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSource全部内容，希望文章能够帮你解决稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSource所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）