8.silverlight中元素到元素的绑定

适用于siverlight3、4、5

有这样一种情况，一个元素（控件）的值依赖于另一个另一个元素（控件）的值。这种情况下，我们可以在XAML中创建一个叫做element binding 或者 element-to-element binding绑定。这个绑定可以连接两端元素（控件）的值。如果需要，数据可以双向流动。

下面做一个：每月还款额计算器来说明元素之间绑定的方式，这个例子中表示贷款年份和贷款金额的TextBlock控件的Text属性值是由滑动条控件提供的。

1. 新建silverlight项目,为silverlight项目添加一个siverlight子窗体控件

添加布局元素Xaml完整代码如下：

<controls:ChildWindow x:Class="SilverlightApplication2.ChildWindow1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"

Width="393.119" Height="304.128"

Title="ChildWindow1">

<Grid x:Name="LayoutRoot" Margin="2,2,7,13">

<Grid.RowDefinitions>

<RowDefinition />

<RowDefinition Height="Auto" />

</Grid.RowDefinitions>

<Slider x:Name="AmountSlider" Minimum="10000" Maximum="1000000" SmallChange="10000" LargeChange="10000" Margin="39,121,108,55" />

<Slider x:Name="YearSlider" Minimum="5" Maximum="30" SmallChange="1" LargeChange="1" UseLayoutRounding="True" Margin="39,72,108,110"/>

<TextBlock x:Name="AmountTextBlock" Text="{Binding ElementName=AmountSlider, Path=Value}" Margin="285,133,31,68" RenderTransformOrigin="0.571,0.319"/>

<TextBlock x:Name="MonthTextBlock" Text="{Binding ElementName=YearSlider, Path=Value}" Margin="285,83,28,122"/>

<TextBlock x:Name="PaybackTextBlock" Margin="121,169,138,29"/>

<Button x:Name="CancelButton" Content="取消" Click="CancelButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,28,0" Grid.Row="1" />

<Button x:Name="OKButton" Content="确定" Click="OKButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,108,0" Grid.Row="1" />

<Button Content="计算" HorizontalAlignment="Left" Margin="260,183,0,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="2.014,2.549" Click="Button_Click_1"/>

<TextBlock HorizontalAlignment="Left" Margin="39,10,0,0" TextWrapping="Wrap" Text="当前的利息：3.45%" VerticalAlignment="Top"/>

<TextBlock HorizontalAlignment="Left" Margin="39,51,0,0" TextWrapping="Wrap" Text="选择贷款年限：" VerticalAlignment="Top"/>

<TextBlock HorizontalAlignment="Left" Margin="39,109,0,0" TextWrapping="Wrap" Text="选择贷款金额：" VerticalAlignment="Top"/>

<TextBlock HorizontalAlignment="Left" Margin="39,169,0,0" TextWrapping="Wrap" Text="每月应还款额：" VerticalAlignment="Top"/>

</Grid>

</controls:ChildWindow>

通过下面的绑定语句将滑动条的值绑定给了TextBlock控件，

<TextBlock x:Name="AmountTextBlock"

Text="{Binding ElementName=AmountSlider, Path=Value}">

</TextBlock>

<TextBlock x:Name="MonthTextBlock"

Text="{Binding ElementName=YearSlider, Path=Value}">

</TextBlock>

在子窗体的中添加添加逻辑处理代码：

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;

namespace SilverlightApplication2

{

public partial class ChildWindow1 : ChildWindow

{

public ChildWindow1()

{

InitializeComponent();

}

private void OKButton_Click(object sender, RoutedEventArgs e)

{

this.DialogResult = true;

}

private void CancelButton_Click(object sender, RoutedEventArgs e)

{

this.DialogResult = false;

}

private double percentage = 0.0345;

private void Button_Click_1(object sender, RoutedEventArgs e)

{

double requestedAmount = AmountSlider.Value;//获得滑动条的值

int requestedYears = (int)YearSlider.Value;//获得滑动条的值

for (int i = 0; i < requestedYears; i++)

{

requestedAmount += requestedAmount * percentage;

}

double monthlyPayback =

requestedAmount / (requestedYears * 12);

PaybackTextBlock.Text =

"€" + Math.Round(monthlyPayback, 2);

}

/// <summary>

/// 当不使用数据绑定机制时仍然可以实现元素到元素的绑定

/// </summary>

/// <param name="sender"></param>

/// <param name="e"></param>

//private void AmountSlider_ValueChanged(object sender,RoutedPropertyChangedEventArgs<double> e)

//{

// AmountSlider.Value = Math.Round(e.NewValue);

// AmountTextBlock.Text = AmountSlider.Value.ToString();

//}

}

}

2. 在MainPage.axml中添加一个按钮控件，用来打开子页面

<UserControl x:Class="SilverlightApplication2.MainPage"

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"

d:DesignHeight="300" d:DesignWidth="400">

<Grid x:Name="LayoutRoot" Background="White">

<Button Content="计算" HorizontalAlignment="Left" Margin="107,113,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click_1"/>

</Grid>

</UserControl>

在MainPage.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;

namespace SilverlightApplication2

{

public partial class MainPage : UserControl

{

public MainPage()

{

InitializeComponent();

}

private void Button_Click_1(object sender, RoutedEventArgs e)

{

ChildWindow1 cw = new ChildWindow1();//实例化子窗体

cw.Show();//显示子窗体

}

}

}

运行结果如下：