Silverlight//XAML物件的事件觸發 vs CS的函數

在Silverlight中，function和XAML的互動物件，似乎是沒有直接關係的，也就是說，如果你沒有依照下面這樣做，你的Silverlight就是一堆介面元件與function而已，它們互不認識唷。

Silverlight說方便是不方便，說難也不難。怎麼說呢？我們現在要講的，竟然有很多方式可以完成。在此講兩個方式，我覺得比較簡單，而且適用於不同取向的設計者。

第一種方式，適合給做視覺的網頁設計師。

*.XAML檔

在XAML，介面物件與物件的事件要觸發的function註冊在一起了。

    <Grid x:Name="LayoutRoot" Background="White">
        <StackPanel>
            <Button Name="cmdClickMe" Content="ClickMe!" Margin="5" Click="cmdClickMe_Click"/>
        </StackPanel>
    </Grid>

*.cs檔

在cs，只要對物件的行為做定義即可。不需也無法修改什麼物件要觸發什麼function。

namespace SilverlightApplication1
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }

        int i = 0;
        private void cmdClickMe_Click(object sender, RoutedEventArgs e)
        {
            cmdClickMe.Content = "this is " + i++;
        }

    }
}

第二種方式，適合給做介面的程式設計師。

*.xaml檔

在XAML，只有定義介面的物件名稱。

    <Grid x:Name="LayoutRoot" Background="White">
        <StackPanel>
            <Button Name="cmdClickMe" Content="ClickMe!" Margin="5"/>
        </StackPanel>
    </Grid>

*.cs檔

在cs才定義該物件的行為，什麼事件會觸發什麼function

namespace SilverlightApplication1
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            cmdClickMe.Click += cmdClickMe_Click;  //委派 XamlFunction = Csfunction

        }

        int i = 0;
        private void cmdClickMe_Click(object sender, RoutedEventArgs e)
        {
            cmdClickMe.Content = "this is " + i++;
        }

    }
}

我自己覺得第二種比較適合我，給大家參考看看。
個人的見解，寫下這一段之前，還沒有拜讀任何大師的作品，所以不要太相信呀。
因為，XAML與cs檔之間，畢竟還是有彈性上的差異。XAML上屬靜態定義，在CS上屬動態定義，善用程式碼做動態的變化，在頁面呈現給使用者看之後，還可以保留對介面物件的事件與CS函數的委派關係做修改的空間。

最後，兩個方法都使用會怎樣？
也就是，在XAML註冊了，也在CS中用了委派。那會執行兩次？還是視為一次執行？
試完的結果是，執行兩次。XDDD

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
        }
    }
}

C#初體驗，畫圖的讀、寫、顯示

Visual Studio C# 2010 Express
WindowsFormsApplication專案

將檔案讀進來顯示、編輯

• Image.FromFile(str); (讀取)
• Image→PictureBox.Image(顯示)
• Image→Graphics(編輯)

Image image = Image.FromFile(strNamePath);   //從檔案讀取
pictureBox.Image = image;                    //顯示在控制項Picture Box上
Graphics graph = Graphics.FromImage(image);  //開放編輯

建立檔案編輯、顯示後存檔

• Bitmap→graph(編輯)
• Bitmap→Picture.Image(顯示)
• Bitmap.save(); (存檔)

Bitmap bmp = new Bitmap(200, 200);
Graphics graph = Graphics.FromImage(bmp);  //開放編輯權限
/* 編輯... */
pictureBox.Image = bmp;                    //顯示
bmp.Save(strNamePath, System.Drawing.Imaging.ImageFormat.Bmp);  //存檔

讀檔之後再存檔

• Image.FromFile(str); (讀取)
• Bitmap(Image)(轉格式)
• Bitmap.save(); (存檔)

Image image = Image.FromFile(strOpenPathName);
Bitmap bmp = new Bitmap(image);
bmp.Save(strSavePathName, System.Drawing.Imaging.ImageFormat.Bmp);

讀檔、編輯、存檔
這個方法，畫出來的內容會被讀進來的檔案蓋住！要注意唷！

• Image.FromFile(str); (讀取)
• Bitmap(Image)(轉格式)
• Bitmap.save(); (存檔)

// Create a Bitmap object from a file.
Bitmap myBitmap = new Bitmap("Grapes.jpg");
         
// Draw myBitmap to the screen.
e.Graphics.DrawImage(myBitmap, 0, 0, myBitmap.Width,
    myBitmap.Height);
         
// Set each pixel in myBitmap to black.
for (int Xcount = 0; Xcount < myBitmap.Width; Xcount++)
{
    for (int Ycount = 0; Ycount < myBitmap.Height; Ycount++)
    {
        myBitmap.SetPixel(Xcount, Ycount, Color.Black);
    }
}
         
// Draw myBitmap to the screen again.
e.Graphics.DrawImage(myBitmap, myBitmap.Width, 0,
    myBitmap.Width, myBitmap.Height);

參考自: Bitmap.SetPixel 方法