Silverlight 5 beta新特性探索系列:7.结合上层元素属性绑定和Style Setter上的绑定

        在Silverlight 5中添加了相对上层元素属性的绑定，还有Style Setter也可以绑定数据。

        一、相对上层元素属性的绑定

       它是在元素内部的子孙级元素中的某一些属性可以绑定为祖先级元素的某一些属性。比如说再一个ListBox的Tag元素值为：“这是第一个父级绑定”，在ListBox.Templete下面添加一个TextBlock元素的Text属性设置为 <TextBlock Text="{Binding Tag,RelativeSource={RelativeSource  AncestorType=ListBox,AncestorLevel=1}}"/>，这样子当ListBox有数据集合的时候显示的数据行就是值“这是第一个父级绑定”。

         下面我们来看完整的XAML源码(MainPage.xaml)：

< ListBox Tag = " 这是第一个父级绑定 " Name = " listBox1 " Margin = " 100,50,169,221 " >
< ListBox.ItemTemplate >
< DataTemplate >
< StackPanel >
< TextBlock Text = " {Binding Tag,RelativeSource={RelativeSource
AncestorType = ListBox,AncestorLevel = 1 }} " />
</ StackPanel >
</ DataTemplate >
</ ListBox.ItemTemplate >
</ ListBox >

        接下来我们看后台代码(MainPage.xaml.cs代码)：

public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
// 设置当前listBox1的数据源
this .listBox1.ItemsSource = new List < Person > (){
new Person(){ Name = " 张三 " },
new Person(){ Name = " 李四 " },
new Person(){ Name = " 王五 " },
new Person(){ Name = " 刘六 " }
};
}
}
/// <summary>
/// 实体类Person
/// </summary>
public class Person
{
string _Name;

public string Name
{
get { return _Name; }
set { _Name = value; }
}
}

        运行程序我们可以看到效果图如左图，而非右图，

     

        二、Style Setter的绑定

        准备一个Style样式的源类TBTheme，此类中有多个属性，这些属性是一些样式的颜色，文字大小之类的。将此类引入到App.xaml文件中，然后再App.xaml中的Style Setter绑定这个源类TBTheme，并且设置需要绑定的源类中的某个属性。当鼠标单击此TextBlock的时候切换绑定的属性的值。其步骤分为四步。

             第一步：引入TBTheme类设置其key为tbTheme

             第二步：设置绑定到TBTheme类下面的TextBrush字段（App.xaml中代码如下）

< Application xmlns = " http://schemas.microsoft.com/winfx/2006/xaml/presentation "
xmlns:x = " http://schemas.microsoft.com/winfx/2006/xaml "
x:Class = " SL5BindInStyle.App "
xmlns:local = " clr-namespace:SL5BindInStyle "
>
< Application.Resources >
<!-- 第一步：引入TBTheme类设置其key为tbTheme -->
< local:TBTheme x:Key = " tbTheme " />
<!-- 第二步：设置绑定到TBTheme类下面的TextBrush字段 -->
< Style x:Key = " NormalText " TargetType = " TextBlock " >
< Setter Property = " FontFamily " Value = " Comic Sans MS " />
< Setter Property = " FontSize " Value = " 12 " />
< Setter Property = " Foreground " Value = " {Binding TextBrush,
Source = {StaticResource tbTheme}} " />
</ Style >
</ Application.Resources >
</ Application >

             第三步：获取到需要绑定设置的字体颜色（TBTheme.cs代码如下）

using System.ComponentModel;
namespace SL5BindInStyle
{
public class TBTheme : INotifyPropertyChanged
{
// 标志符，标志当前是什么颜色
bool Flag;
public TBTheme()
{
// 初始化类
Flag = true ;
GetOtherColor();
}
public event PropertyChangedEventHandler PropertyChanged;
private Brush _textBrush;
/// <summary>
/// 字体颜色
/// </summary>
public Brush TextBrush
{
get { return _textBrush; }
set
{
_textBrush = value;
if (PropertyChanged != null )
PropertyChanged( this , new PropertyChangedEventArgs( " TextBrush " ));
}
}
/// <summary>
/// 第三步：获取其他颜色
/// </summary>
public void GetOtherColor()
{
if (Flag)
{
TextBrush = new SolidColorBrush(Colors.Blue);
Flag = false ;
}
else
{
TextBrush = new SolidColorBrush(Colors.Green);
Flag = true ;

}
}
}
}

             第四步：每次点击textBlock1就更换一次字体颜色（MainPage.xaml.cs代码）

// 第四步：每次点击textBlock1就更换一次字体颜色
private void textBlock1_MouseLeftButtonDown( object sender, MouseButtonEventArgs e)
{
(Application.Current.Resources[ " tbTheme " ] as TBTheme).GetOtherColor();
}

       MainPage.xaml的主代码如下，TextBlock绑定全局静态资源App.xaml中的key为NormalText样式：

< TextBlock x:Name = " textBlock1 " Text = " 可以动态改变颜色的TextBlock "
Style = " {StaticResource NormalText} " Margin = " 100,0,169,456 "
MouseLeftButtonDown = " textBlock1_MouseLeftButtonDown " ></ TextBlock >

        最后我们来看看点击TextBlock前后的照片如下图，如需源码请点击 SL5BindInStyle.zip 下载。

点击前效果：   点击后效果：