稳扎稳打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
[源码下载] 

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