Wiki

UserControls là một phương pháp tuyệt vời để phân chia các đối tượng thành những phần nhỏ hơn và dễ dàng hơn, logic hơn. Những control này có thể được tái sử dụng lại trong các ứng dụng khác nhau và độc lập với các control khác. Với mỗi  UserControl có thể chứa đựng nhiều nội dung khác nhau với sự  liên kết chặt chẽ và có thể được chèn trực tiếp vào một cây  Canvas của bạn  (Thí dụ như:  MyCanvas.Children.Add(myControl)).

Với mỗi lần bạn tạo ra một  UserControl , bằng cách nào bạn có thể tham chiếu hay khai báo nó từ một tập tin XAML khác (chẳng hạn như từ trang  Page.xaml)? Trong bài hướng dẫn này, chúng tôi sẽ chứng minh cho bạn thấy bằng cách nào ta có thể thực hiện điều đó.

Chạy xem trước ứng dụng tại đây: http://silverlight.services.live.com/invoke/66033/Custom%20UserControl/iframe.html

Để bắt đầu, hãy tạo một custom UserControl đặt tên là  “Card”. Trong  Visual Studio 2008, click chuột phải lên  Silverlight Application của bạn và chọn “Add->New Item…”.

Trong cửa sổ Add New Item của bạn , chọn  “Silverlight User Control” thay đổi tên ở mục Name phía dưới thành  “Card.xaml”.

Thêm hai hình ảnh sau vào dự án ứng dụng Silverlight của bạn :

CardDiamond3.png                           CardHeartAce.png

Nào, bây giờ hãy mở trang  Card.xaml của bạn và :

1. Thêm một  Image vào  UserContol.
2. Sử dụng thuộc tính  “x:Name” để đặt tên cho hình ảnh là  “CardImg”.
3. Gán giá trị cho thuộc tính Source là ”CardHeartAce.png” để chọn nguồn.
4. Xóa bỏ các thuộc tính  Width, Height và  Grid tags vì chúng không cần thiết. Và trang  Card.xaml của bạn sẽ bao gồm các dòng code như sau:

<UserControl x:Class="UserCtrl.Card"

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

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

    <Image x:Name="CardImg" Source="CardHeartAce.png"></Image>

</UserControl>

Tiếp theo chúng ta muốn người sử dụng có thể thay đổi hình ảnh theo ý của họ. Hãy mở trang Card.xaml.cs  và thêm những dòng code sau để chúng cho phép người sử dụng thay đổi hình ảnh:

namespace UserCtrl

{

    public partial class Card : UserControl

    {

        public Card()

        {

            InitializeComponent();

        }

        public ImageSource CardImage

        {

            get { return CardImg.Source; }

            set

            {

                this.CardImg.Source = value;

            }

        }

    }

}

Bước cuối cùng của chúng tôi là hiển thị cho bạn thấy bằng cách nào tham chiếu đến  UserControl này từ một tập tin XAML chẳng hạn như trang Page.xaml.

Trong trang  Page.xaml:

1. Thêm một đường dẫn tham chiếu trong trang Page.xaml của bạn để tham chiếu đến  UserControl mà cho phép bạn sử dụng các đối tượng trong assembly của bạn (đó là dòng bôi màu vàng) :
   
   <UserControl x:Class="UserCtrl.Page"
       xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation 
       xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml 
       xmlns:local="clr-namespace:UserCtrl;assembly=UserCtrl" 
       Width="480" Height="300" >
   
2. Khai báo một cặp tham chiếu đến control Card của bạn như sau:
   
   

   <UserControl x:Class="UserCtrl.Page"

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

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

       xmlns:local="clr-namespace:UserCtrl;assembly=UserCtrl" 

       Width="480" Height="300" >

       <Canvas x:Name="MyCanvas" Background="Gray">

           <local:Card Canvas.Left="50" Canvas.Top="20" x:Name="MyCard" CardImage="CardDiamond3.png" >

           </local:Card>

           <local:Card Canvas.Left="250" Canvas.Top="20" x:Name="MyCard2" CardImage="CardHeartAce.png" >

           </local:Card>

       </Canvas>

   </UserControl>

3. Chạy ứng dụng và bạn sẽ thấy 2 hình card của bạn được hiển thị như sau!
   
    

Thank you,
--Mike Snow