稳扎稳打Silverlight(64) - 5.0绑定之 Style 中的 Setter 支持绑定, 绑定父级链上的元素, 隐式指定数据模板, UI 上数据更新的触发方式

作者：webabcd

介绍
Silverlight 5.0 绑定

StyleSetter - Style 中的 Setter 支持绑定
AncestorRelativeSource - 绑定父级链上的元素
ImplicitDataTemplate - 隐式指定数据模板
FrameworkElement.DataContextChanged
UpdateSourceTrigger - UI 上数据更新的触发方式

在线DEMO
http://www.cnblogs.com/webabcd/archive/2012/03/05/2379862.html

示例
1、StyleSetter（Style 中的 Setter 支持绑定）
Binding/StyleSetter.xaml

<navigation:Page x:Class="Silverlight50.Binding.StyleSetter" 
           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="StyleSetter Page"
                 
           xmlns:clr="clr-namespace:System;assembly=mscorlib">
    
    <Grid x:Name="LayoutRoot">
        
        <Grid.Resources>
            <!--设置一些资源-->
            <clr:Int32 x:Key="TextFontSize">24</clr:Int32>
            <SolidColorBrush x:Key="TextForeground" Color="#00FF00" />

            <!--为 Style 的 Setter 的 Value 做数据绑定-->
            <Style x:Key="MyStyle" TargetType="TextBox">
                <Setter Property="FontSize" Value="{Binding Source={StaticResource TextFontSize}}"/>
                <Setter Property="Foreground" Value="{Binding Source={StaticResource TextForeground}}"/>
            </Style>
        </Grid.Resources>

        <!--应用样式-->
        <TextBox Text="我是TextBox" Margin="5" Style="{StaticResource MyStyle}" />
        
    </Grid>
</navigation:Page>

2、AncestorRelativeSource（绑定父级链上的元素）
Binding/AncestorRelativeSource.xaml

<navigation:Page x:Class="Silverlight50.Binding.AncestorRelativeSource" 
           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="AncestorRelativeSource Page">
    <Grid x:Name="LayoutRoot">
        
        <!--
            关于 RelativeSource 参看 http://www.cnblogs.com/webabcd/archive/2009/09/03/1559240.html
        -->
        
        <!--
            Silverlight 5 的 RelativeSource（除了 Self 和 TemplatedParent 外）新增了 FindAncestor
        
            FindAncestor - 指定相对数据源为父级链上的元素（如果指定了 AncestorType 或 AncestorLevel 则为 FindAncestor 模式，即可以不用显示指定 FindAncestor）
            AncestorType - 数据源的类型
            AncestorLevel - 数据源相对于自己的相隔层级数，AncestorLevel = 1 代表最近的父级元素
        -->
        
        <ListBox Tag="我是 Tag" Name="listBox">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding Tag, RelativeSource={RelativeSource FindAncestor, AncestorType=ListBox, AncestorLevel=1}}"/>
                        <TextBlock Text="{Binding}"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        
    </Grid>
</navigation:Page>

Binding/AncestorRelativeSource.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;

namespace Silverlight50.Binding
{
    public partial class AncestorRelativeSource : Page
    {
        public AncestorRelativeSource()
        {
            InitializeComponent();

            listBox.ItemsSource = new List<string>(){"1", "2", "3"};
        }
    }
}

3、ImplicitDataTemplate（隐式指定数据模板）
Binding/ImplicitDataTemplate.xaml

<navigation:Page x:Class="Silverlight50.Binding.ImplicitDataTemplate" 
           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="ImplicitDataTemplate Page"
                 
           xmlns:local="clr-namespace:Silverlight50.Binding">
    
    <StackPanel x:Name="LayoutRoot" Orientation="Vertical">

        <StackPanel.Resources>
            <!--
                DataType - 如果数据项为此类型则使用此模板（隐式）
            -->
            <DataTemplate DataType="local:Person">
                <TextBlock Foreground="Red" Text="{Binding Name}" />
            </DataTemplate>
            <DataTemplate DataType="local:Employee">
                <TextBlock Foreground="Blue" Text="{Binding Name}" />
            </DataTemplate>
        </StackPanel.Resources>

        <!--数据源的数据项为 Person 类型，所以会使用第一个数据模板-->
        <ListBox x:Name="listBoxPersons" />

        <!--数据源的数据项为 Employee 类型，所以会使用第二个数据模板-->
        <ListBox x:Name="listBoxEmployees" />

    </StackPanel>
</navigation:Page>

Binding/ImplicitDataTemplate.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.Collections.ObjectModel;

namespace Silverlight50.Binding
{
    public partial class ImplicitDataTemplate : Page
    {
        public ImplicitDataTemplate()
        {
            InitializeComponent();

            this.Loaded += new RoutedEventHandler(ImplicitDataTemplate_Loaded);
        }

        void ImplicitDataTemplate_Loaded(object sender, RoutedEventArgs e)
        {
            // 为 listBoxPersons 绑定的数据源的数据项为 Person 类型
            listBoxPersons.ItemsSource = new ObservableCollection<Person>
            {
                new Person { Name = "webabcd" },
                new Person { Name = "webabcd2" }
            };

            // 为 listBoxEmployees 绑定的数据源的数据项为 Employee 类型
            listBoxEmployees.ItemsSource = new ObservableCollection<Employee>
            {
                new Employee { Name = "webabcd3" },
                new Employee { Name = "webabcd4" },
                new Employee { Name = "webabcd5" }
            };
        }
    }

    public class Person
    {
        public string Name { get; set; }
    }

    public class Employee : Person
    {
        public string Position { get; set; }
    }
}

4、FrameworkElement.DataContextChanged
Binding/DataContextChanged.xaml

<navigation:Page x:Class="Silverlight50.Binding.DataContextChanged" 
           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="DataContextChanged Page">
    <StackPanel x:Name="LayoutRoot">
        
        <Button x:Name="btnChange" Content="改变数据上下文" Click="btnChange_Click" />
        <ListBox x:Name="listBox" ItemsSource="{Binding}" DataContextChanged="listBox_DataContextChanged" />
        
    </StackPanel>
</navigation:Page>

Binding/DataContextChanged.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;

namespace Silverlight50.Binding
{
    public partial class DataContextChanged : Page
    {
        public DataContextChanged()
        {
            InitializeComponent();

            this.Loaded += new RoutedEventHandler(DataContextChanged_Loaded);
        }

        void DataContextChanged_Loaded(object sender, RoutedEventArgs e)
        {
            // 绑定初始数据上下文
            listBox.DataContext = new List<string> { "a", "b", "c" };
        }

        private void btnChange_Click(object sender, RoutedEventArgs e)
        {
            // 修改数据上下文
            listBox.DataContext = new List<string> { "x", "y", "z" };
        }

        private void listBox_DataContextChanged(object sender, DependencyPropertyChangedEventArgs e)
        {
            /*
             * FrameworkElement.DataContextChanged - 数据上下文发生改变后所触发的事件
             */

            // 数据上下文发生改变后
            MessageBox.Show("数据源发生改变");
        }
    }
}

5、UpdateSourceTrigger（UI 上数据更新的触发方式）
Binding/UpdateSourceTrigger.xaml

<navigation:Page x:Class="Silverlight50.Binding.UpdateSourceTrigger" 
           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="UpdateSourceTrigger Page">
    <StackPanel x:Name="LayoutRoot">

        <!--
            UpdateSourceTrigger - UI 上数据更新的触发方式
                Default - 失去焦点后触发
                PropertyChanged - 属性值发生改变后触发
                Explicit - 需要通过 BindingExpression.UpdateSource() 显示触发
        -->
        <TextBox Text="{Binding Text, Mode=TwoWay, ElementName=lbl, UpdateSourceTrigger=Default}" />
        <TextBox Text="{Binding Text, Mode=TwoWay, ElementName=lbl, UpdateSourceTrigger=PropertyChanged}" />
        <TextBox Name="txtExplicit" Text="{Binding Text, Mode=TwoWay, ElementName=lbl, UpdateSourceTrigger=Explicit}" />
        <Button Name="btnBinding" Content="显示触发更新" Click="btnBinding_Click" />

        <TextBlock Name="lbl" />
        
    </StackPanel>
</navigation:Page>

Binding/UpdateSourceTrigger.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.Windows.Data;

namespace Silverlight50.Binding
{
    public partial class UpdateSourceTrigger : Page
    {
        public UpdateSourceTrigger()
        {
            InitializeComponent();
        }

        private void btnBinding_Click(object sender, RoutedEventArgs e)
        {
            // 显示触发 txtExplicit 的数据更新
            BindingExpression be = txtExplicit.GetBindingExpression(TextBox.TextProperty);
            be.UpdateSource();
        }
    }
}

OK
[源码下载]

posted @ 2012-03-12 08:48 webabcd 阅读(4615) 评论(6) 编辑收藏举报

刷新页面返回顶部

稳扎稳打Silverlight(64) - 5.0绑定之 Style 中的 Setter 支持绑定, 绑定父级链上的元素, 隐式指定数据模板, UI 上数据更新的触发方式

公告