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

点击前效果:   点击后效果:

目录
相关文章
|
4月前
|
存储 JSON JavaScript
组件的创建,引用,样式隔离以及methods,data,properties和数据事件监听
详细介绍了微信小程序中组件的创建、引用(包括局部引用和全局引用)、样式隔离、组件的data、methods和properties,以及组件的数据监听器的使用方法和场景。
组件的创建,引用,样式隔离以及methods,data,properties和数据事件监听
|
前端开发
react是否支持给标签设置自定义的属性,比如给video标签设置webkit-playsinline?
react是否支持给标签设置自定义的属性,比如给video标签设置webkit-playsinline?
174 0
|
前端开发 JavaScript
element组件的属性、事件和方法怎么使用
我们在使用element组件的时候,经常会使用到组件的属性、事件和方法,但对于第一次接触element组件的小白来说,由于没有代码示例,所以不知道怎么使用组件的属性、事件和方法是很常见的情况,所以本文将教会大家怎么去使用element组件的属性、事件和方法
444 0
element组件的属性、事件和方法怎么使用
|
JavaScript 开发者
veu 中通过属性绑定为元素设置 class 类样式 | 学习笔记
快速学习 veu 中通过属性绑定为元素设置 class 类样式
183 0
veu  中通过属性绑定为元素设置 class 类样式  |  学习笔记
|
XML 编解码 数据安全/隐私保护
HarmonyOS实战—Text组件宽高三种值的写法和颜色属性
HarmonyOS实战—Text组件宽高三种值的写法和颜色属性
688 0
HarmonyOS实战—Text组件宽高三种值的写法和颜色属性
艾伟:[WCF的Binding模型]之五:绑定元素(Binding Element)
在上面的内容中,先后介绍了信道、信道管理器、信道监听器和信道工厂。从对象的创建来讲,信道管理器是信道的创建者。说的再具体点,客户端的信道通过信道工厂创建,服务端的信道通过信道监听器创建。但是信道工厂和信道监听器又是如果被创建出来的呢? 我们在一开始就已经说过,作为终结点三要素的绑定对象实现了所有的通信细节,并且通过创建信道栈实现了消息的传递。
772 0