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; }
}
}
复制代码

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

2011042116340583.jpg      2011042116374139.jpg

        二、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 下载。

点击前效果:2011042116381085.jpg   点击后效果:2011042116381658.jpg



本文转自程兴亮博客园博客,原文链接:http://www.cnblogs.com/chengxingliang/archive/2011/04/22/2023732.html,如需转载请自行联系原作者


相关文章
|
前端开发
前端项目实战237-控制父组件要绑定的属性值
前端项目实战237-控制父组件要绑定的属性值
57 0
|
前端开发 JavaScript
element组件的属性、事件和方法怎么使用
我们在使用element组件的时候,经常会使用到组件的属性、事件和方法,但对于第一次接触element组件的小白来说,由于没有代码示例,所以不知道怎么使用组件的属性、事件和方法是很常见的情况,所以本文将教会大家怎么去使用element组件的属性、事件和方法
296 0
element组件的属性、事件和方法怎么使用
|
JavaScript 开发者
veu 中通过属性绑定为元素设置 class 类样式 | 学习笔记
快速学习 veu 中通过属性绑定为元素设置 class 类样式
124 0
veu  中通过属性绑定为元素设置 class 类样式  |  学习笔记
|
Java API Android开发
【JetPack】数据绑定 DataBinding 简介 ( 使用要求 | Gradle 版本 | 定义数据类 | 定义数据绑定布局 | Activity 数据绑定 | 绑定类生成规则 )(一)
【JetPack】数据绑定 DataBinding 简介 ( 使用要求 | Gradle 版本 | 定义数据类 | 定义数据绑定布局 | Activity 数据绑定 | 绑定类生成规则 )(一)
260 0
【JetPack】数据绑定 DataBinding 简介 ( 使用要求 | Gradle 版本 | 定义数据类 | 定义数据绑定布局 | Activity 数据绑定 | 绑定类生成规则 )(一)
【JetPack】数据绑定 DataBinding 简介 ( 使用要求 | Gradle 版本 | 定义数据类 | 定义数据绑定布局 | Activity 数据绑定 | 绑定类生成规则 )(二)
【JetPack】数据绑定 DataBinding 简介 ( 使用要求 | Gradle 版本 | 定义数据类 | 定义数据绑定布局 | Activity 数据绑定 | 绑定类生成规则 )(二)
90 0
|
C#
wpf 依赖属性和附加属性
原文:wpf 依赖属性和附加属性 1、依赖属性   解释:依赖属性是配合binding出现的产物,功能主要是配合binding。   作用:     一、当自定义usercontrol时,需要与宿主(父窗体)双向绑定值时,用到依赖属性。
1908 0
|
C#
WPF xaml中列表依赖属性的定义
原文:WPF xaml中列表依赖属性的定义 列表内容属性 如上图,是一个列表标题排序控件,我们需要定义一个标题列表,从而让调用方可以自由的设置标题信息。 在自定义控件时,会遇到列表依赖属性,那么该如何定义呢? 下面是错误的定义方式: 1 /// 2 /// 标识 的依赖项属性。
1081 0
|
C#
WPF 使用依赖属性(DependencyProperty) 定义用户控件中的Image Source属性
原文:WPF 使用依赖属性(DependencyProperty) 定义用户控件中的Image Source属性 如果你要自定义一个图片按钮控件,那么如何在主窗体绑定这个控件上图片的Source呢? 我向大家介绍一个用 依赖属性(DependencyProperty) 实现的方法。
2437 0
|
.NET 容器 开发框架
数据绑定(三)为Binding指定绑定源的几种方法
原文:数据绑定(三)为Binding指定绑定源的几种方法 Binding的源是数据的来源,所以,只要一个对象包含数据并能通过属性把数据暴露出来,它就能当作Binding的源来使用,常用的办法有: 一。
968 0