Silverlight实用窍门系列:56.Silverlight中的Binding使用(一)【附带实例源码】
??????? 本文將詳細講述Silverlight中Binding,包括Binding的屬性和用法,Binding的數據流向。
??????? Binding:一個完整的Binding過程是讓源對象中的某個屬性值通過一定流向規則進行轉換和驗證之后綁定到目標對象的某個屬性上面。這個源對象由ElementName指定,源對象的屬性由Path指定,流向規則由Mode指定,轉換由Converter指定,驗證由ValidatesOnDataErrors等指定。
??????? 首先我們來看Binding的屬性如下:
ElementName:指定源對象的名稱
Path:指定需要綁定的源對象的屬性名稱
Mode:指定Binding的數據流向規則
Converter:指定源對象的屬性需要經過用戶自定義的轉換
??????? 其次我們來看看Binding的數據流向Mode分為以下幾種:
OneTime:源對象的屬性只有在第一次的時候綁定到目標對象,以后源對象屬性值變化時,目標對象值不變
OneWay:源對象的屬性值變化的時候,目標對象值也跟著相應變化,而目標對象值變化時,源對象屬性值不變
TwoWay:源對象的屬性值變化的時候,目標對象值也跟著相應變化,目標對象值變化時,源對象屬性值也跟著變
???????? 下面我們通過以下實例源碼來看看Binding的簡單應用和轉換,注意Mode為TwoWay的時候目標對象更新時需要轉移焦點(LostFocus)才觸發更新源對象。例如本文實例中需要點擊到另外的TextBox才更新源。
Xaml:
<UserControl x:Class="SLBinding.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"
xmlns:local="clr-namespace:SLBinding"
mc:Ignorable="d"
d:DesignHeight="600" d:DesignWidth="800"
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
<UserControl.Resources>
<local:ImageConverter x:Key="ImageCoverter"/>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<!--One Time-->
<StackPanel Orientation="Horizontal">
<sdk:Label Height="28" HorizontalAlignment="Left" Margin="130,56,0,0"
Name="label1" VerticalAlignment="Top" Width="120" Content="One Time:" />
<TextBox Height="23" HorizontalAlignment="Left" Margin="20,56,0,0"
Name="tbOneTimeSource" VerticalAlignment="Top" Width="120" Text="初次綁定" />
<TextBox Height="23" HorizontalAlignment="Left" Margin="20,56,0,0"
Name="tbOneTimeTarget" VerticalAlignment="Top" Width="120"
Text="{Binding ElementName=tbOneTimeSource, Path=Text, Mode=OneTime}"/>
</StackPanel>
<!--One Way-->
<StackPanel Orientation="Horizontal">
<sdk:Label Height="28" HorizontalAlignment="Left" Margin="130,100,0,0"
Name="label2" VerticalAlignment="Top" Width="120" Content="One Way:" />
<TextBox Height="23" HorizontalAlignment="Left" Margin="20,100,0,0"
Name="tbOneWaySource" VerticalAlignment="Top" Width="120" Text="單向綁定" />
<TextBox Height="23" HorizontalAlignment="Left" Margin="20,100,0,0"
Name="tbOneWayTarget" VerticalAlignment="Top" Width="120"
Text="{Binding ElementName=tbOneWaySource, Path=Text, Mode=OneWay}"/>
</StackPanel>
<!--Two Way-->
<StackPanel Orientation="Horizontal">
<sdk:Label Height="28" HorizontalAlignment="Left" Margin="130,150,0,0"
Name="label3" VerticalAlignment="Top" Width="120" Content="One Time:" />
<TextBox Height="23" HorizontalAlignment="Left" Margin="20,150,0,0"
Name="tbTwoWaySource" VerticalAlignment="Top" Width="120" Text="雙向綁定" />
<TextBox Height="23" HorizontalAlignment="Left" Margin="20,150,0,0"
Name="tbTwoWayTarget" VerticalAlignment="Top" Width="120"
Text="{Binding ElementName=tbTwoWaySource, Path=Text, Mode=TwoWay}"/>
</StackPanel>
<!--Converter-->
<StackPanel Orientation="Horizontal">
<sdk:Label Height="28" HorizontalAlignment="Left" Margin="130,220,0,0"
Name="label5" VerticalAlignment="Top"
Content="下面將網絡圖片地址使用Converter自動綁定轉換為圖片顯示出來 " />
</StackPanel>
<StackPanel Orientation="Horizontal">
<sdk:Label Height="28" HorizontalAlignment="Left" Margin="130,250,0,0"
Name="label4" VerticalAlignment="Top" Width="120" Content="Converter:" />
<TextBox Height="23" HorizontalAlignment="Left" Margin="20,250,0,0"
Name="tbConverter" VerticalAlignment="Top"
Text="http://sc.admin5.com/uploads/allimg/100211/105R33342-7.png" />
<Image Name="imgCity" Width="60" Height="60"
Source="{Binding ElementName=tbConverter,Path=Text,
Mode=TwoWay, Converter={StaticResource ImageCoverter}}"></Image>
</StackPanel>
</Grid>
</UserControl>
?
ImageConverter.cs
public class ImageConverter : IValueConverter{
//在載入數據的時候將數據轉換為圖片類型
public object Convert(object value, Type targetType, object parameter,
System.Globalization.CultureInfo culture)
{
try
{
Uri uri = new Uri((string)value, UriKind.RelativeOrAbsolute);
BitmapImage img = new BitmapImage(uri);
return img;
}
catch
{
return new BitmapImage();
}
}
//在頁面上操作的時候,將圖片類型轉換為數據,這里只有再TwoWay的時候才有用
public object ConvertBack(object value, Type targetType, object parameter,
System.Globalization.CultureInfo culture)
{
BitmapImage img = value as BitmapImage;
return img.UriSource.AbsoluteUri;
}
}
??????? 下面我們來看看本實例運行效果如下圖,如需源碼請點擊?SLBinding.zip 下載
總結
以上是生活随笔為你收集整理的Silverlight实用窍门系列:56.Silverlight中的Binding使用(一)【附带实例源码】的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 做梦梦到月经好多血是怎么回事
- 下一篇: 梦到鬼代表什么