Sliverlight//Bindling

一開始，先來看看Binding without C#的做法，適合給前端的視覺設計做動態頁面時，有全權的決定權(因為，都用XAML)。
這個例子是一個Slider調整TextBlock的FontSize屬性。
拉動Slider，TextBlock的字型大小就會改變。 XML檔

<Slider x:Name="sliderFontSize" Minimum="9" Maximum="400" Value="16"/>
<TextBlock x:Name="lblSampleText" Text="Simple Text" 
           FontSize="{Binding ElementName=sliderFontSize, Path=Value}"/>

Binding時，ElementName指定XAML的物件，並且使用Path指定該物件的其中一個屬性。達到了不需要C#而達到了動態頁面的效果。
我們來看看，如何利用CS建立物件並且利用Blinding呼叫物件屬性顯示在XML上面的兩個例子。

Binding有分成三種模式。

(目前，都還沒加上C#，以純XAML的物件傳值在討論)

• One-time: 
將目標記憶體位址初始化此XML的屬性，並且取消Binding的關係。

• One-Way: 
此XML的屬性，像(C++的)指標指向某指定的記憶體位址，如果XML的屬性被覆寫，就失去了Binding的關係，如果覆寫記憶體位址，則會更新XML的屬性。
• Two-Way: 
此XML的屬性，像(C++的)參考，與某一個XML的物件互為同一個記憶體位址，可以更新(XML的物件)彼此。

後續是有加上C#的code時，Bindling的情況，我自己也不是很懂！哈哈。

第一個例子，介面的Button如何和程式碼的Button連結在一起，並且觸發Click的事件，並且執行設定好關聯的函式myButton_Click。

XML檔

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <Canvas ...>
            <Button Name="xmlButton" Click="myButton_Click" Content="{Binding Content}" ... />
        </Canvas>
        
    </Grid>

CS檔

namespace SliverlightOne
{
    public partial class MainPage : UserControl
    {
        //...
        private int i;

        public MainPage()
        {
            InitializeComponent();

            Button csButton = new Button() { Content = "this is ..." };//obj editor
            xmlButton.DataContext = csButton; //xml obj = cs obj
            //...
        }

        private void myButton_Click(object sender, RoutedEventArgs e)
        {
            xmlButton.Content = ++i;
        }
        //...
    }
}

第二個例子，我們來看看介面的DataGrid和CS的List如何建立關聯性，並且利用Blinding呼叫物件屬性顯示在介面上。
XML檔
其中 Canvas.Left="10" AutoGenerateColumns="False" 不自動生成顯示表格，為了要自訂欄位標籤

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Canvas Grid.Column="1" ...>
            <sdk:DataGrid Name="dgData" Canvas.Left="10" AutoGenerateColumns="False" ...>
                <sdk:DataGrid.Columns>
                    <sdk:DataGridTextColumn Binding="{Binding Id}" Header="_Id"/>
                    <sdk:DataGridTextColumn Binding="{Binding Name}" Header="_Name"/>
                </sdk:DataGrid.Columns>
            </sdk:DataGrid>

        </Canvas>
    </Grid>
</UserControl>

CS檔

namespace SliverlightOne
{
    public partial class MainPage : UserControl
    {
        public class abc  //define my Data class
        {
            private string cv_Id;

            public string Id
            {
                get { return cv_Id; }
                set { cv_Id = value; }
            }
        }

        public MainPage()
        {
            InitializeComponent();
            //...
            List<abc> tList = new List<abc>();
            tList.Add(new abc { Id = "a", Name = "aa" });
            tList.Add(new abc { Id = "B", Name = "BB" });
            dgData.ItemsSource = tList; //xml obj = cs obj
        }
    }
}