穩扎穩打Silverlight(64) - 5.0綁定之 Style 中的 Setter 支持綁定, 綁定父級鏈上的元素, 隱式指定數據模板, UI 上數據更新的觸發方式

[索引頁]
[源碼下載]

穩扎穩打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
[源碼下載]