這個日記介紹：
創建這種的示例數據源，可以提供給單個對象使用。比例下圖的一個Point對象（需要一個X軸和Y軸數據）
下圖為創建List Data 數據源：（可以創建class，也可以從XML文件中導入）
創建完數據源，我們需要綁定到界面上。可以在blend中，某個屬性后的 小矩形點擊后，選擇“數據綁定...”，會出來一個面板，上面有三個tab。
第一個tab: 綁定我們剛才那樣子用blend 創建出來的，或者導入XML進來的數據源。
第二個tab: 綁定本地其它界面元素
第三個tab: 綁定上下文
手工綁定： 我們也可以用手工編寫XAML來綁定。
在blend中，點擊某個屬性后，選擇“自定義表達式”的選項，就可以手工編寫XAML綁定語句了。
下面介紹幾點類型：
1、Bind Element Property
2、Bind DataContext
3、Bind Data Source
一、Bind Element Property
像剛才那樣我們要綁定界面上的一個元素的時候，我們要指定一個 ElementName.來一個圖
ElementName是指界面上的哪一個元素。
Path 對應的是這個元素的哪一個屬性。
二、Bind DataContext （只能手工編寫，不能用工具生成）
如果是在一個已知上下文的范圍內去做綁定的話，那我們可以直接這么寫： {Binding .}
這么寫，表示我們已經綁定到上下文的根節點上了。
三、Bind Data Source
綁定數據源，有兩種情況：
1）如下圖：
這一種情況可以對我們之前用blend工具生成的數據源來做綁定
2）如下圖：（只能手工編寫，不能用工具生成）
這個實際上是對父親節點來做的綁定。來一個例子：
我們把button做成這樣：（編輯了外觀了的：由一個文本框和一個button組成一個button）
貼上代碼：
<Button Height="41" VerticalAlignment="Bottom" Content="Double Click to Submit " Style="{StaticResource ButtonStyle}" Click="OnSubmitInput"/>
模板是這樣的：
View Code
<Style x:Key="ButtonStyle" TargetType="Button"> <Setter Property="Background" Value="#FF1F3B53"/> <Setter Property="Foreground" Value="#FF000000"/> <Setter Property="Padding" Value="3"/> <Setter Property="BorderThickness" Value="1"/> <Setter Property="BorderBrush"> <Setter.Value> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFA3AEB9" Offset="0"/> <GradientStop Color="#FF8399A9" Offset="0.375"/> <GradientStop Color="#FF718597" Offset="0.375"/> <GradientStop Color="#FF617584" Offset="1"/> </LinearGradientBrush> </Setter.Value> </Setter> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"/> <VisualState x:Name="MouseOver"> <Storyboard> <DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity"> <SplineDoubleKeyFrame KeyTime="0" Value="1"/> </DoubleAnimationUsingKeyFrames> <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)"> <SplineColorKeyFrame KeyTime="0" Value="#F2FFFFFF"/> </ColorAnimationUsingKeyFrames> <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)"> <SplineColorKeyFrame KeyTime="0" Value="#CCFFFFFF"/> </ColorAnimationUsingKeyFrames> <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)"> <SplineColorKeyFrame KeyTime="0" Value="#7FFFFFFF"/> </ColorAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Pressed"> <Storyboard> <ColorAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"> <SplineColorKeyFrame KeyTime="0" Value="#FF6DBDD1"/> </ColorAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity"> <SplineDoubleKeyFrame KeyTime="0" Value="1"/> </DoubleAnimationUsingKeyFrames> <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)"> <SplineColorKeyFrame KeyTime="0" Value="#D8FFFFFF"/> </ColorAnimationUsingKeyFrames> <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)"> <SplineColorKeyFrame KeyTime="0" Value="#C6FFFFFF"/> </ColorAnimationUsingKeyFrames> <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)"> <SplineColorKeyFrame KeyTime="0" Value="#8CFFFFFF"/> </ColorAnimationUsingKeyFrames> <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)"> <SplineColorKeyFrame KeyTime="0" Value="#3FFFFFFF"/> </ColorAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Disabled"> <Storyboard> <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity"> <SplineDoubleKeyFrame KeyTime="0" Value=".55"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="FocusStates"> <VisualState x:Name="Focused"> <Storyboard> <DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity"> <SplineDoubleKeyFrame KeyTime="0" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Unfocused"/> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <TextBox TextWrapping="Wrap" d:LayoutOverrides="Height" Text="{Binding Tag, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/> <Grid Grid.Column="1"> <Border x:Name="Background" Background="White" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3"> <Grid Margin="1" Background="{TemplateBinding Background}"> <Border x:Name="BackgroundAnimation" Opacity="0" Background="#FF448DCA"/> <Rectangle x:Name="BackgroundGradient"> <Rectangle.Fill> <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0"> <GradientStop Color="#FFFFFFFF" Offset="0"/> <GradientStop Color="#F9FFFFFF" Offset="0.375"/> <GradientStop Color="#E5FFFFFF" Offset="0.625"/> <GradientStop Color="#C6FFFFFF" Offset="1"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> </Grid> </Border> <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/> <Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" RadiusX="3" RadiusY="3" IsHitTestVisible="false" Opacity="0"/> <Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1" StrokeThickness="1" RadiusX="2" RadiusY="2" Margin="1" IsHitTestVisible="false" Opacity="0"/> </Grid> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>
可以看到里面有一句這樣的：
<TextBox TextWrapping="Wrap" d:LayoutOverrides="Height" Text="{Binding Tag, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/>
我們要的功能是：在點擊那個button的時候，在事件里面可以取到在 TextBox 中輸入的內容是什么。
這樣的一種需求，我們實際是就是做了這樣的綁定
Text="{Binding Tag, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
就是用TextBox的 Text屬性，綁定了它的父親節點，也就是一整個的button 的 Tag 屬性，而且是雙向綁定。
這樣的話，我們在TextBox中做輸入的話，對應的整個button 的 Tag屬性就會跟着變。
然后在click事件中，我們就可以通過button的 Tag去取得我們剛才輸入的值。
private void OnSubmitInput(object sender, System.Windows.RoutedEventArgs e)
{
this.result.Text = (sender as FrameworkElement).Tag as string;
}
為什么我們要用這種綁定呢，而不用前面提到的TemplatedBinding呢，這是因為我們現在這種方式是反向綁定，我們要做的是在button模板中的textbox 的值改變的時候，它的父親節點的屬性改變，而不是那個父親節點的屬性改變后讓這個textbox跟着改。
而TemplatedBinding是一個單向的，也就是母改子改。所以它是做不到這個需求的。
四、Binding有多種寫法：如下圖
最后的tip: 我們在綁定的時候經常會用到轉換器，一般都在要 資源里 寫XAML來引用轉換器。
我們可以不用寫XAML代碼，而在blend里面操作。
步驟：1、先編寫轉換器。
2、 在要用到轉換器的頁面中，打開blend的 data 面板，像最開始說到的那樣，創建一個single data ，然后找到轉換器。再點OK，blend就會自動在XAML寫了引用某個轉換器的代碼 。 如：
<UserControl.Resources>
<local:NumberToArrowStyleConverter x:Key="NumberToArrowStyleConverter"/>
</UserControl.Resources>
3、接下來你怎么綁定就怎么搞了。