SilverLight programming tip tricks

Walkthrough: Adding Query Methods

Nguyễn Thị Như Quỳnh — Sun, 26 Sep 2010 09:20:52 GMT

Current revision posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 9/26/2010 5:20:52 PM

Walkthrough: Adding Query Methods

Filed under: WCF RIA Services

Các phương thức dùng để truy vấn dữ liệu từ dữ liệu nguồn đôi khi được gọi là các query method. Trong WCF RIA Services, các query method phải được xác định bằng cách mà framework xem chúng là query methods. Ngoài ra , các truy vấn luôn trả về một single entity được xác định khác với các truy vấn trả về nhiều giá trị. Để có thêm thông tin về query method, hãy xem Domain Services.

Khi bạn tạo mới một lớp domain service và xác định các entity trong hộp thoại Add New Domain Service Class , thì RIA Services framework sẽ tự động tạo query method đơn giản cho từng entity được trình bày bởi service. Query method nhận tất cả các dòng của entity. Bài viết này mô tả làm cách nào để thêm một query methods mới, thực thi nhiều truy vấn sàng lọc phức tạp hơn bằng một giá trị tham số. Bài này cũng mô tả làm cách nào thêm một truy vấn trả về một giá trị entity và trả về một tập các entity.

Yêu cầu

Visual Studio 2010
Silverlight 4
WCF RIA Services for Visual Studio 2010
AdventureWorkLT sample database
Một RIA Services project đã xuất dữ liệu từ bảng Customer của cơ sở dữ liệu đơn giản AdventureWorksLT như là trong bài viết trước Walkthrough: Creating a RIA Services Solution.

Để thêm một query method với điều kiện vào là một tham số và trả về một entity duy nhất

Mở solution đã lấy dữ liệu từ bảng Customer trong bài trước.

Để có thêm thông tin, hãy xem tại liên kết này Walkthrough: Creating a RIA Services Solution.
Trong server project, hãy mở lớp domain service truy xuất dữ liệu từ bảng Customer.

Tên của lớp domain service đã liệt kê trong phần yêu cầu là CustomerDomainService.
Thêm một query method nhận một đối số kiểu integer và trả về một Customer entity có customer ID tương ứng.

Nếu một phương thức trả về một single entity bao gồm thuộc tính QueryAttribute, thì bạn phải thiết lập thuộc tính IsComposable thành false. Người dùng không thể thao tác thêm các truy vấn từ client. Nếu query method phù hợp với cấu trúc của một câu truy vấn, bạn không cần áp dụng thuộc tính QueryAttribute . Giá trị trả về phải là một instance duy nhất của một đối tượng entity.
[Query(IsComposable=false)] public Customer GetCustomersByID(int customerID) { return this.ObjectContext.Customers.SingleOrDefault(
c => c.CustomerID == customerID); }

Để thêm một query method có một đối số và trả về một tập các entity

Trong server project, hãy mở lớp domain service truy xuất dữ liệu từ bảng Customer.

Tên của lớp domain service đã liệt kê trong phần yêu cầu là CustomerDomainService.

Trong domain service, thêm một query method có đầu vào là một tham số kiểu string và trả về bất kì customers nào có tên bắt đầu là một kí tự.

Phương thức này có thể trả về một đối tượng IQueryable<> bởi vì người dùng có thể muốn cung cấp thêm các thao tác truy vấn từ client.

public IQueryable<Customer> GetCustomersByLastNameLetter(
            string startingLastNameLetter)
{
    return this.ObjectContext.Customers.Where
             (c => c.LastName.StartsWith(
                      startingLastNameLetter) == true);
}

Để hiển thị kết quả của những query methods này trong client project.

Trong client project, hãy mở MainPage.xaml.

Thêm hai TextBox controls và hai Button controls để người dùng có thể lọc ra các customer bằng ID hay bằng kí tự đầu tiên của tên.

Phần mã XAML sau trình bày một layout hoàn chỉnh với DataGrid đã có .

<UserControl xmlns:data="clr-namespace:System.Windows.Controls;
                   assembly=System.Windows.Controls.Data"  
    x:Class="RIAServicesExample.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"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="25"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal" Grid.Row="0" Grid.Column="0">
            <TextBlock Text="search by id: " ></TextBlock>
            <TextBox Name="IDValue" Width="50" ></TextBox>
            <Button Name="IDButton" 
               Click="IDButton_Click" Content="Submit">
            </Button>
        </StackPanel>
        <StackPanel Orientation="Horizontal" Grid.Row="0" Grid.Column="1">
            <TextBlock Text="search by name: "></TextBlock>
            <TextBox Name="LetterValue" Width="30"></TextBox>
            <Button Name="LetterButton" Click="LetterButton_Click" 
                                  Content="Submit"></Button>
        </StackPanel>

      <data:DataGrid Grid.Row="1" Grid.Column="0" 
               Grid.ColumnSpan="2" Name="CustomerGrid">
      </data:DataGrid>
    </Grid>
</UserControl>

Mở tập tin code phía sau của trang MainPage.xaml (MainPage.xaml.cs hay MainPage.xaml.vb).

Thêm mã vào để nhận kết quả truy vấn dựa trên những gì mà người dùng nhập vào

using System;
using System.Windows;
using System.Windows.Controls;
using RIAServicesExample.Web;
using System.ServiceModel.DomainServices.Client;

namespace RIAServicesExample
{

    public partial class MainPage : UserControl
    {
        private CustomerDomainContext _customerContext =
                          new CustomerDomainContext();

        public MainPage()
        {
            InitializeComponent();
        }

        private void LetterButton_Click(object sender, RoutedEventArgs e)
        {
            IDButton.IsEnabled = false;
            LetterButton.IsEnabled = false;
            LoadOperation<Customer> loadOp = 
             this._customerContext.Load(
             this._customerContext.GetCustomersByLastNameLetterQuery(
             LetterValue.Text), CustomerLoadedCallback, null);
            CustomerGrid.ItemsSource = loadOp.Entities;
        }

        private void IDButton_Click(object sender, RoutedEventArgs e)
        {
            IDButton.IsEnabled = false;
            LetterButton.IsEnabled = false;
            LoadOperation<Customer> loadOp =
               this._customerContext.Load(
               this._customerContext.GetCustomersByIDQuery(
               int.Parse(IDValue.Text)), CustomerLoadedCallback, null);
            CustomerGrid.ItemsSource = loadOp.Entities;
        }

        void CustomerLoadedCallback(LoadOperation CustomerLoadedCallback(
            LoadOperation<Customer> loadOperation)
        {
            IDButton.IsEnabled = true;
            LetterButton.IsEnabled = true;
        }
    }
}

Chạy ứng dụng.

Và đây là hình mô tả danh sách các customers được lọc ra theo tên.

Nguồn của bài viết và được dịch bởi kpopyo tại đây: http://msdn.microsoft.com/en-us/library/ee707362%28v=VS.91%29.aspx

Walkthrough: Adding Query Methods

Nguyễn Thị Như Quỳnh — Sun, 26 Sep 2010 09:19:04 GMT

Revision 5 posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 9/26/2010 5:19:04 PM

Walkthrough: Adding Query Methods

Filed under: WCF RIA Services

Yêu cầu

Visual Studio 2010
Silverlight 4
WCF RIA Services for Visual Studio 2010
AdventureWorkLT sample database
Một RIA Services project đã xuất dữ liệu từ bảng Customer của cơ sở dữ liệu đơn giản AdventureWorksLT như là trong bài viết trước Walkthrough: Creating a RIA Services Solution.

Để thêm một query method với điều kiện vào là một tham số và trả về một entity duy nhất

Mở solution đã lấy dữ liệu từ bảng Customer trong bài trước.

Để có thêm thông tin, hãy xem tại liên kết này Walkthrough: Creating a RIA Services Solution.
Trong server project, hãy mở lớp domain service truy xuất dữ liệu từ bảng Customer.

Tên của lớp domain service đã liệt kê trong phần yêu cầu là CustomerDomainService.
Thêm một query method nhận một đối số kiểu integer và trả về một Customer entity có customer ID tương ứng.

Nếu một phương thức trả về một single entity bao gồm thuộc tính QueryAttribute, thì bạn phải thiết lập thuộc tính IsComposable thành false. Người dùng không thể thao tác thêm các truy vấn từ client. Nếu query method phù hợp với cấu trúc của một câu truy vấn, bạn không cần áp dụng thuộc tính QueryAttribute . Giá trị trả về phải là một instance duy nhất của một đối tượng entity.
[Query(IsComposable=false)] public Customer GetCustomersByID(int customerID) { return this.ObjectContext.Customers.SingleOrDefault(c ObjectContext.Customers.SingleOrDefault(
c => c.CustomerID == customerID); }

Để thêm một query method có một đối số và trả về một tập các entity

Trong server project, hãy mở lớp domain service truy xuất dữ liệu từ bảng Customer.

Tên của lớp domain service đã liệt kê trong phần yêu cầu là CustomerDomainService.

Trong domain service, thêm một query method có đầu vào là một tham số kiểu string và trả về bất kì customers nào có tên bắt đầu là một kí tự.

Phương thức này có thể trả về một đối tượng IQueryable<> bởi vì người dùng có thể muốn cung cấp thêm các thao tác truy vấn từ client.

public IQueryable<Customer> GetCustomersByLastNameLetter(
            string startingLastNameLetter)
{
    return this.ObjectContext.Customers.Where
             (c => c.LastName.StartsWith(startingLastNameLetterc.LastName.StartsWith(
                      startingLastNameLetter) == true);
}

Để hiển thị kết quả của những query methods này trong client project.

Trong client project, hãy mở MainPage.xaml.

Thêm hai TextBox controls và hai Button controls để người dùng có thể lọc ra các customer bằng ID hay bằng kí tự đầu tiên của tên.

Phần mã XAML sau trình bày một layout hoàn chỉnh với DataGrid đã có .

<UserControl xmlns:data="clr-namespace:System.Windows.Controls;
                   assembly=System.Windows.Controls.Data"  
    x:Class="RIAServicesExample.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"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="25"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal" Grid.Row="0" Grid.Column="0">
            <TextBlock Text="search by id: " ></TextBlock>
            <TextBox Name="IDValue" Width="50" ></TextBox>
            <Button Name="IDButton" Click="IDButton_Click" Content="Submit">
            </Button>
        </StackPanel>
        <StackPanel Orientation="Horizontal" Grid.Row="0" Grid.Column="1">
            <TextBlock Text="search by name: "></TextBlock>
            <TextBox Name="LetterValue" Width="30"></TextBox>
            <Button Name="LetterButton" Click="LetterButton_Click" 
                                  Content="Submit"></Button>
        </StackPanel>

      <data:DataGrid Grid.Row="1" Grid.Column="0" 
                          Grid.ColumnSpan="2" Name="CustomerGrid">
      </data:DataGrid>
    </Grid>
</UserControl>

Mở tập tin code phía sau của trang MainPage.xaml (MainPage.xaml.cs hay MainPage.xaml.vb).

Thêm mã vào để nhận kết quả truy vấn dựa trên những gì mà người dùng nhập vào

using System;
using System.Windows;
using System.Windows.Controls;
using RIAServicesExample.Web;
using System.ServiceModel.DomainServices.Client;

namespace RIAServicesExample
{

    public partial class MainPage : UserControl
    {
        private CustomerDomainContext _customerContext =
                          new CustomerDomainContext();

        public MainPage()
        {
            InitializeComponent();
        }

        private void LetterButton_Click(object sender, RoutedEventArgs e)
        {
            IDButton.IsEnabled = false;
            LetterButton.IsEnabled = false;
            LoadOperation<Customer> loadOp = 
                         this._customerContext.Load(
                         this._customerContext.GetCustomersByLastNameLetterQuery(
                              LetterValue.Text), CustomerLoadedCallback, null);
            CustomerGrid.ItemsSource = loadOp.Entities;
        }

        private void IDButton_Click(object sender, RoutedEventArgs e)
        {
            IDButton.IsEnabled = false;
            LetterButton.IsEnabled = false;
            LoadOperation<Customer> loadOp =
                        this._customerContext.Load(
                        this._customerContext.GetCustomersByIDQuery(
                        int.Parse(IDValue.Text)), CustomerLoadedCallback, null);
            CustomerGrid.ItemsSource = loadOp.Entities;
        }

        void CustomerLoadedCallback(LoadOperation<Customer> loadOperation)
        {
            IDButton.IsEnabled = true;
            LetterButton.IsEnabled = true;
        }
    }
}

Chạy ứng dụng.

Và đây là hình mô tả danh sách các customers được lọc ra theo tên.

Nguồn của bài viết và được dịch bởi kpopyo tại đây: http://msdn.microsoft.com/en-us/library/ee707362%28v=VS.91%29.aspx

Walkthrough: Adding Query Methods

Nguyễn Thị Như Quỳnh — Sun, 26 Sep 2010 09:13:31 GMT

Revision 4 posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 9/26/2010 5:13:31 PM

Walkthrough: Adding Query Methods

Filed under: WCF RIA Services

Yêu cầu

Visual Studio 2010
Silverlight 4
WCF RIA Services for Visual Studio 2010
AdventureWorkLT sample database
Một RIA Services project đã xuất dữ liệu từ bảng Customer của cơ sở dữ liệu đơn giản AdventureWorksLT như là trong bài viết trước Walkthrough: Creating a RIA Services Solution.

Để thêm một query method với điều kiện vào là một tham số và trả về một entity duy nhất

Mở solution đã lấy dữ liệu từ bảng Customer trong bài trước.

Để có thêm thông tin, hãy xem tại liên kết này Walkthrough: Creating a RIA Services Solution.
Trong server project, hãy mở lớp domain service truy xuất dữ liệu từ bảng Customer.

Tên của lớp domain service đã liệt kê trong phần yêu cầu là CustomerDomainService.
Thêm một query method nhận một đối số kiểu integer và trả về một Customer entity có customer ID tương ứng.

Nếu một phương thức trả về một single entity bao gồm thuộc tính QueryAttribute, thì bạn phải thiết lập thuộc tính IsComposable thành false. Người dùng không thể thao tác thêm các truy vấn từ client. Nếu query method phù hợp với cấu trúc của một câu truy vấn, bạn không cần áp dụng thuộc tính QueryAttribute . Giá trị trả về phải là một instance duy nhất của một đối tượng entity.
[Query(IsComposable=false)] public Customer GetCustomersByID(int customerID) { return this.ObjectContext.Customers.SingleOrDefault(c => c.CustomerID == customerID); }

Để thêm một query method có một đối số và trả về một tập các entity

Trong server project, hãy mở lớp domain service truy xuất dữ liệu từ bảng Customer.

Tên của lớp domain service đã liệt kê trong phần yêu cầu là CustomerDomainService.
Trong domain service, thêm một query method có đầu vào là một tham số kiểu string và trả về bất kì customers nào có tên bắt đầu là một kí tự.

Phương thức này có thể trả về một đối tượng IQueryable<> bởi vì người dùng có thể muốn cung cấp thêm các thao tác truy vấn từ client.
public IQueryable<Customer> GetCustomersByLastNameLetter(string startingLastNameLetter) { return this.ObjectContext.Customers.Where
(c => c.LastName.StartsWith(startingLastNameLetter) == true); }

Để hiển thị kết quả của những query methods này trong client project.

Trong client project, hãy mở MainPage.xaml.

Thêm hai TextBox controls và hai Button controls để người dùng có thể lọc ra các customer bằng ID hay bằng kí tự đầu tiên của tên.

Phần mã XAML sau trình bày một layout hoàn chỉnh với DataGrid đã có .

<UserControl xmlns:data="clr-namespace:System.Windows.Controls;
                   assembly=System.Windows.Controls.Data"  
    x:Class="RIAServicesExample.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"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="25"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal" Grid.Row="0" Grid.Column="0">
            <TextBlock Text="search by id: " ></TextBlock>
            <TextBox Name="IDValue" Width="50" ></TextBox>
            <Button Name="IDButton" Click="IDButton_Click" Content="Submit">
            </Button>
        </StackPanel>
        <StackPanel Orientation="Horizontal" Grid.Row="0" Grid.Column="1">
            <TextBlock Text="search by name: "></TextBlock>
            <TextBox Name="LetterValue" Width="30"></TextBox>
            <Button Name="LetterButton" Click="LetterButton_Click" 
                                  Content="Submit"></Button>
        </StackPanel>

      <data:DataGrid Grid.Row="1" Grid.Column="0" 
                          Grid.ColumnSpan="2" Name="CustomerGrid">
      </data:DataGrid>
    </Grid>
</UserControl>

Mở tập tin code phía sau của trang MainPage.xaml (MainPage.xaml.cs hay MainPage.xaml.vb).

Thêm mã vào để nhận kết quả truy vấn dựa trên những gì mà người dùng nhập vào

using System;
using System.Windows;
using System.Windows.Controls;
using RIAServicesExample.Web;
using System.ServiceModel.DomainServices.Client;

namespace RIAServicesExample
{

    public partial class MainPage : UserControl
    {
        private CustomerDomainContext _customerContext =
                          new CustomerDomainContext();

        public MainPage()
        {
            InitializeComponent();
        }

        private void LetterButton_Click(object sender, RoutedEventArgs e)
        {
            IDButton.IsEnabled = false;
            LetterButton.IsEnabled = false;
            LoadOperation<Customer> loadOp = 
                         this._customerContext.Load(
                         this._customerContext.GetCustomersByLastNameLetterQuery(
                              LetterValue.Text), CustomerLoadedCallback, null);
            CustomerGrid.ItemsSource = loadOp.Entities;
        }

        private void IDButton_Click(object sender, RoutedEventArgs e)
        {
            IDButton.IsEnabled = false;
            LetterButton.IsEnabled = false;
            LoadOperation<Customer> loadOp =
                        this._customerContext.Load(
                        this._customerContext.GetCustomersByIDQuery(
                        int.Parse(IDValue.Text)), CustomerLoadedCallback, null);
            CustomerGrid.ItemsSource = loadOp.Entities;
        }

        void CustomerLoadedCallback(LoadOperation<Customer> loadOperation)
        {
            IDButton.IsEnabled = true;
            LetterButton.IsEnabled = true;
        }
    }
}

Chạy ứng dụng.

Và đây là hình mô tả danh sách các customers được lọc ra theo tên.

Nguồn của bài viết và được dịch bởi kpopyo tại đây: http://msdn.microsoft.com/en-us/library/ee707362%28v=VS.91%29.aspx

Walkthrough: Adding Query Methods

Nguyễn Thị Như Quỳnh — Sun, 26 Sep 2010 09:03:29 GMT

Revision 3 posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 9/26/2010 5:03:29 PM

Walkthrough: Adding Query Methods

Filed under: WCF RIA Services

Yêu cầu

Visual Studio 2010
Silverlight 4
WCF RIA Services for Visual Studio 2010
AdventureWorkLT sample database
Một RIA Services project đã xuất dữ liệu từ bảng Customer của cơ sở dữ liệu đơn giản AdventureWorksLT như là trong bài viết trước Walkthrough: Creating a RIA Services Solution.

Để thêm một query method với điều kiện vào là một tham số và trả về một entity duy nhất

Mở solution đã lấy dữ liệu từ bảng Customer trong bài trước.

Để có thêm thông tin, hãy xem tại liên kết này Walkthrough: Creating a RIA Services Solution.
Trong server project, hãy mở lớp domain service truy xuất dữ liệu từ bảng Customer.

Tên của lớp domain service đã liệt kê trong phần yêu cầu là CustomerDomainService.
Thêm một query method nhận một đối số kiểu integer và trả về một Customer entity có customer ID tương ứng.

Nếu một phương thức trả về một single entity bao gồm thuộc tính QueryAttribute, thì bạn phải thiết lập thuộc tính IsComposable thành false. Người dùng không thể thao tác thêm các truy vấn từ client. Nếu query method phù hợp với cấu trúc của một câu truy vấn, bạn không cần áp dụng thuộc tính QueryAttribute . Giá trị trả về phải là một instance duy nhất của một đối tượng entity.
[Query(IsComposable=false)] public Customer GetCustomersByID(int customerID) { return this.ObjectContext.Customers.SingleOrDefault(c => c.CustomerID == customerID); }

Để thêm một query method có một đối số và trả về một tập các entity

Trong server project, hãy mở lớp domain service truy xuất dữ liệu từ bảng Customer.

Tên của lớp domain service đã liệt kê trong phần yêu cầu là CustomerDomainService.
Trong domain service, thêm một query method có đầu vào là một tham số kiểu string và trả về bất kì customers nào có tên bắt đầu là một kí tự.

Phương thức này có thể trả về một đối tượng IQueryable<> bởi vì người dùng có thể muốn cung cấp thêm các thao tác truy vấn từ client.
public IQueryable<Customer> GetCustomersByLastNameLetter(string startingLastNameLetter) { return this.ObjectContext.Customers.Where
(c => c.LastName.StartsWith(startingLastNameLetter) == true); }

Để hiển thị kết quả của những query methods này trong client project.

Trong client project, hãy mở MainPage.xaml.

Thêm hai TextBox controls và hai Button controls để người dùng có thể lọc ra các customer bằng ID hay bằng kí tự đầu tiên của tên.

Phần mã XAML sau trình bày một layout hoàn chỉnh với DataGrid đã có .

<UserControl xmlns:data="clr-namespace:System.Windows.Controls;
                   assembly=System.Windows.Controls.Data"  
    x:Class="RIAServicesExample.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"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="25"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal" Grid.Row="0" Grid.Column="0">
            <TextBlock Text="search by id: " ></TextBlock>
            <TextBox Name="IDValue" Width="50" ></TextBox>
            <Button Name="IDButton" Click="IDButton_Click" Content="Submit"></Button>
        </StackPanel>
        <StackPanel Orientation="Horizontal" Grid.Row="0" Grid.Column="1">
            <TextBlock Text="search by name: "></TextBlock>
            <TextBox Name="LetterValue" Width="30"></TextBox>
            <Button Name="LetterButton" Click="LetterButton_Click" Content="Submit"></Button>
        </StackPanel>

      <data:DataGrid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Name="CustomerGrid">
      </data:DataGrid>
    </Grid>
</UserControl>

Mở tập tin code phía sau của trang MainPage.xaml (MainPage.xaml.cs hay MainPage.xaml.vb).

Thêm mã vào để nhận kết quả truy vấn dựa trên những gì mà người dùng nhập vào

using System;
using System.Windows;
using System.Windows.Controls;
using RIAServicesExample.Web;
using System.ServiceModel.DomainServices.Client;

namespace RIAServicesExample
{

    public partial class MainPage : UserControl
    {
        private CustomerDomainContext _customerContext = new CustomerDomainContext();

        public MainPage()
        {
            InitializeComponent();
        }

        private void LetterButton_Click(object sender, RoutedEventArgs e)
        {
            IDButton.IsEnabled = false;
            LetterButton.IsEnabled = false;
            LoadOperation<Customer> loadOp = 
                         this._customerContext.Load(
                         this._customerContext.GetCustomersByLastNameLetterQuery(
                              LetterValue.Text), CustomerLoadedCallback, null);
            CustomerGrid.ItemsSource = loadOp.Entities;
        }

        private void IDButton_Click(object sender, RoutedEventArgs e)
        {
            IDButton.IsEnabled = false;
            LetterButton.IsEnabled = false;
            LoadOperation<Customer> loadOp =
                        this._customerContext.Load(
                        this._customerContext.GetCustomersByIDQuery(
                        int.Parse(IDValue.Text)), CustomerLoadedCallback, null);
            CustomerGrid.ItemsSource = loadOp.Entities;
        }

        void CustomerLoadedCallback(LoadOperation<Customer> loadOperation)
        {
            IDButton.IsEnabled = true;
            LetterButton.IsEnabled = true;
        }
    }
}

Chạy ứng dụng.

Và đây là hình mô tả danh sách các customers được lọc ra theo tên.

Nguồn của bài viết và được dịch bởi kpopyo tại đây: http://msdn.microsoft.com/en-us/library/ee707362%28v=VS.91%29.aspx

Walkthrough: Adding Query Methods

Nguyễn Thị Như Quỳnh — Sun, 26 Sep 2010 09:01:03 GMT

Revision 2 posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 9/26/2010 5:01:03 PM

Walkthrough: Adding Query Methods

Filed under: WCF RIA Services

Các phương thức dùng để truy vấn dữ liệu từ dữ liệu nguồn đôi khi được gọi là các query method. Trong WCF RIA Services, các query method phải được xác định bằng cách mà framework xem chúng là query methods.Ngomethods. Ngoài ra , các truy vấn luôn trả về một single entity được xác định khác với các truy vấn trả về nhiều giá trị. Để có thêm thông tin về query method, hãy xem Domain Services.

Yêu cầu

Visual Studio 2010
Silverlight 4
WCF RIA Services for Visual Studio 2010
AdventureWorkLT sample database
Một RIA Services project đã xuất dữ liệu từ bảng Customer của cơ sở dữ liệu đơn giản AdventureWorksLT như là trong bài viết trước Walkthrough: Creating a RIA Services Solution.

Để thêm một query method với điều kiện vào là một tham số và trả về một entity duy nhất

Mở solution đã lấy dữ liệu từ bảng Customer trong bài trước.

Để có thêm thông tin, hãy xem tại liên kết này Walkthrough: Creating a RIA Services Solution.
Trong server project, hãy mở lớp domain service truy xuất dữ liệu từ bảng Customer.

Tên của lớp domain service đã liệt kê trong phần yêu cầu là CustomerDomainService.
Thêm một query method nhận một đối số kiểu integer và trả về một Customer entity có customer ID tương ứng.

Nếu một method mà phương thức trả về một single entity bao gồm thuộc tính QueryAttribute, thì bạn phải thiết lập thuộc tính IsComposable thành false. Người dùng không thể thao tác thêm các truy vấn từ client. Nếu query method phù hợp với cấu trúc của một câu truy vấn, bạn không cần áp dụng thuộc tính QueryAttribute . Giá trị trả về phải là một thể hiện đơn instance duy nhất của một đối tượng entity.
[Query(IsComposable=false)] public Customer GetCustomersByID(int customerID) { return this.ObjectContext.Customers.SingleOrDefault(c => c.CustomerID == customerID); }

Để thêm một query method có một đối số và tar3 trả về một tập các entity

Trong server project, hãy mở lớp domain service truy xuất dữ liệu từ bảng Customer.

Tên của lớp domain service đã liệt kê trong phần yêu cầu là CustomerDomainService.
Trong domain service, thêm một query method có đầu vào là một tham số kiểu string và trả về bất kì customers nào có tên bắt đầu là một kí tự.

Phương thức này có thể trả về một đối tượng IQueryable<> bởi vì người dùng có thể muốn cung cấp thêm các thao tác truy vấn từ client.
public IQueryable<Customer> GetCustomersByLastNameLetter(string startingLastNameLetter) { return this.ObjectContext.Customers.Where
(c => c.LastName.StartsWith(startingLastNameLetter) == true); }

Để hiển thị kết quả của những query methods này trong client project.

Trong client project, hãy mở MainPage.xaml.

Thêm hai TextBox controls và hai Button controls để người dùng có thể lọc ra các customer bằng ID hay bằng kí tự đầu tiên của tên.

Phần mã XAML sau trình bày một layout hoàn chỉnh với DataGrid đã có .

<UserControl xmlns:data="clr-namespace:System.Windows.Controls;
                   assembly=System.Windows.Controls.Data"  
    x:Class="RIAServicesExample.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"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="25"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal" Grid.Row="0" Grid.Column="0">
            <TextBlock Text="search by id: " ></TextBlock>
            <TextBox Name="IDValue" Width="50" ></TextBox>
            <Button Name="IDButton" Click="IDButton_Click" Content="Submit"></Button>
        </StackPanel>
        <StackPanel Orientation="Horizontal" Grid.Row="0" Grid.Column="1">
            <TextBlock Text="search by name: "></TextBlock>
            <TextBox Name="LetterValue" Width="30"></TextBox>
            <Button Name="LetterButton" Click="LetterButton_Click" Content="Submit"></Button>
        </StackPanel>

      <data:DataGrid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Name="CustomerGrid">
      </data:DataGrid>
    </Grid>
</UserControl>

Mở tập tin code phía sau của trang MainPage.xaml (MainPage.xaml.cs hay MainPage.xaml.vb).

Thêm mã vào để nhận kết quả truy vấn dựa trên những gì mà người dùng nhập vào

using System;
using System.Windows;
using System.Windows.Controls;
using RIAServicesExample.Web;
using System.ServiceModel.DomainServices.Client;

namespace RIAServicesExample
{

    public partial class MainPage : UserControl
    {
        private CustomerDomainContext _customerContext = new CustomerDomainContext();

        public MainPage()
        {
            InitializeComponent();
        }

        private void LetterButton_Click(object sender, RoutedEventArgs e)
        {
            IDButton.IsEnabled = false;
            LetterButton.IsEnabled = false;
            LoadOperation<Customer> loadOp = 
                         this._customerContext.Load(
                         this._customerContext.GetCustomersByLastNameLetterQuery(
                              LetterValue.Text), CustomerLoadedCallback, null);
            CustomerGrid.ItemsSource = loadOp.Entities;
        }

        private void IDButton_Click(object sender, RoutedEventArgs e)
        {
            IDButton.IsEnabled = false;
            LetterButton.IsEnabled = false;
            LoadOperation<Customer> loadOp =
                        this._customerContext.Load(
                        this._customerContext.GetCustomersByIDQuery(
                        int.Parse(IDValue.Text)), CustomerLoadedCallback, null);
            CustomerGrid.ItemsSource = loadOp.Entities;
        }

        void CustomerLoadedCallback(LoadOperation<Customer> loadOperation)
        {
            IDButton.IsEnabled = true;
            LetterButton.IsEnabled = true;
        }
    }
}

Chạy ứng dụng.

Và đây là hình mô tả danh sách các customers được lọc ra theo tên.

Walkthrough: Adding Query Methods

Nguyễn Thị Như Quỳnh — Sun, 26 Sep 2010 08:57:24 GMT

Revision 1 posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 9/26/2010 4:57:24 PM

Các phương thức dùng để truy vấn dữ liệu từ dữ liệu nguồn đôi khi được gọi là các query method. Trong WCF RIA Services, các query method phải được xác định bằng cách mà framework xem chúng là query methods.Ngoài ra , các truy vấn luôn trả về một single entity được xác định khác với các truy vấn trả về nhiều giá trị. Để có thêm thông tin về query method, hãy xem Domain Services.

Yêu cầu

Visual Studio 2010
Silverlight 4
WCF RIA Services for Visual Studio 2010
AdventureWorkLT sample database
Một RIA Services project đã xuất dữ liệu từ bảng Customer của cơ sở dữ liệu đơn giản AdventureWorksLT như là trong bài viết trước Walkthrough: Creating a RIA Services Solution.

Để thêm một query method với điều kiện là một tham số và trả về một entity duy nhất

Mở solution đã lấy dữ liệu từ bảng Customer trong bài trước.

Để có thêm thông tin, hãy xem Walkthrough: Creating a RIA Services Solution.
Trong server project, hãy mở lớp domain service truy xuất dữ liệu từ bảng Customer.

Tên của lớp domain service đã liệt kê trong phần yêu cầu là CustomerDomainService.
Thêm một query method nhận một đối số kiểu integer và trả về một Customer entity có customer ID tương ứng.

Nếu một method mà trả về một single entity bao gồm thuộc tính QueryAttribute, thì bạn phải thiết lập thuộc tính IsComposable thành false. Người dùng không thể thao tác thêm các truy vấn từ client. Nếu query method phù hợp với cấu trúc của một câu truy vấn, bạn không cần áp dụng thuộc tính QueryAttribute . Giá trị trả về phải là một thể hiện đơn của một đối tượng entity.
[Query(IsComposable=false)] public Customer GetCustomersByID(int customerID) { return this.ObjectContext.Customers.SingleOrDefault(c => c.CustomerID == customerID); }

Để thêm một query method có một đối số và tar3 về một tập các entity

Trong server project, hãy mở lớp domain service truy xuất dữ liệu từ bảng Customer.

Tên của lớp domain service đã liệt kê trong phần yêu cầu là CustomerDomainService.
Trong domain service, thêm một query method có đầu vào là một tham số kiểu string và trả về bất kì customers nào có tên bắt đầu là một kí tự.

Phương thức này có thể trả về một đối tượng IQueryable<> bởi vì người dùng có thể muốn cung cấp thêm các thao tác truy vấn từ client.
public IQueryable<Customer> GetCustomersByLastNameLetter(string startingLastNameLetter) { return this.ObjectContext.Customers.Where
(c => c.LastName.StartsWith(startingLastNameLetter) == true); }

Để hiển thị kết quả của những query methods này trong client project.

Trong client project, hãy mở MainPage.xaml.

Thêm hai TextBox controls và hai Button controls để người dùng có thể lọc ra các customer bằng ID hay bằng kí tự đầu tiên của tên.

Phần mã XAML sau trình bày một layout hoàn chỉnh với DataGrid đã có .

<UserControl xmlns:data="clr-namespace:System.Windows.Controls;
                   assembly=System.Windows.Controls.Data"  
    x:Class="RIAServicesExample.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"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="25"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal" Grid.Row="0" Grid.Column="0">
            <TextBlock Text="search by id: " ></TextBlock>
            <TextBox Name="IDValue" Width="50" ></TextBox>
            <Button Name="IDButton" Click="IDButton_Click" Content="Submit"></Button>
        </StackPanel>
        <StackPanel Orientation="Horizontal" Grid.Row="0" Grid.Column="1">
            <TextBlock Text="search by name: "></TextBlock>
            <TextBox Name="LetterValue" Width="30"></TextBox>
            <Button Name="LetterButton" Click="LetterButton_Click" Content="Submit"></Button>
        </StackPanel>

      <data:DataGrid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Name="CustomerGrid">
      </data:DataGrid>
    </Grid>
</UserControl>

Mở tập tin code phía sau của trang MainPage.xaml (MainPage.xaml.cs hay MainPage.xaml.vb).

Thêm mã vào để nhận kết quả truy vấn dựa trên những gì mà người dùng nhập vào

using System;
using System.Windows;
using System.Windows.Controls;
using RIAServicesExample.Web;
using System.ServiceModel.DomainServices.Client;

namespace RIAServicesExample
{

    public partial class MainPage : UserControl
    {
        private CustomerDomainContext _customerContext = new CustomerDomainContext();

        public MainPage()
        {
            InitializeComponent();
        }

        private void LetterButton_Click(object sender, RoutedEventArgs e)
        {
            IDButton.IsEnabled = false;
            LetterButton.IsEnabled = false;
            LoadOperation<Customer> loadOp = 
                         this._customerContext.Load(
                         this._customerContext.GetCustomersByLastNameLetterQuery(
                              LetterValue.Text), CustomerLoadedCallback, null);
            CustomerGrid.ItemsSource = loadOp.Entities;
        }

        private void IDButton_Click(object sender, RoutedEventArgs e)
        {
            IDButton.IsEnabled = false;
            LetterButton.IsEnabled = false;
            LoadOperation<Customer> loadOp =
                        this._customerContext.Load(
                        this._customerContext.GetCustomersByIDQuery(
                        int.Parse(IDValue.Text)), CustomerLoadedCallback, null);
            CustomerGrid.ItemsSource = loadOp.Entities;
        }

        void CustomerLoadedCallback(LoadOperation<Customer> loadOperation)
        {
            IDButton.IsEnabled = true;
            LetterButton.IsEnabled = true;
        }
    }
}

Chạy ứng dụng.

Và đây là hình mô tả danh sách các customers được lọc ra theo tên.

Walkthrough: Creating a RIA Services Solution

Nguyễn Thị Như Quỳnh — Sun, 26 Sep 2010 08:13:27 GMT

Current revision posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 9/26/2010 4:13:27 PM

Walkthrough: Creating a RIA Services Solution

Filed under: WCF RIA Services

WCF RIA Services

Trong bài viết này, bạn sẽ tạo một ứng dụng WCF RIA Services nhận dữ liệu từ AdventureWorksLT database. Bạn sẽ sử dụng Silverlight để tạo client trong tầng presentation. Và tạo các lớp entity class đại diện cho các bảng dữ liệu khác nhau. Bài viết này là bài khởi đầu cho một loạt các bài khác.

Yêu cầu đầu tiên

Tạo một solution với một RIA Services Link giữa các Project

Xây dựng một RIA Services solution

Trong Visual Studio, tạo mới một RIA Services project bằng cách chọn File, New, và sau đó là Project. Hộp thoại New Project xuất hiện.
Hãy chọn mẫu Silverlight Application và đặt tên cho project mới là RIAServicesExample.
Click OK.

Hộp thoại New Silverlight Application sẽ xuất hiện.
Hãy click chọn vào ô check box có tên là Enable WCF RIA Services.Khi bạn chọn check box này, thì bạn đã tạo một liên kết RIA Services giữa client project và server project.
Click OK để khởi tạo solution.

Bây giờ thì solution chứa hai projects: một client project và một server project. Client project có tên là RIAServicesExample và nó chứa mã Silverlight mà bạn dùng để tạo tầng presentation. Server project có tên là RIAServicesExample.Web và nó chứa phần code của tầng giữa(middle-tier).

Khởi tạo Data Models

Trong phần này, bạn sẽ khởi tạo các lớp ADO.NET Entity đại diện cho các lớp của AdventureWorksLT database. RIA Services làm việc với nhiều lớp mô hình dữ liệu và nhiều nguồn dữ liệu khác nhau.

Lưu ý:
Khi sử dụng một Entity Data Model với Visual Studio 2010, bạn phải chọn tùy chọn Include foreign key columns in the model. Mặc định thì lựa chọn này được tự động thêm vào khi bạn sử dụng Entity Data Model Wizard. Bạn cũng phải sử dụng behavior mặc định của thông tin mà Entity Data Model mapping nhúng vào trong assembly.

Làm việc với dữ liệu tại tầng middle

Trong cửa sổ Solution Explorer,click phải vào server project (RIAServicesExample.Web), chọn Add, và sau đó chọn New Item.

Hộp thoại Add New Item xuất hiện.
Trong hộp thoại đó, hãy chọn phần Data và sau đó chọn mẫu ADO.NET Entity Data Model.
Đặt tên cho tập tin mới là AdventureWorksModel.edmx và click Add.

Hộp thoại Entity Data Model Wizard xuất hiện.
Trong phần khung Choose Model Contents, hãy chọn Generate from database và click Next.
Trong phần khung Choose Your Data Connection, tạo một kết nối dữ liệu đến database và click Next.
Trong phần cửa sổ Choose Your Database Objects, hãy chọn các bảng Address, Customer, và CustomerAddress.
Click Finish. Lúc này mô hình Entity models đã được thiết lập.
Build solution.

Khởi tạo Domain Service

Trong phần này, bạn sẽ thêm một domain service vào dự án tầng middle. Một domain service trình bày các data entity và các hoạt động của server project đến client project. Bạn có thể thêm business logic vào domain service để quản lí cách thức mà client tương tác với dữ liệu.

Để tạo một domain service

Click đôi vào server project, và chọn Add and New Item.
Trong danh sách hiện ra, hãy chọn Web trong phần khung bên trái và chọn Domain Service Class trong phần khung bên phải.
Đặt tên cho tập tin là CustomerDomainService.cs (hoặc là CustomerDomainService.vb).
Click Add.

Hộp thoại Add New Domain Service Class xuất hiện.
Hãy chắc là check box Enable client access được chọn.
Chọn Customer entity và sau đó chọn Enable Editing cho bảng Customer.
Click OK.

Và lớp domain service đã được tạo.
Hãy mở tập tin CustomerDomainService.cs (hay là CustomerDomainService.vb).

Lưu ý là tập tin này có các đặc điểm sau:
- Lớp CustomerDomainService có từ LinqToEntitiesDomainService<TContext> là một lớp abstract base class trong RIA Services framework. Lớp cơ bản(base class) được sử dụng một cách tự động bởi vì domain service trình bày một lớp dữ liệu ADO.NET Entity.
- Thường thì các base class liên kết với các entity class đã được tạo trong bước trước.
- Lớp CustomerDomainService được đánh dấu với thuộc tính EnableClientAccessAttribute để xác định là nó được xuất hiện trong tầng client.
- Một hàm query có tên là GetCustomers được tạo. Hàm này trả về mọi thành phần trong bảng Customers và không lọc hay sắp xếp gì cả.
- Và còn tạo cả các phương thức insert, update, và delete các dòng dữ liệu.

Khởi tạo Silverlight Client

Vừa rồi bạn đã thêm business logic trong domain service. Và bây giờ, bạn chỉ cần sử dụng phương thức GetCustomers đã tạo.

Bởi vì một liên kết RIA Services tồn tạu giữa client project và server project, các client proxy class được khởi tạo khi bạn build the solution. Những proxy class này cho phép bạn truy cập đến dữ liệu từ client.

Để thấy các client proxy class đã được tạo

Hãy Build solution.

Khi bạn build solution, thì code sẽ được tạo trong client project.
Trong cửa sổ Solution Explorer, click Show All Files dành cho client project. (Bạn hãy chọn client project là "Set as startup project")

Lưu ý là thư mục Generated_Code chứa một tập tin code .
Mở tập tin code trong thư mục Generated_Code.

Lưu ý là tập tin này có các đặc điểm như sau:
- Một WebContext class kế thừa từ lớp WebContextBase đã được tạo.
- Một CustomerDomainContext class được suy ra từ lớp DomainContext đã được tạo. Lớp này có một phương thức tên là GetCustomersQuery tương ứng với phương thức truy vấn đã được tạo trong domain service.
- Một Customer class có nguồn gốc từ Entity class được tạo cho entity do domain service trình bày. Lớp Customer entity trong client project tương ứng với Customer entity trên server.

Để hiển thị dữ liệu trong Silverlight client

Hãy mở MainPage.xaml.
Từ thanh Toolbox, kéo một DataGrid control vào trong Grid element trong cửa sổ chứa mã XAML.

Một XML namespace và một reference đến một Data assembly được thêm vào một cách tự động khi bạn kéo DataGrid từ thanh. Nếu bạn thêm DataGrid mà không kéo nó từ Toolbox, thì bạn phải thêm một reference là System.Windows.Controls.Data assembly và một XML namespace cho xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data". Thí dụ này đã có XML namespace có tên là data, và bạn có thể thêm một cái tên khác cũng được.

Đặt tên cho DataGridCustomerGrid như đoạn code XAML dưới đây.

<UserControl 
    xmlns:data="clr-namespace:System.Windows.Controls;
            assembly=System.Windows.Controls.Data"  
    x:Class="RIAServicesExample.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"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
      <data:DataGrid Name="CustomerGrid"></data:DataGrid>
    </Grid>
</UserControl>

Mở tập tin code phía sau của MainPage.xaml.
Thêm câu lệnh using (C#) hay Imports (Visual Basic) cho namespace RIAServicesExample.Web và System.ServiceModel.DomainServices.Client namespace.

RIAServicesExample.Web namespace là tập tin code phía sau được khởi tạo cho client project.

Thêm đoạn code sau cho CustomerDomainContext, lấy các customers bằng cách gọi phương thức GetCustomersQuery, và kết nối kết quả vào trong DataGrid, như là đoạn code dưới đây:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using RIAServicesExample.Web;
using System.ServiceModel.DomainServices.Client;

namespace RIAServicesExample
{
    public partial class MainPage : UserControl
    {
        private CustomerDomainContext _customerContext = 
                  new CustomerDomainContext();

        public MainPage()
        {
            InitializeComponent();

            LoadOperation<Customer> loadOp = 
                        this._customerContext.Load(
                        this._customerContext.GetCustomersQuery());
            CustomerGrid.ItemsSource = loadOp.Entities;
        }
    }
}

Chạy ứng dụng.

Bạn sẽ thấy dữ liệu của data grid tương tự như sau.

Nguồn của bài viết được dịch bởi kpopyo từ: http://msdn.microsoft.com/en-us/library/ee707376%28v=VS.91%29.aspx

Walkthrough: Creating a RIA Services Solution

Nguyễn Thị Như Quỳnh — Sun, 26 Sep 2010 08:12:25 GMT

Revision 3 posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 9/26/2010 4:12:25 PM

Walkthrough: Creating a RIA Services Solution

Filed under: WCF RIA Services

WCF RIA Services

Yêu cầu đầu tiên

Tạo một solution với một RIA Services Link giữa các Project

Xây dựng một RIA Services solution

Trong Visual Studio, tạo mới một RIA Services project bằng cách chọn File, New, và sau đó là Project. Hộp thoại New Project xuất hiện.
Hãy chọn mẫu Silverlight Application và đặt tên cho project mới là RIAServicesExample.
Click OK.

Hộp thoại New Silverlight Application sẽ xuất hiện.
Hãy click chọn vào ô check box có tên là Enable WCF RIA Services.Khi bạn chọn check box này, thì bạn đã tạo một liên kết RIA Services giữa client project và server project.
Click OK để khởi tạo solution.

Bây giờ thì solution chứa hai projects: một client project và một server project. Client project có tên là RIAServicesExample và nó chứa mã Silverlight mà bạn dùng để tạo tầng presentation. Server project có tên là RIAServicesExample.Web và nó chứa phần code của tầng giữa(middle-tier).

Khởi tạo Data Models

Lưu ý:
Khi sử dụng một Entity Data Model với Visual Studio 2010, bạn phải chọn tùy chọn Include foreign key columns in the model. Mặc định thì lựa chọn này được tự động thêm vào khi bạn sử dụng Entity Data Model Wizard. Bạn cũng phải sử dụng behavior mặc định của thông tin mà Entity Data Model mapping nhúng vào trong assembly.

Làm việc với dữ liệu tại tầng middle

Trong cửa sổ Solution Explorer,click phải vào server project (RIAServicesExample.Web), chọn Add, và sau đó chọn New Item.

Hộp thoại Add New Item xuất hiện.
Trong hộp thoại đó, hãy chọn phần Data và sau đó chọn mẫu ADO.NET Entity Data Model.
Đặt tên cho tập tin mới là AdventureWorksModel.edmx và click Add.

Hộp thoại Entity Data Model Wizard xuất hiện.
Trong phần khung Choose Model Contents, hãy chọn Generate from database và click Next.
Trong phần khung Choose Your Data Connection, tạo một kết nối dữ liệu đến database và click Next.
Trong phần cửa sổ Choose Your Database Objects, hãy chọn các bảng Address, Customer, và CustomerAddress.
Click Finish. Lúc này mô hình Entity models đã được thiết lập.
Build solution.

Khởi tạo Domain Service

Để tạo một domain service

Click đôi vào server project, và chọn Add and New Item.
Trong danh sách hiện ra, hãy chọn Web trong phần khung bên trái và chọn Domain Service Class trong phần khung bên phải.
Đặt tên cho tập tin là CustomerDomainService.cs (hoặc là CustomerDomainService.vb).
Click Add.

Hộp thoại Add New Domain Service Class xuất hiện.
Hãy chắc là check box Enable client access được chọn.
Chọn Customer entity và sau đó chọn Enable Editing cho bảng Customer.
Click OK.

Và lớp domain service đã được tạo.
Hãy mở tập tin CustomerDomainService.cs (hay là CustomerDomainService.vb).

Lưu ý là tập tin này có các đặc điểm sau:
- Lớp CustomerDomainService có từ LinqToEntitiesDomainService<TContext> là một lớp abstract base class trong RIA Services framework. Lớp cơ bản(base class) được sử dụng một cách tự động bởi vì domain service trình bày một lớp dữ liệu ADO.NET Entity.
- Thường thì các base class liên kết với các entity class đã được tạo trong bước trước.
- Lớp CustomerDomainService được đánh dấu với thuộc tính EnableClientAccessAttribute để xác định là nó được xuất hiện trong tầng client.
- Một hàm query có tên là GetCustomers được tạo. Hàm này trả về mọi thành phần trong bảng Customers và không lọc hay sắp xếp gì cả.
- Và còn tạo cả các phương thức insert, update, và delete các dòng dữ liệu.

Khởi tạo Silverlight Client

Vừa rồi bạn đã thêm business logic trong domain service. Và bây giờ, bạn chỉ cần sử dụng phương thức GetCustomers đã tạo.

Để thấy các client proxy class đã được tạo

Hãy Build solution.

Khi bạn build solution, thì code sẽ được tạo trong client project.
Trong cửa sổ Solution Explorer, click Show All Files dành cho client project. (Bạn hãy chọn client project là "Set as startup project")

Lưu ý là thư mục Generated_Code chứa một tập tin code .
Mở tập tin code trong thư mục Generated_Code.

Lưu ý là tập tin này có các đặc điểm như sau:
- Một WebContext class kế thừa từ lớp WebContextBase đã được tạo.
- Một CustomerDomainContext class được suy ra từ lớp DomainContext đã được tạo. Lớp này có một phương thức tên là GetCustomersQuery tương ứng với phương thức truy vấn đã được tạo trong domain service.
- Một Customer class có nguồn gốc từ Entity class được tạo cho entity do domain service trình bày. Lớp Customer entity trong client project tương ứng với Customer entity trên server.

Để hiển thị dữ liệu trong Silverlight client

Hãy mở MainPage.xaml.
Từ thanh Toolbox, kéo một DataGrid control vào trong Grid element trong cửa sổ chứa mã XAML.

Một XML namespace và một reference đến một Data assembly được thêm vào một cách tự động khi bạn kéo DataGrid từ thanh. Nếu bạn thêm DataGrid mà không kéo nó từ Toolbox, thì bạn phải thêm một reference là System.Windows.Controls.Data assembly và một XML namespace cho xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data". Thí dụ này đã có XML namespace có tên là data, và bạn có thể thêm một cái tên khác cũng được.

Đặt tên cho DataGridCustomerGrid như đoạn code XAML dưới đây.

<UserControl 
    xmlns:data="clr-namespace:System.Windows.Controls;
            assembly=System.Windows.Controls.Data"  
    x:Class="RIAServicesExample.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"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
      <data:DataGrid Name="CustomerGrid"></data:DataGrid>
    </Grid>
</UserControl>

Mở tập tin code phía sau của MainPage.xaml.
Thêm câu lệnh using (C#) hay Imports (Visual Basic) cho namespace RIAServicesExample.Web và System.ServiceModel.DomainServices.Client namespace.

RIAServicesExample.Web namespace là tập tin code phía sau được khởi tạo cho client project.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using RIAServicesExample.Web;
using System.ServiceModel.DomainServices.Client;

namespace RIAServicesExample
{
    public partial class MainPage : UserControl
    {
        private CustomerDomainContext _customerContext = new CustomerDomainContext();

        public MainPage()
        {
            InitializeComponent();

            LoadOperation<Customer> loadOp = this._customerContext.Load(
                                           this._customerContext.GetCustomersQuery());
            CustomerGrid.ItemsSource = loadOp.Entities;
        }
    }
}

Chạy ứng dụng.

Bạn sẽ thấy dữ liệu của data grid tương tự như sau.

Nguồn của bài viết được dịch bởi kpopyo từ: http://msdn.microsoft.com/en-us/library/ee707376%28v=VS.91%29.aspx

Walkthrough: Creating a RIA Services Solution

Nguyễn Thị Như Quỳnh — Sun, 26 Sep 2010 08:10:52 GMT

Revision 2 posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 9/26/2010 4:10:52 PM

Walkthrough: Creating a RIA Services Solution

Filed under: WCF RIA Services

WCF RIA Services

Yêu cầu đầu tiên

Tạo một solution với một RIA Services Link giữa các Project

Xây dựng một RIA Services solution

Trong Visual Studio, tạo mới một RIA Services project bằng cách chọn File, New, và sau đó là Project. Hộp thoại New Project xuất hiện.
Hãy chọn mẫu Silverlight Application và đặt tên cho project mới là RIAServicesExample.
Click OK.

Hộp thoại New Silverlight Application sẽ xuất hiện.
Hãy click chọn vào ô check box có tên là Enable WCF RIA Services.Khi bạn chọn check box này, thì bạn đã tạo một liên kết RIA Services giữa client project và server project.
Click OK để khởi tạo solution.

Bây giờ thì solution chứa hai projects: một client project và một server project. Client project có tên là RIAServicesExample và nó chứa mã Silverlight mà bạn dùng để tạo tầng presentation. Server project có tên là RIAServicesExample.Web và nó chứa phần code của tầng giữa(middle-tier).

Khởi tạo Data Models

Lưu ý:
Khi sử dụng một Entity Data Model với Visual Studio 2010, bạn phải chọn tùy chọn Include foreign key columns in the model. Mặc định thì lựa chọn này được tự động thêm vào khi bạn sử dụng Entity Data Model Wizard. Bạn cũng phải sử dụng behavior mặc định của thông tin mà Entity Data Model mapping nhúng vào trong assembly.

Làm việc với dữ liệu tại tầng middle

Trong cửa sổ Solution Explorer,click phải vào server project (RIAServicesExample.Web), chọn Add, và sau đó chọn New Item.

Hộp thoại Add New Item xuất hiện.
Trong hộp thoại đó, hãy chọn phần Data và sau đó chọn mẫu ADO.NET Entity Data Model.
Đặt tên cho tập tin mới là AdventureWorksModel.edmx và click Add.

Hộp thoại Entity Data Model Wizard xuất hiện.
Trong phần khung Choose Model Contents, hãy chọn Generate from database và click Next.
Trong phần khung Choose Your Data Connection, tạo một kết nối dữ liệu đến database và click Next.
Trong phần cửa sổ Choose Your Database Objects, hãy chọn các bảng Address, Customer, và CustomerAddress.
Click Finish. Lúc này mô hình Entity models đã được thiết lập.
Build solution.

Khởi tạo Domain Service

Để tạo một domain service

Click đôi vào server project, và chọn Add and New Item.
Trong danh sách hiện ra, hãy chọn Web trong phần khung bên trái và chọn Domain Service Class trong phần khung bên phải.
Đặt tên cho tập tin là CustomerDomainService.cs (hoặc là CustomerDomainService.vb).
Click Add.

Hộp thoại Add New Domain Service Class xuất hiện.
Hãy chắc là check box Enable client access được chọn.
Chọn Customer entity và sau đó chọn Enable Editing cho bảng Customer.
Click OK.

Và lớp domain service đã được tạo.
Hãy mở tập tin CustomerDomainService.cs (hay là CustomerDomainService.vb).

Lưu ý là tập tin này có các đặc điểm sau:
- Lớp CustomerDomainService có từ LinqToEntitiesDomainService<TContext> là một lớp abstract base class trong RIA Services framework. Lớp cơ bản(base class) được sử dụng một cách tự động bởi vì domain service trình bày một lớp dữ liệu ADO.NET Entity.
- Thường thì các base class liên kết với các entity class đã được tạo trong bước trước.
- Lớp CustomerDomainService được đánh dấu với thuộc tính EnableClientAccessAttribute để xác định là nó được xuất hiện trong tầng client.
- Một hàm query có tên là GetCustomers được tạo. Hàm này trả về mọi thành phần trong bảng Customers và không lọc hay sắp xếp gì cả.
- Và còn tạo cả các phương thức insert, update, và delete các dòng dữ liệu.

Khởi tạo Silverlight Client

Vừa rồi bạn đã thêm business logic trong domain service. Và bây giờ, bạn chỉ cần sử dụng phương thức GetCustomers đã tạo.

Để thấy các client proxy class đã được tạo

Hãy Build solution.

Khi bạn build solution, thì code sẽ được tạo trong client project.
Trong cửa sổ Solution Explorer, click Show All Files dành cho client project. (Bạn hãy chọn client project là "Set as startup project")

Lưu ý là thư mục Generated_Code chứa một tập tin code .
Mở tập tin code trong thư mục Generated_Code.

Lưu ý là tập tin này có các đặc điểm như sau:
- Một WebContext class kế thừa từ lớp WebContextBase đã được tạo.
- Một CustomerDomainContext class được suy ra từ lớp DomainContext đã được tạo. Lớp này có một phương thức tên là GetCustomersQuery tương ứng với phương thức truy vấn đã được tạo trong domain service.
- Một Customer class có nguồn gốc từ Entity class được tạo cho entity do domain service trình bày. Lớp Customer entity trong client project tương ứng với Customer entity trên server.

Để hiển thị dữ liệu trong Silverlight client

Hãy mở MainPage.xaml.
Từ thanh Toolbox, kéo một DataGrid control vào trong Grid element trong cửa sổ chứa mã XAML.

Một XML namespace và một reference đến một Data assembly được thêm vào một cách tự động khi bạn kéo DataGrid từ thanh. Nếu bạn thêm DataGrid mà không kéo nó từ Toolbox, thì bạn phải thêm một reference là System.Windows.Controls.Data assembly và một XML namespace cho xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data". Thí dụ này đã có XML namespace có tên là data, và bạn có thể thêm một cái tên khác cũng được.

Đặt tên cho DataGridCustomerGrid như đoạn code XAML dưới đây.

<UserControl 
    xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Dataclr-namespace:System.Windows.Controls;
                                        assembly=System.Windows.Controls.Data"  
    x:Class="RIAServicesExample.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"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
      <data:DataGrid Name="CustomerGrid"></data:DataGrid>
    </Grid>
</UserControl>

Mở tập tin code phía sau của MainPage.xaml.
Thêm câu lệnh using (C#) hay Imports (Visual Basic) cho namespace RIAServicesExample.Web và System.ServiceModel.DomainServices.Client namespace.

RIAServicesExample.Web namespace là tập tin code phía sau được khởi tạo cho client project.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using RIAServicesExample.Web;
using System.ServiceModel.DomainServices.Client;

namespace RIAServicesExample
{
    public partial class MainPage : UserControl
    {
        private CustomerDomainContext _customerContext = new CustomerDomainContext();

        public MainPage()
        {
            InitializeComponent();

            LoadOperation<Customer> loadOp = this._customerContext.Load(
                                           this._customerContext.GetCustomersQuery());
            CustomerGrid.ItemsSource = loadOp.Entities;
        }
    }
}

Chạy ứng dụng.

Bạn sẽ thấy dữ liệu của data grid tương tự như sau.

Nguồn của bài viết được dịch bởi kpopyo từ: http://msdn.microsoft.com/en-us/library/ee707376%28v=VS.91%29.aspx

Walkthrough: Creating a RIA Services Solution

Nguyễn Thị Như Quỳnh — Sun, 26 Sep 2010 08:05:44 GMT

Revision 1 posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 9/26/2010 4:05:44 PM

WCF RIA Services

Yêu cầu đầu tiên

Tạo một solution với một RIA Services Link giữa các Project

Xây dựng một RIA Services solution

Trong Visual Studio, tạo mới một RIA Services project bằng cách chọn File, New, và sau đó là Project. Hộp thoại New Project xuất hiện.
Hãy chọn mẫu Silverlight Application và đặt tên cho project mới là RIAServicesExample.
Click OK.

Hộp thoại New Silverlight Application sẽ xuất hiện.
Hãy click chọn vào ô check box có tên là Enable WCF RIA Services.Khi bạn chọn check box này, thì bạn đã tạo một liên kết RIA Services giữa client project và server project.
Click OK để khởi tạo solution.

Bây giờ thì solution chứa hai projects: một client project và một server project. Client project có tên là RIAServicesExample và nó chứa mã Silverlight mà bạn dùng để tạo tầng presentation. Server project có tên là RIAServicesExample.Web và nó chứa phần code của tầng giữa(middle-tier).

Khởi tạo Data Models

Lưu ý:
Khi sử dụng một Entity Data Model với Visual Studio 2010, bạn phải chọn tùy chọn Include foreign key columns in the model. Mặc định thì lựa chọn này được tự động thêm vào khi bạn sử dụng Entity Data Model Wizard. Bạn cũng phải sử dụng behavior mặc định của thông tin mà Entity Data Model mapping nhúng vào trong assembly.

Làm việc với dữ liệu tại tầng middle

Trong cửa sổ Solution Explorer,click phải vào server project (RIAServicesExample.Web), chọn Add, và sau đó chọn New Item.

Hộp thoại Add New Item xuất hiện.
Trong hộp thoại đó, hãy chọn phần Data và sau đó chọn mẫu ADO.NET Entity Data Model.
Đặt tên cho tập tin mới là AdventureWorksModel.edmx và click Add.

Hộp thoại Entity Data Model Wizard xuất hiện.
Trong phần khung Choose Model Contents, hãy chọn Generate from database và click Next.
Trong phần khung Choose Your Data Connection, tạo một kết nối dữ liệu đến database và click Next.
Trong phần cửa sổ Choose Your Database Objects, hãy chọn các bảng Address, Customer, và CustomerAddress.
Click Finish. Lúc này mô hình Entity models đã được thiết lập.
Build solution.

Khởi tạo Domain Service

Để tạo một domain service

Click đôi vào server project, và chọn Add and New Item.
Trong danh sách hiện ra, hãy chọn Web trong phần khung bên trái và chọn Domain Service Class trong phần khung bên phải.
Đặt tên cho tập tin là CustomerDomainService.cs (hoặc là CustomerDomainService.vb).
Click Add.

Hộp thoại Add New Domain Service Class xuất hiện.
Hãy chắc là check box Enable client access được chọn.
Chọn Customer entity và sau đó chọn Enable Editing cho bảng Customer.
Click OK.

Và lớp domain service đã được tạo.
Hãy mở tập tin CustomerDomainService.cs (hay là CustomerDomainService.vb).

Lưu ý là tập tin này có các đặc điểm sau:
- Lớp CustomerDomainService có từ LinqToEntitiesDomainService<TContext> là một lớp abstract base class trong RIA Services framework. Lớp cơ bản(base class) được sử dụng một cách tự động bởi vì domain service trình bày một lớp dữ liệu ADO.NET Entity.
- Thường thì các base class liên kết với các entity class đã được tạo trong bước trước.
- Lớp CustomerDomainService được đánh dấu với thuộc tính EnableClientAccessAttribute để xác định là nó được xuất hiện trong tầng client.
- Một hàm query có tên là GetCustomers được tạo. Hàm này trả về mọi thành phần trong bảng Customers và không lọc hay sắp xếp gì cả.
- Và còn tạo cả các phương thức insert, update, và delete các dòng dữ liệu.

Khởi tạo Silverlight Client

Vừa rồi bạn đã thêm business logic trong domain service. Và bây giờ, bạn chỉ cần sử dụng phương thức GetCustomers đã tạo.

Để thấy các client proxy class đã được tạo

Hãy Build solution.

Khi bạn build solution, thì code sẽ được tạo trong client project.
Trong cửa sổ Solution Explorer, click Show All Files dành cho client project. (Bạn hãy chọn client project là "Set as startup project")

Lưu ý là thư mục Generated_Code chứa một tập tin code .
Mở tập tin code trong thư mục Generated_Code.

Lưu ý là tập tin này có các đặc điểm như sau:
- Một WebContext class kế thừa từ lớp WebContextBase đã được tạo.
- Một CustomerDomainContext class được suy ra từ lớp DomainContext đã được tạo. Lớp này có một phương thức tên là GetCustomersQuery tương ứng với phương thức truy vấn đã được tạo trong domain service.
- Một Customer class có nguồn gốc từ Entity class được tạo cho entity do domain service trình bày. Lớp Customer entity trong client project tương ứng với Customer entity trên server.

Để hiển thị dữ liệu trong Silverlight client

Hãy mở MainPage.xaml.
Từ thanh Toolbox, kéo một DataGrid control vào trong Grid element trong cửa sổ chứa mã XAML.

Một XML namespace và một reference đến một Data assembly được thêm vào một cách tự động khi bạn kéo DataGrid từ thanh. Nếu bạn thêm DataGrid mà không kéo nó từ Toolbox, thì bạn phải thêm một reference là System.Windows.Controls.Data assembly và một XML namespace cho xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data". Thí dụ này đã có XML namespace có tên là data, và bạn có thể thêm một cái tên khác cũng được.

Đặt tên cho DataGridCustomerGrid như đoạn code XAML dưới đây.

<UserControl 
    xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"  
    x:Class="RIAServicesExample.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"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
      <data:DataGrid Name="CustomerGrid"></data:DataGrid>
    </Grid>
</UserControl>

Mở tập tin code phía sau của MainPage.xaml.
Thêm câu lệnh using (C#) hay Imports (Visual Basic) cho namespace RIAServicesExample.Web và System.ServiceModel.DomainServices.Client namespace.

RIAServicesExample.Web namespace là tập tin code phía sau được khởi tạo cho client project.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using RIAServicesExample.Web;
using System.ServiceModel.DomainServices.Client;

namespace RIAServicesExample
{
    public partial class MainPage : UserControl
    {
        private CustomerDomainContext _customerContext = new CustomerDomainContext();

        public MainPage()
        {
            InitializeComponent();

            LoadOperation<Customer> loadOp = this._customerContext.Load(this._customerContext.GetCustomersQuery());
            CustomerGrid.ItemsSource = loadOp.Entities;
        }
    }
}

Chạy ứng dụng.

Bạn sẽ thấy dữ liệu của data grid tương tự như sau.

Nguồn của bài viết được dịch bởi kpopyo từ: http://msdn.microsoft.com/en-us/library/ee707376%28v=VS.91%29.aspx

Silverlight Tip of the Day #33: How to Scale your entire App and its Elements to your Browsers Size

Nguyễn Thị Như Quỳnh — Thu, 19 Aug 2010 01:49:55 GMT

Current revision posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 8/19/2010 9:49:55 AM

Silverlight Tip of the Day #33: How to Scale your entire App and its Elements to your Browsers Size

Filed under: Silverlight

Hãy nói

Giả sử là bạn có 1 ứng dụng Silverlight mà bạn muốn thu nhỏ lại bằng chiều rộng và chiều của cửa sổ trình duyệt của bạn. Bằng cách này ứng dụng được đưa lên toàn bộ cửa sổ và không chỉ là một cửa sổ với kích thước cố định. Để minh họa điều này, tôi đã tạo một ứng dụng đơn giản của những phần tử UI ngẫu nhiên trên nó.

Bạn có thể xem trước và chạy ứng dụng tại đây:http://silverlight.services.live.com/invoke/66033/Page%20Scaling/iframe.html

Ngoài ra, những cửa sổ sau sẽ cho bạn thấy ứng dụng đơn giản thay đổi trình duyệt với nhiều kích cỡ khác nhau (cao, bình thường, rộng). Như bạn có thể thấy, mỗi phần tử UI trong ứng dụng được chia cân xứng với kích thước của trình duyệt.

Để hoàn thành điều này, tất cả những việc bạn phải làm là thêm một RenderTransform của phần ScaleTransform vào một Grid hay Canvas của ứng dụng Silverlight của bạn.

Thí dụ, thêm đoạn code sau vào trang Page.xaml của bạn:

<Canvas>
    <Canvas.RenderTransform>
        <ScaleTransform x:Name="CanvasScale" ScaleX=”1” ScaleY=”1”></ScaleTransform>
    </Canvas.RenderTransform>
</Canvas>

Gán ScaleX và ScaleY là “1” thì tương đương với tỉ lệ là 100% . Nếu bạn gán ScaleX và ScaleY là “0.33” thì control sẽ bằng 1/3 kích cỡ bình thường của nó.

Nào bây giờ, như đã chứng minh tại Tip of the Day #9 kiểm soát việc thay đổi kích cỡ trình duyệt trong tập tin Page.xaml.cs của bạn. Gán cho CanvasScale ScaleX và ScaleY với một phần trăm mà bạn muốn cho chiều dài và chiều rộng.

namespace ScaleTransform
{
    public partial class Page : UserControl
    {
        private int _startingWidth = 800;
        private int _startingHeight = 600;
 
        public Page()
        {
            InitializeComponent();
 
            App.Current.Host.Content.Resized += new EventHandler(Content_Resized);
        }
        void Content_Resized(object sender, EventArgs e)
        {
            double height = App.Current.Host.Content.ActualHeight;   
            double width = App.Current.Host.Content.ActualWidth;
 
            CanvasScale.ScaleX = width / _startingWidth;
            CanvasScale.ScaleY = height / _startingHeight;
        }
       
    }
}

Thank you,
--Mike Snow

Silverlight Tip of the Day #33: How to Scale your entire App and its Elements to your Browsers Size

Nguyễn Thị Như Quỳnh — Thu, 23 Jul 2009 05:21:16 GMT

Revision 1 posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 7/23/2009 1:21:16 PM

Hãy nói là bạn có 1 ứng dụng Silverlight mà bạn muốn thu nhỏ lại bằng chiều rộng và chiều của cửa sổ trình duyệt của bạn. Bằng cách này ứng dụng được đưa lên toàn bộ cửa sổ và không chỉ là một cửa sổ với kích thước cố định. Để minh họa điều này, tôi đã tạo một ứng dụng đơn giản của những phần tử UI ngẫu nhiên trên nó.

Bạn có thể xem trước và chạy ứng dụng tại đây:http://silverlight.services.live.com/invoke/66033/Page%20Scaling/iframe.html

Thí dụ, thêm đoạn code sau vào trang Page.xaml của bạn:

<Canvas>
    <Canvas.RenderTransform>
        <ScaleTransform x:Name="CanvasScale" ScaleX=”1” ScaleY=”1”></ScaleTransform>
    </Canvas.RenderTransform>
</Canvas>

Gán ScaleX và ScaleY là “1” thì tương đương với tỉ lệ là 100% . Nếu bạn gán ScaleX và ScaleY là “0.33” thì control sẽ bằng 1/3 kích cỡ bình thường của nó.

namespace ScaleTransform
{
    public partial class Page : UserControl
    {
        private int _startingWidth = 800;
        private int _startingHeight = 600;
 
        public Page()
        {
            InitializeComponent();
 
            App.Current.Host.Content.Resized += new EventHandler(Content_Resized);
        }
        void Content_Resized(object sender, EventArgs e)
        {
            double height = App.Current.Host.Content.ActualHeight;   
            double width = App.Current.Host.Content.ActualWidth;
 
            CanvasScale.ScaleX = width / _startingWidth;
            CanvasScale.ScaleY = height / _startingHeight;
        }
       
    }
}

Thank you,
--Mike Snow

Uninstall Silverlight SDK RTM before installing VS 2010 Beta 2

Nguyễn Thị Như Quỳnh — Mon, 21 Dec 2009 06:54:57 GMT

Current revision posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 12/21/2009 2:54:57 PM

Nếu bạn đã cài đặt phiên bản Silverlight 3 SDK RTM (không phải GDR) thì bạn cần phải gỡ bỏ uninstall nó trước khi chạy trình cài đặt Visual Studio 2010 beta 2 setup.

Điều này không phân biệt là phiên bản ngôn ngữ SDK language hay là nền tảng platform. SDK GDR không cài đặt trên phiên bản RTM của SDK. Vấn đề này nên được khắc phục bởi RTM.

Nếu bạn tiến hành cài đặt trong tình trạng này thì bạn sẽ nhận được một lỗi được thông báo vào cuối tiến trình cài đặt, là việc cài đặt SDK đã bị thất bại. Lỗi này không ảnh hưởng đến việc cài đặt phiên bản beta 2 đối với Visual Studio nhưng bạn vẫn sẽ cần gỡ bỏ SDK RTM và cài đặt lại SDK GDR nếu bạn muốn có phiên bản mới nhất của SDK.

Để uninstall phiên bản RTM của SDK:

Hãy vào chương trình Add/Remove programs của bạn.
Sau đó chọn Microsoft Silverlight 3 SDK.
Nhấp phải chuột trên nó và chọn uninstall từ thanh thực đơn hiện ra.

Vào lúc này bạn có thể cài đặt Visual Studio 2010 Beta 2 mà có thể tải về từ đây ==> here.

Hãy lưu ý là bạn có thể cài đặt SL3 GDR SDK trực tiếp tại đây: http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=1ea49236-0de7-41b1-81c8-a126ff39975b.

Thank you,

--Mike

Silverlight Tip of the Day #106 – Setting Default Browser from within VS

Nguyễn Thị Như Quỳnh — Mon, 21 Dec 2009 06:42:58 GMT

Current revision posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 12/21/2009 2:42:58 PM

Từ trong VS bạn có thể xác định trình duyệt Internet browser nào mà bạn muốn khởi chạy khi đang chạy ứng dụng Silverlight của bạn. Trình duyệt hệ thống mặc định của bạn không bị thay đổi bởi thiết lập này.

Để thực hiện thay đổi này, hãy nhấp phải chuột trên trang web khởi động của bạn và chọn Browse with… từ thanh thực đơn hiện ra. Thao tác này sẽ làm xuất hiện hộp thoại sau:

Từ trong hộp thoại này bạn hãy chọn trình duyệt mà bạn muốn sử dụng và chọn “Set as Default”. Đóng hộp thoại sau khi bạn thực hiện xong

Thank you,
--Mike Snow

Silverlight Tip of the Day #104 – Cool Silverlight Tutorial Blogs

Nguyễn Thị Như Quỳnh — Fri, 25 Sep 2009 12:51:28 GMT

Current revision posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 9/25/2009 8:51:28 PM

Trong khóa học năm ngoái tôi đã thu thập được một số Silverlight tutorial blogs thật sự tốt mà tôi nghĩ tôi sẽ share với các bạn. Là những blog đang hoạt động, được update thường xuyên, được định hướng cụ thể để giảng dạy về lập trình Silverlight. Tức là, chúng hiển thị tất cả cho bạn về làm thế nào để thực hiện và cho bạn phần source code bạn cần để tự làm điều đó. Nếu tôi nhỡ mất bất kì đường link hay nào hãy post một comment và tôi sẽ thêm nó vào!

Các trang web Silverlight tutorial theo thứ tự alphabetical:

Author/Site	Link
Andy Beauliue	http://www.andybeaulieu.com/Home/tabid/67/Default.aspx
Brad Adams	http://blogs.msdn.com/brada/default.aspx
Chris Hay	http://www.screencast.com/users/chrishayuk
DotNet Curry	http://www.dotnetcurry.com/
Jesse Liberty	http://silverlight.net/blogs/jesseliberty/
Joe Stegman	http://blogs.msdn.com/jstegman/default.aspx
Nikola Mihaylov	http://blogs.msdn.com/nikola/default.aspx
Page Brooks	http://pagebrooks.com/
Pete Brown	http://community.irritatedvowel.com/blogs/pete_browns_blog/default.aspx
Shawn Wildermuth	http://wildermuth.com/
Silverlight Learning Resources	http://silverlight.net/learn/
SilverlightShow	http://www.silverlightshow.net/
Terence Tsang	http://www.shinedraw.com/
Tim Heuer	http://timheuer.com/blog/
Timmy Kokke	http://geekswithblogs.net/tkokke/Default.aspx

Ngoài ra, đây là một trang Silverlight Blog rất tuyệt: http://www.netvibes.com/rboarman#Silverlight

Thank you,
--Mike

Silverlight Tip of the Day #103 – Use Integers for Layout Calculations

Nguyễn Thị Như Quỳnh — Fri, 18 Sep 2009 23:15:22 GMT

Current revision posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 9/19/2009 7:15:22 AM

Silverlight Tip of the Day #103 – Use Integers for Layout Calculations

Khi tính toán vị trí của các vật thể(object) như là trong các Imageschắc chắn là để , sử dụng các giá trị số nguyên (integer values) sẽ không làm tràn các điểm giá trị.

Thí dụ, hãy nhìn vào đoạn code này mà đặt tại trung tâm bản đồ(map) đặt một đồ vớimột vị trí nhất định:

private void CenterMap(double windowWidth, double windowHeight)
{
    if (null != _parentCanvas)
    {
        int leftPos = (int) ((windowWidth / 2) - _currentX);
        int topPos = (int) ((windowHeight / 2) - _currentY);
 
        _parentCanvas.SetValue(Canvas.LeftProperty, (double) leftPos);
        _parentCanvas.SetValue(Canvas.TopProperty, (double)topPos);
    }
}

Hãy lưu ý là tôi chuyển layout của bản đồ đặt tại left và top để được là số nguyên(integer). Screen shot sau hiển thị là một ví dụ về sử dụng các giá trị double thay vì là các giá trị nguyên integers. Kết quả là những image hơi mờ và các đường thẳng (hay các đường nối ) xuất hiện giữa các hình ảnh đặt cạnh nhau.

So sánh với screenshot ở trên với screenshot sử dụng các số doubles với các shot bên dưới sử dụng các giá trị integers. Trong screen shot bên dưới các images sắc nét và giữa các hình đặt cạnh nhau không có các đường nối hay các đường thẳng.

Thank you,
--Mike Snow

Silverlight Tip of the Day #103 – Use Integers for Layout Calculations

Nguyễn Thị Như Quỳnh — Fri, 18 Sep 2009 12:48:38 GMT

Revision 2 posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 9/18/2009 8:48:38 PM

Silverlight Tip of the Day #103 – Use Integers for Layout Calculations

Khi tính toán vị trí của các vật thể(object) như là các Images chắc chắn là để sự sử dụng giá trị số nguyên (integer values) not floating point values không làm tràn các điểm giá trị.

Thí dụ, hãy nhìn vào đoạn code này đặt tại mà trung tâm một âm bản đồ(map) đặt một vị trí nhất định:

private void CenterMap(double windowWidth, double windowHeight)
<!--CRLF-->

{
<!--CRLF-->

    if (null != _parentCanvas)
<!--CRLF-->

    {
<!--CRLF-->

        int leftPos = (int) ((windowWidth / 2) - _currentX);
<!--CRLF-->

        int topPos = (int) ((windowHeight / 2) - _currentY);
<!--CRLF-->
 
<!--CRLF-->

 
        _parentCanvas.SetValue(Canvas.LeftProperty, (double) leftPos);
<!--CRLF-->

        _parentCanvas.SetValue(Canvas.TopProperty, (double)topPos);
<!--CRLF-->

    }
<!--CRLF-->

}
<!--CRLF-->

Hãy lưu ý là tôi chuyển layout của bản đồ đặt tại left và top để được là số nguyên(integer). Screen shot sau hiển thị một ví dụ về sử dụng các giá trị double thay vì là các giá trị nguyên integers. Kết quả là những image hơi mờ và các đường (hay các seamsđường nối ) xuất hiện giữa các image tileshình ảnh đặt cạnh nhau.

So sánh với screenshot ở trên sử dụng các số doubles với các shot bên dưới sử dụng các giá trị integers. Trong screen shot bên dưới các images sắc nét và giữa các terrain tiles hình đặt cạnh nhau không có seams các đường nối hay các đường thẳng.

Thank you,
--Mike Snow

Silverlight Tip of the Day #103 – Use Integers for Layout Calculations

Nguyễn Thị Như Quỳnh — Fri, 18 Sep 2009 12:43:13 GMT

Revision 1 posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 9/18/2009 8:43:13 PM

Khi tính toán vị trí của các vật thể(object) như là các Images chắc chắn là để sự dụng giá trị số nguyên (integer values) not floating point values.

Thí dụ, hãy nhìn vào đoạn code này đặt tại trung tâm một bản đồ(map) một vị trí nhất định:

private void CenterMap(double windowWidth, double windowHeight)
<!--CRLF-->
{
<!--CRLF-->
    if (null != _parentCanvas)
<!--CRLF-->
    {
<!--CRLF-->
        int leftPos = (int) ((windowWidth / 2) - _currentX);
<!--CRLF-->
        int topPos = (int) ((windowHeight / 2) - _currentY);
<!--CRLF-->
 
<!--CRLF-->
        _parentCanvas.SetValue(Canvas.LeftProperty, (double) leftPos);
<!--CRLF-->
        _parentCanvas.SetValue(Canvas.TopProperty, (double)topPos);
<!--CRLF-->
    }
<!--CRLF-->
}
<!--CRLF-->

So sánh với screenshot ở trên sử dụng các số doubles với các shot bên dưới sử dụng các giá trị integers. Trong screen shot bên dưới các images sắc nét và giữa các terrain tiles không có seams hay các đường thẳng.

Thank you,
--Mike Snow

Silverlight Tip of the Day #102 - Bypassing the Image Cache

Nguyễn Thị Như Quỳnh — Fri, 18 Sep 2009 12:27:53 GMT

Current revision posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 9/18/2009 8:27:53 PM

Silverlight Tip of the Day #102 - Bypassing the Image Cache

Filed under: Silverlight

Mặc định Silverlight sẽ không download một hình ảnh image nhiều hơn một lần nếu được chứa trong image cache. Tức làThat is, à, miễn là URI vẫn giống nhau, nó sẽ tham chiếu các image từ bộ nhớ đệm(cache).

Vậy sẽ thế nào nếu hình ảnh trên máy chủ server thay đổi mặc dù URI vẫn giữ nguyên? Ứng dụng của bạn có thể dẫn đến một update bằng cách gán giá trị thuộc tính IgnoreImageCache thành true.

Thí dụ:

Image img = new Image();

Uri uri = new Uri("http://YourServer.com/MyImage.png", UriKind.Absolute);

BitmapImage bi = new System.Windows.Media.Imaging.BitmapImage(uri);

bi.CreateOptions = BitmapCreateOptions.IgnoreImageCache;

img.Source = bi;

LayoutRoot.Children.Add(img);

Thank you,
--Mike Snow

Silverlight Tip of the Day #102 - Bypassing the Image Cache

Nguyễn Thị Như Quỳnh — Fri, 18 Sep 2009 12:25:40 GMT

Revision 3 posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 9/18/2009 8:25:40 PM

Silverlight Tip of the Day #102 - Bypassing the Image Cache

Filed under: Silverlight

Mặc định Silverlight sẽ không download một hình ảnh image nhiều hơn một lần nếu được chứa trong image cache. Tức làThat is, miễn là URI vẫn giống nhau, nó sẽ tham chiếu các image từ bộ nhớ đệm(cache).

Vậy sẽ thế nào nếu hình ảnh trên máy chủ server thay đổi mặc dù URI vẫn giữ nguyên? Ứng dụng của bạn có thể dẫn đến một update bằng cách gán giá trị thuộc tính IgnoreImageCache thành true.

Thí dụ:

Image img = new Image();

Uri uri = new Uri("http://YourServer.com/MyImage.png", UriKind.Absolute);

BitmapImage bi = new System.Windows.Media.Imaging.BitmapImage(uri);

bi.CreateOptions = BitmapCreateOptions.IgnoreImageCache;

img.Source = bi;

LayoutRoot.Children.Add(img);

Thank you,
--Mike Snow

Silverlight Tip of the Day #102 - Bypassing the Image Cache

Nguyễn Thị Như Quỳnh — Fri, 18 Sep 2009 12:24:15 GMT

Revision 2 posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 9/18/2009 8:24:15 PM

Silverlight Tip of the Day #102 - Bypassing the Image Cache

Filed under: Silverlight

Mặc định Silverlight sẽ không download một hình ảnh image nhiều hơn một lần nếu được chứa trong image cache. Tức làThat is, miễn là URI vẫn giống nhau, nó sẽ tham chiếu các image từ bộ nhớ đệm(cache).

Vậy sẽ thế nào nếu hình ảnh trên máy chủ server thay đổi mặc dù URI vẫn giữ nguyên? Ứng dụng của bạn có thể dẫn đến một update bằng cách gán giá trị thuộc tính IgnoreImageCache thành true.

Thí dụ:

Image img = new Image();

Uri uri = new Uri("http://YourServer.com/MyImage.png", UriKind.Absolute);

BitmapImage bi = new System.Windows.Media.Imaging.BitmapImage(uri);

bi.CreateOptions = BitmapCreateOptions.IgnoreImageCache;

img.Source = bi;

LayoutRoot.Children.Add(img);

Thank you,
--Mike Snow

Silverlight Tip of the Day #102 - Bypassing the Image Cache

Nguyễn Thị Như Quỳnh — Fri, 18 Sep 2009 12:22:47 GMT

Revision 1 posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 9/18/2009 8:22:47 PM

Mặc định Silverlight sẽ không download một hình ảnh image nhiều hơn một lần nếu được chứa trong image cache. Tức làThat is, miễn là URI vẫn giống nhau, nó sẽ tham chiếu các image từ bộ nhớ đệm(cache).

Thí dụ:

Image img = new Image();
<!--CRLF-->
Uri uri = new Uri("http://YourServer.com/MyImage.png", UriKind.Absolute);
<!--CRLF-->
BitmapImage bi = new System.Windows.Media.Imaging.BitmapImage(uri);
<!--CRLF-->
bi.CreateOptions = BitmapCreateOptions.IgnoreImageCache;
<!--CRLF-->
img.Source = bi;
<!--CRLF-->
LayoutRoot.Children.Add(img);
<!--CRLF-->

Thank you,
--Mike Snow

Silverlight Tip of the Day #101 – Silverlight 3 Beta 1 Feature Summary

Nguyễn Thị Như Quỳnh — Fri, 18 Sep 2009 08:45:43 GMT

Current revision posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 9/18/2009 4:45:43 PM

Unless you have had your head under a rock you probably have heard Silverlight 3 Beta 1 has been released! Nếu bạn chưa có, hãy install nó từ đây http://silverlight.net/getstarted/silverlight3/default.aspx

Phiên bản này được đóng gói kèm theo một số các chức năng tuyệt nhất từ trước đến nay. Nếu bạn là một nhà lập trình phát triển game, bạn sẽ vui mừng khi nghe các chức năng bên dưới đây bây giờ đã có trong Silverlight 3. Tôi sẽ và đang viết các chi tiết về số các chức năng này trên blog để giúp bạn áp dụng chúng trong các ứng dụng của bạn.

Image Opened

Trong Silverlight 2 rất khó để xác định một cách chính xác khi nào một image được mở hoàn toàn. Trường hợp này thường cần đến để xác định kích thước thực tế của image. Vấn đề đó xảy ra vì DownloadProgress được khởi động 100% trước khi image được hoàn toàn decoded(giải mã). Để giải quyết vấn đề này, một event mới được gọi là ImageOpened đã xuất hiện trong Silverlight 3. Bây giờ đảm bảo bạn có thể có được kích thước phù hợp của image. Thí dụ:

private void LoadImage(string fileName)
{
    Image img = new Image();
    Uri uri = new Uri(fileName, UriKind.Relative);
    img.Source = new System.Windows.Media.Imaging.BitmapImage(uri);
    img.ImageOpened += new EventHandler<RoutedEventArgs>(Image_ImageOpened);
}
 
void Image_ImageOpened(object sender, RoutedEventArgs e)
{
    Image img = (Image)sender;
    BitmapImage bi = (BitmapImage)img.Source;
    double width = bi.PixelWidth;
    double height = bi.PixelWidth != _radius)
}

XAP Compression

Sự tối ưu hóa được thực hiện để giảm thiểu kích thước của các file XAP. Bạn có thể hi vọng là kích thước của file XAP bây giờ có thể ngang bằng (nếu không tốt hơn) Windows zipping. Các game thường được đóng gói kèm với rất nhiều nội dung vì vậy rõ ràng là nếu kích thước file XAP của bạn càng nhỏ thì các khách hàng của bạn sẽ có thể download các game của bạn càng nhanh.

Perspective 3D

Perspective 3D transforms bây giờ có thể được áp dụng trong các Silverlight controls dựa vào thuộc tính PlaneProjection property. Điều này cho phép bạn rotate một 2D control trong một 3D plane.

Đoạn code ví dụ này sẽ trình bày cách thức để thực hiện được điều đó:

<Image Source="Man.png">
    <Image.Projection>
        <PlaneProjection RotationX="45"></PlaneProjection>
    </Image.Projection>
</Image>

Pixel Shaders

Pixel shaders cho phép bạn áp dụng các hiệu ứng(effect) để kiểm soát như là các images. Có hai hiệu ứng mặc định có sẵn là: Drop Shadow và Blur. Ngoài ra, bạn có thể sáng tạo và áp dụng các hiệu ứng tùy chỉnh của riêng bạn.

Các image sau hiển thị kết quả của việc áp dụng hiệu ứng pixel shader effects trên nó:

Đây là đoạn code ví dụ để thực hiện việc này thông qua một built trong shader:

<Image Source="dwarf.jpg">
    <Image.Effect>
        <BlurEffect></BlurEffect>
    </Image.Effect>
</Image>

Binding

Bây giờ bạn có thể bind các control để kết nối đến các cái khác. Thí dụ, Text của một TextBlock có thể bind đến Text của một TextBox. Hoặc là, một TextBox Text có thể bind đến một Value of Slider. Thí dụ:

<StackPanel>
    <TextBox x:Name="UserText"></TextBox>            
    <TextBlock Text="{Binding Text, ElementName=UserText}"></TextBlock>
</StackPanel>

Bất cứ loại nào trong TextBox cũng tự động được tham chiếu(reflected) trong TextBlock.

Bitmap API

Bitmap APIs bây giờ đã sẵn sàng được sử dụng thông qua một class gọi là WriteableBitmap. Phương thức này có các tham số như là surface width và height và định dạng pixel.

Đoạn code thí dụ:

WriteableBitmap wb = new WriteableBitmap(0, 0, PixelFormats.Bgr32);
wb.Render(img, new ScaleTransform());
wb.Lock();
// walk through WriteableBitmap[]
wb.Invalidate();
wb.Unlock();

Hardware Acceleration

Silverlight bây giờ làm cho việc sử dụng GPU (Graphics Processing Unit) cho rendering mà giải phóng thời gian rảnh rỗi của CPU cho các task khác. Các GPU thường được đặt trên một video card. Nó là một thiết bị xử lý đồ họa chuyên dụng được sử dụng cho một loạt các nhiệm vụ như là tính toán hoạt động của các dấu chấm động .

Animated Text Performance Improvements

Một thuộc tính gọi là TextRenderingMode bây giờ đã cho phép bạn xác định RenderForAnimation. Điều này turns off sự tối ưu hóa(optimization) mà có thể ảnh hưởng trực tiếp đến các text animation như là scaling, rotating, vv.... Kết quả là một smother, thực thi các sự chuyển động của text nhiều hơn. Thí dụ về cách thức gán thuộc tính này như sau:

RenderOptions.SetTextRenderingMode(MyTextbox, TextRenderingMode.RenderForAnimation);

Network Monitoring API

Bây giờ đã có API’s cho phép bạn kiểm soát tình trạng network. Để xem một mạng lưới hiện đang có sẵn hay không, bạn có thể gọi:

bool isConnected = NetworkInterface.GetIsNetworkAvailable();

Bạn cũng có thể gắn thêm một event sẽ khởi động khi network status thay đổi:

NetworkChange.NetworkAddressChanged += new NetworkAddressChangedEventHandler(NetworkChange_NetworkAddressChanged);

Để kết nối đến các phương thức này, bạn sẽ cần reference đến namespace System.Net.NetworkInformation;

SaveFileDialog

Cuối cùng chúng ta đã có thể save các file trong Silverlight! Thực hiện gọi phương thức này sẽ dẫn ra một hộp thoại dialog cho phép bạn xác định một file để save. Phương thức này trả về một con trỏ(pointer) trỏ đến một Stream mà bạn có thể write và hơn thế nữa ở trên đó. Đoạn code thí dụ:

SaveFileDialog sfd = new SaveFileDialog();
sfd.Filter = "map files (*.xml)|*.xml|All files (*.*)|*.*";
sfd.ShowDialog();
System.IO.Stream stream = sfd.OpenFile();
 
// Save your data here
 
stream.Flush();
stream.Close();

Hãy chắc là để flush và close stream hoặc là file sẽ không được tạo.

CaretBrush

CaretBrush rất có ích vì bạn bây giờ có thể thay đổi sự xuất hiện của caret(dấu nháy viết). Đây sẽ là một vấn đề nếu, thí dụ, bạn muốn có một màu background color của một textbox được gán . Thế là dấu nháy trỏ đen(cursor) cùng màu đen sẽ không xuất hiện. Đây là thí dụ làm sao để đổi màu của dấu nháy:

<TextBox Foreground="White" Background="Black" Width="200" Text="Hello">
    <TextBox.CaretBrush>
        <SolidColorBrush Color="White"></SolidColorBrush>
    </TextBox.CaretBrush>
</TextBox>

Kết quả của Screenshot (hãy chú ý đến dấu nháy trắng(white caret)):

Local Connection

Tính năng này cho phép hai ứng dụng Silverlight riêng biệt giao tiếp với từng cái khác trên client side mà không cần làm một vòng đến server.

Thực thi tính năng này khá dễ dàng. Bắt đầu bằng việc khởi tạo hai ứng dụng Silverlight riêng biệt. Với mỗi cái, hãy thêm đoạn code này để lắng nghe( listen) cho một message:

LocalMessageReceiver receiver = new LocalMessageReceiver("R2D2");
receiver.MessageReceived += new EventHandler<MessageReceivedEventArgs>(receiver_MessageReceived);
receiver.Listen();

Bạn sẽ cần để tham chiếu (reference) đến System.Windows.Messaging để thực hiện các cuộc gọi này. Hàm khởi tạo cho LocalMessageReceiver mang một định danh duy nhất.

Với ứng dụng khác thêm đoạn code này sẽ gửi một message đến ứng dụng Silverlight đầu tiên:

LocalMessageSender sender = new LocalMessageSender("R2D2");
sender.SendCompleted += new EventHandler<SendCompletedEventArgs>(sender_SendCompleted);
sender.SendAsync("Hello World!");

Navigation

Navigation bây giờ đã được hỗ trợ trong Silverlight. Điều này cho phép bạn làm một số việc như là nối navigation trong ứng dụng Silverlight của bạn vào các button Back và Forward của browser của bạn. Một template mới được gọi là “Silverlight Navigation Application” có sẵn để minh họa bằng cách nào để thực hiện điều này.

Về cơ bản để thực hiện điều này bạn sẽ cần đặt main page của bạn vào trong một thẻ <navigation:Frame>. Bạn thêm history bằng cách gọi cái này:

this.Frame.Navigate(new Uri(currentPage, UriKind.Relative));

Sau đó, khi các back và forward buttons của browse của bạn được click thì frame object này sẽ chặn chúng và hiển thị trang đúng.

System Colors

Bây giờ bạn có thể truy cập đến một user thiết lập cho System Colors của họ. Những thuộc tính này có sẵn trong System.Windows.SystemColors.*. Thí dụ: System.Windows.SystemColors.ActiveBorderColor. Điều này sẽ cho phép bạn đặt một sự đối chiếu cho phù hợp với một user's settings.

Other

Out of Browser Experience – Cho phép bạn run ứng dụng Silverlight như là một desktop application.
Assembly Caching – Enables non-core runtime extensions to be cached.
ManagedResourceDictionary – Quản lý resources files trong các separate files.
New controls – Một số các controls mới đã được thêm vào.
H.264 / AAC Media Playback - Hỗ trợ định dạng Media mới.
Animation Easing Effects - Hỗ trợ thêm các hiệu ứng hình ảnh gồm cả smoother transitions.

Media Logging - Cho phép bạn thu gom dữ liệu về một customer và các meda experience của họ. Dự liệu được gửi lại cho một hay nhiều servers để phân tích.

Thanks,

--Mike Snow

Silverlight Tip Of The Day Từ Tip 61 đến Tip 100

Nguyễn Thị Như Quỳnh — Thu, 06 Aug 2009 20:45:36 GMT

Current revision posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 8/7/2009 4:45:36 AM

Đây là Silverlight Tip Of The Day Từ Tip 61 đến Tip 100, gồm có 2 file: file word và file pdf, nội dung giống nhau.

File PDF

File Word

Thanks you

--Quỳnh

Silverlight Tip of the Day

Nguyễn Thị Như Quỳnh — Mon, 03 Aug 2009 16:18:43 GMT

Current revision posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 8/4/2009 12:18:43 AM

Đây là tài liệu về tất cả những bài Silverlight Tip of the Day từ bài 1 đến bài 60.

Có hai file: file pdf và file docx. Hai file có nội dung giống nhau.

File PDF

File Word

Silverlight Tip of the Day #17: How to Animate a Rotating Image

Nguyễn Thị Như Quỳnh — Mon, 03 Aug 2009 14:13:20 GMT

Current revision posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 8/3/2009 10:13:20 PM

Silverlight Tip of the Day #17: How to Animate a Rotating Image

Filed under: Silverlight

Mỗi phần tử Silverlight đều được biểu diễn bằng một thuộc tính là RenderTransform , thuộc tính này được sử dụng để chuyển đổi vị trí của phần tử. Tôi sẽ làm thử một chuyển động xoay tròn không ngừng của 1 hình ảnh như dưới đây:

http://silverlight.services.live.com/invoke/66033/How%20to%20Animate%20a%20Rotating%20Image/iframe.html
Click vào để xem ảnh gốc



Đầu tiên hãy khai báo một hình ảnh trong trang Page.xaml. Hãy chắc là bạn đã thêm cái hình đó vào cái thư mục nơi bạn đặt project mã của bạn. Vì chúng ta sẽ thực hiện xoay ảnh quanh trung tâm của nó, nên ta sẽ gán 2 thuộc tính CenterX và  CetnerY là tọa độ trung tâm của hình mà ta sẽ xoay. Trong trường hợp của tôi, tôi sử dụng ảnh có kích thước là 64x48 pixels, nên trung tâm sẽ gán là CenterX=32, CenterY=24.
Trong trang XAML thay <Grid></Grid> bằng:


<Canvas Background="Black">
    <Image x:Name="FireballLogo" Source="images/Fireballlogo.png">
        <Image.RenderTransform>
            <RotateTransform x:Name="FireballTransform" CenterX="32" CenterY="24"></RotateTransform>
        </Image.RenderTransform>
    </Image>
</Canvas>


Tiếp theo, hãy thiết lập thời gian lặp bằng cách sử dụng CompositionTarget.Rendering trong sự kiện lặp của chúng ta. Ta thực hiện chuyển đổi vị trí xung quanh trung tâm của hình là 32,24  vì kích thước của hình là 64x48 . Với mỗi lần chuyển động, chúng ta tăng góc lên 1.


namespace Tip17
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
 
            CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering);
        }
 
        void CompositionTarget_Rendering(object sender, EventArgs e)
        {
            FireballTransform.Angle += 1; 
            FireballTransform.Transform(new Point(32, 24)); 
        }
    }
}


Thank you, 
  
--Mike Snow

Silverlight Tip of the Day #17: How to Animate a Rotating Image

Nguyễn Thị Như Quỳnh — Mon, 03 Aug 2009 14:11:33 GMT

Revision 7 posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 8/3/2009 10:11:33 PM

Silverlight Tip of the Day #17: How to Animate a Rotating Image

Filed under: Silverlight

http://silverlight.services.live.com/invoke/66033/How%20to%20Animate%20a%20Rotating%20Image/iframe.html

tiên hãy khai báo một hình ảnh trong trang Page.xaml. Hãy chắc là bạn đã thêm cái hình đó vào cái thư mục nơi bạn đặt project mã của bạn. Vì chúng ta sẽ thực hiện xoay ảnh quanh trung tâm của nó, nên ta sẽ gán 2 thuộc tính CenterX và CetnerY là tọa độ trung tâm của hình mà ta sẽ xoay. Trong trường hợp của tôi, tôi sử dụng ảnh có kích thước là 64x48 pixels, nên trung tâm sẽ gán là CenterX=32, CenterY=24.

Trong trang XAML thay <Grid></Grid> bằng:

<Canvas Background="Black">
    <Image x:Name="FireballLogo" Source="images/Fireballlogo.png">
        <Image.RenderTransform>
            <RotateTransform x:Name="FireballTransform" CenterX="32" CenterY="24"></RotateTransform>
        </Image.RenderTransform>
    </Image>
</Canvas>

Tiếp theo, hãy thiết lập thời gian lặp bằng cách sử dụng CompositionTarget.Rendering trong sự kiện lặp của chúng ta. Ta thực hiện chuyển đổi vị trí xung quanh trung tâm của hình là 32,24 vì kích thước của hình là 64x48 . Với mỗi lần chuyển động, chúng ta tăng góc lên 1.

namespace Tip17
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
 
            CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering);
        }
 
        void CompositionTarget_Rendering(object sender, EventArgs e)
        {
            FireballTransform.Angle += 1; 
            FireballTransform.Transform(new Point(32, 24)); 
        }
    }
}

Thank you,
--Mike Snow

Silverlight Tip of the Day #17: How to Animate a Rotating Image

Nguyễn Thị Như Quỳnh — Mon, 03 Aug 2009 14:05:47 GMT

Revision 6 posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 8/3/2009 10:05:47 PM

Silverlight Tip of the Day #17: How to Animate a Rotating Image

Filed under: Silverlight

http://msbluelight-0.agappdom.net/e1/d/66033/16631694/63381312000/0.WGrE6tkn5t6kzSZQQr9H3PECxUA/zziframehtml2zz.html#%2f%2fappId%2fTip17Publish%252fClientBin%252fTip17.xap%2f%2f%2f%2f%2f%2f%2ftrue%2f2.0%2f1%2fTip17Publish%252fSilverlight.js

http://silverlight.services.live.com/invoke/66033/How%20to%20Animate%20a%20Rotating%20Image/iframe.html

Trong trang XAML thay <Grid></Grid> bằng:

<Canvas Background="Black">
    <Image x:Name="FireballLogo" Source="images/Fireballlogo.png">
        <Image.RenderTransform>
            <RotateTransform x:Name="FireballTransform" CenterX="32" CenterY="24"></RotateTransform>
        </Image.RenderTransform>
    </Image>
</Canvas>

namespace Tip17
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
 
            CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering);
        }
 
        void CompositionTarget_Rendering(object sender, EventArgs e)
        {
            FireballTransform.Angle += 1; 
            FireballTransform.Transform(new Point(32, 24)); 
        }
    }
}

Thank you,
--Mike Snow

Silverlight Tip of the Day #17: How to Animate a Rotating Image

Nguyễn Thị Như Quỳnh — Sun, 21 Jun 2009 22:14:34 GMT

Revision 5 posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 6/22/2009 6:14:34 AM

Silverlight Tip of the Day #17: How to Animate a Rotating Image

Filed under: Silverlight

Trong trang XAML thay <Grid></Grid> bằng:

<Canvas Background="Black">
    <Image x:Name="FireballLogo" Source="images/Fireballlogo.png">
        <Image.RenderTransform>
            <RotateTransform x:Name="FireballTransform" CenterX="32" CenterY="24"></RotateTransform>
        </Image.RenderTransform>
    </Image>
</Canvas>

namespace Tip17
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
 
            CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering);
        }
 
        void CompositionTarget_Rendering(object sender, EventArgs e)
        {
            FireballTransform.Angle += 1; 
            FireballTransform.Transform(new Point(32, 24)); 
        }
    }
}

Thank you,
--Mike Snow

Silverlight Tip of the Day #17: How to Animate a Rotating Image

Nguyễn Thị Như Quỳnh — Sun, 21 Jun 2009 22:14:13 GMT

Revision 4 posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 6/22/2009 6:14:13 AM

Silverlight Tip of the Day #17: How to Animate a Rotating Image

Filed under: Silverlight

Trong trang XAML thay <Grid></Grid> bằng:

<Canvas Background="Black">
    <Image x:Name="FireballLogo" Source="images/Fireballlogo.png">
        <Image.RenderTransform>
            <RotateTransform x:Name="FireballTransform" CenterX="32" CenterY="24"></RotateTransform>
        </Image.RenderTransform>
    </Image>
</Canvas>

namespace Tip17
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
 
            CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering);
        }
 
        void CompositionTarget_Rendering(object sender, EventArgs e)
        {
            FireballTransform.Angle += 1; 
            FireballTransform.Transform(new Point(32, 24)); 
        }
    }
}

Thank you,
--Mike Snow

Silverlight Tip of the Day #17: How to Animate a Rotating Image

Nguyễn Thị Như Quỳnh — Sun, 21 Jun 2009 22:12:01 GMT

Revision 3 posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 6/22/2009 6:12:01 AM

Silverlight Tip of the Day #17: How to Animate a Rotating Image

Filed under: Silverlight

http://silverlight.services.live.com/invoke/66033/How%20to%20Animate%20a%20Rotating%20Image/iframe.html

Trong trang XAML thay <Grid></Grid> bằng:

<Canvas Background="Black">
    <Image x:Name="FireballLogo" Source="images/Fireballlogo.png">
        <Image.RenderTransform>
            <RotateTransform x:Name="FireballTransform" CenterX="32" CenterY="24"></RotateTransform>
        </Image.RenderTransform>
    </Image>
</Canvas>

namespace Tip17
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
 
            CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering);
        }
 
        void CompositionTarget_Rendering(object sender, EventArgs e)
        {
            FireballTransform.Angle += 1; 
            FireballTransform.Transform(new Point(32, 24)); 
        }
    }
}

Thank you,
--Mike Snow

Silverlight Tip of the Day #17: How to Animate a Rotating Image

Nguyễn Thị Như Quỳnh — Sun, 21 Jun 2009 22:10:50 GMT

Revision 2 posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 6/22/2009 6:10:50 AM

Silverlight Tip of the Day #17: How to Animate a Rotating Image

Filed under: Silverlight

http://silverlight.services.live.com/invoke/66033/How%20to%20Animate%20a%20Rotating%20Image/iframe.html

Trong trang XAML thay <Grid></Grid> bằng:

<Canvas Background="Black">
    <Image x:Name="FireballLogo" Source="images/Fireballlogo.png">
        <Image.RenderTransform>
            <RotateTransform x:Name="FireballTransform" CenterX="32" CenterY="24"></RotateTransform>
        </Image.RenderTransform>
    </Image>
</Canvas>

namespace Tip17
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
 
            CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering);
        }
 
        void CompositionTarget_Rendering(object sender, EventArgs e)
        {
            FireballTransform.Angle += 1; 
            FireballTransform.Transform(new Point(32, 24)); 
        }
    }
}

Thank you,
--Mike Snow

Silverlight Tip of the Day #17: How to Animate a Rotating Image

Nguyễn Thị Như Quỳnh — Sun, 21 Jun 2009 22:09:55 GMT

Revision 1 posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 6/22/2009 6:09:55 AM

http://silverlight.services.live.com/invoke/66033/How%20to%20Animate%20a%20Rotating%20Image/iframe.html

Trong trang XAML thay <Grid></Grid> bằng:

<Canvas Background="Black">
    <Image x:Name="FireballLogo" Source="images/Fireballlogo.png">
        <Image.RenderTransform>
            <RotateTransform x:Name="FireballTransform" CenterX="32" CenterY="24"></RotateTransform>
        </Image.RenderTransform>
    </Image>
</Canvas>

namespace Tip17
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
 
            CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering);
        }
 
        void CompositionTarget_Rendering(object sender, EventArgs e)
        {
            FireballTransform.Angle += 1; 
            FireballTransform.Transform(new Point(32, 24)); 
        }
    }
}

Thank you,
--Mike Snow

Silverlight Tip of the Day #60 – How to load a XAML Control From a File or String

Nguyễn Thị Như Quỳnh — Mon, 03 Aug 2009 01:03:29 GMT

Current revision posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 8/3/2009 9:03:29 AM

Nếu bạn có một control được viết bằng XAML mà được chứa trong dự án của bạn, bạn có thể nạp và tạo nó một cách trực tiếp từ tập tin bằng cách sử dụng phương thức: System.Windows.Markup.XamlReader.Load().Phương thức này cũng có thể được sử dụng để tạo trực tiếp một Silverlight control từ một string.

Để minh họa điều này, tôi đã tạo hai hàm được gọi là LoadFromXAML(). Hàm thứ nhất có một tham số có kiểu là URI để trỏ đến tập tin XAML trong project mà bạn muốn load. Hàm thứ hai có một tham số kiểu string đại diện cho control.

public static object LoadFromXaml(Uri uri)
{
    System.Windows.Resources.StreamResourceInfo streamInfo = System.Windows.Application.GetResourceStream(uri);
 
    if ((streamInfo != null) && (streamInfo.Stream != null))
    {
        using (System.IO.StreamReader reader = new System.IO.StreamReader(streamInfo.Stream))
        {
            return System.Windows.Markup.XamlReader.Load(reader.ReadToEnd());
        }
    }
 
    return null;
}

public static object LoadFromXamlString(string xamlControl)
{
    return System.Windows.Markup.XamlReader.Load(xamlControl);
}

Những phương thức trên trả về một đối tượng chung mà có thể được ép kiểu thành đối tượng mà bạn đang load. Thí dụ:

Button myButton = (Button)LoadFromXaml(new Uri("/LoadXaml;component/MyButton.xaml", UriKind.Relative));

hay

string buttonXAML = "<Button xmlns='http://schemas.microsoft.com/client/2007' Width=\"100\" Height=\"100\" Content=\"Click Me\"></Button>";

Button myButton = (Button) LoadFromXaml(buttonXAML);

Lưu ý rằng trong XAML bạn phải khai báo một XML namespace mặc định như dòng được bôi màu vàng dưới đây:

Nếu bạn không khai báo namespace này , bạn sẽ nhận được error sau:

AG_E_PARSER_MISSING_DEFAULT_NAMESPACE [Line: 0 Position: 0]

Thank you,
--Mike Snow

Silverlight Tip of the Day #59 – How to Display Special Characters in XAML

Nguyễn Thị Như Quỳnh — Mon, 03 Aug 2009 00:50:41 GMT

Current revision posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 8/3/2009 8:50:41 AM

Nếu bạn cố gắng để sử dụng những kí tự sau trong một string trong XAML, bạn sẽ nhận được những lỗi xuất hiện trong Error List của bạn:

Thí dụ, nếu bạn cố gắng để thực hiện điều này:

Bạn sẽ nhận được những lỗi error sau:

Error 1 '"' is an unexpected token. The expected token is ';'. Line 32, position 60.
Error 3 Entity references or sequences beginning with an ampersand '&' must be terminated with a semicolon ';'.

Bạn có thể mã hóa những kí tự không hợp lệ khi sử dụng trong XAML bằng cách sử dụng cú pháp sau:

Kí tự	Mã hóa
<	<
>	>
&	&
“	"

Ngoài ra , những kí tự mã hóa sau cũng rất hữu dụng:

Kí tự	Mã hóa
Space

Vì thế để sửa lỗi sai trong Button ở trên bạn chèn “&” vào bất cứ nơi nào bạn muồn sử dụng kí tự “&”

Thank you,
--Mike Snow

Silverlight Tip of the Day #58 – Text Wrapping and Line Breaks in TextBlocks

Nguyễn Thị Như Quỳnh — Mon, 03 Aug 2009 00:40:22 GMT

Current revision posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 8/3/2009 8:40:22 AM

TextBlocks là một control tuyệt vời để sử dụng trong Silverlight để hiển thị văn bản chỉ được đọc. Trong Tip of the Day #45 Tôi đã bao quát các sử dụng cơ bản của TextBlocks bao gồm cả định dạng văn bản và chạy .

Đối với bài này tôi muốn trình bày cho bạn làm thế nào để thực hiện một TextBlock với wrapping text và line breaks.

Để thực hiện TextBlock wrap văn bản của nó bạn sẽ cần gán thuộc tính TextWrapping ="Wrap" trong TextBlock. Thí dụ dưới đây sẽ hiển thị một TextBlock trong một ContentControl mà chỉ rộng có 100 pixels . Với TextWrapping giá trị "Wrap", TextBlock sẽ được cắt xuống hàng thành một dòng mới mỗi khi hàng đó dài bằng 100 pixels .

XAML:

A lie can travel half way around the world while the truth is putting on its shoes.

            --Mark Twain
        </TextBlock>
    </ContentControl>
</Canvas>

Kết quả với TextWrapping = "Wrap":

Không có TextWrapping:

Như bạn thấy là đoạn văn bản trên không chứa những dòng cần được xuống hàng . Để thâm một dòng mới tất cả những điều bạn cần làm là chèn một thẻ <LineBreak> vào.

Thí dụ:

<Canvas Margin="10">
    <ContentControl Width="100">
        <TextBlock TextWrapping="Wrap">
            A lie can travel half way around the world while the truth is putting on its shoes.
            <LineBreak></LineBreak>
            <LineBreak></LineBreak>
            --Mark Twain
        </TextBlock>
    </ContentControl>

</Canvas>

Kết quả:

Thank you,
--Mike Snow

Silverlight Tip of the Day #57 – How to Dynamically Load a Silverlight Control within another Silverlight Control

Nguyễn Thị Như Quỳnh — Mon, 03 Aug 2009 00:09:18 GMT

Current revision posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 8/3/2009 8:09:18 AM

Giả dụ trang web của bạn toàn bộ đều được viết bằng Silverlight, nhưng bạn muốn có thể tải và chạy một ứng dụng Silverlight khác với ứng dụng/ trang web chính Silverlight của bạn. Việc này hiện đang không được hỗ trợ trực tiếp trong Silverlight. Tuy nhiên, tôi có một giải pháp thay thế mà sẽ thực hiện nhiều hay ít hơn để hoàn thành kịch bản này.

Phương pháp mà tôi thực hiện là thêm một control Silverlight thứ hai bị ẩn vào trang web của bạn. Tôi gán Source cho control Silverlight thứ hai này là empty (“”) cho đến khi tôi muốn tải và hiển thị control Silverlight thứ hai này . Tôi cũng đặt control vào một thẻ DIV mà nó bị ẩn đi. Bạn có thể tải và không tải control này cũng được và có thể gán một cách tự động cho nó để trỏ đến một XAP’s khác để tải ứng dụng khác trong trang của bạn.

Bước 1.

Trong trang web của tôi (thí dụ là tập tin default.aspx ):

Silverlight Control chính đại diện cho trang web của tôi:

<div style="height: 100%; z-index: 1; position: absolute;">
    <asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/SLDev.xap" MinimumVersion="2.0.30523" Width="100%" Height="100%" />
</div>

Silverlight control thứ hai mà chúng ta sẽ tải và hiển thị với trang chính:

<div id="myDIV" style="z-index: 2; display: none; position: absolute; padding-left: 0px;   padding-top: 200px;">
    <asp:Silverlight ID="Silverlight1" runat="server" Source="" MinimumVersion="2.0.30523" Width="800px" Height="600px" />
</div>

Những điều cần chú ý:

Tôi đặt style z-index cho control Silverlight thứ hai cao hơn control Silverlight thứ nhất cốt để control thứ nhất sẽ xuất hiện trên cùng.
Tôi gán style display = none cho thẻ DIV của Silverlight control thứ hai để nó không hiển thị và không làm nhiễu với chuột hay bàn phím khi nhập vào đối với Silverlight control thứ nhất.
Tôi gán style position = absolute để những control có thể nạp (tải) ở trên cùng của những cái khác. Bạn sẽ muốn điều chỉnh padding-left và padding-right trong thuộc tính position để control xuất hiện ở nơi mà bạn muốn trên trang web của bạn.
Và tôi gán Source =”” dành cho Silverlight control thứ hai để giữ nó cho việc nạp một ứng dụng khác cho đến khi tôi đã sẵn sàng.

Bước 2.

Trong trang web của tôi (thí dụ như default.aspx) Tôi thêm 2 hàm Javascript mà ứng dụng Silverlight của tôi có thể gọi để nạp và ẩn Silverlight control thứ hai . Lưu ý:

LoadSilverlightControl() – Hàm này có một tham số mà nó sẽ chứa đường dẫn đầy đủ đến file XAP mà chúng ta muốn load. Thí dụ: “ClientBin\TankWar.xap”
Đối với Silverlight Control, tôi gọi setAttribute() để thay đổi source của Silverlight control.
Đối với thẻ DIV tôi điều chỉnh style.display có giá trị “block” cốt để hiển thị hay không hiển thị, để cho nó ẩn nó đi.

<script type="text/javascript">
    function LoadSilverlightControl(ctrl) {
 
        var control = document.getElementById("Silverlight1");
        var div = document.getElementById("myDIV");
        div.style.display = "block";        
        control.setAttribute("Source", ctrl);
    }
 
    function HideSilverlightControl() {
 
        var control = document.getElementById("Silverlight1");
        var div = document.getElementById("myDIV");
        div.style.display = "none";
        control.setAttribute("Source", "");
    }
</script>

Bước 3.

Thực hiện gọi từ Silverlight->Javascript để làm cho control được nạp và chạy:

HtmlPage.Window.Invoke("LoadSilverlightControl", "ClientBin/TankWar.xap");

Để ẩn nó đi:

HtmlPage.Window.Invoke("HideSilverlightControl");

Kết quả.

Màn hình sau đây hiển thị điều này. Click vào “Games” button….

Và ứng dụng Tank War đã được nạp và hiển thị.

Thank you,
--Mike Snow

Silverlight Tip of the Day #56 – Accessing the HTML DOM from Silverlight.

Nguyễn Thị Như Quỳnh — Sat, 01 Aug 2009 02:35:44 GMT

Current revision posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 8/1/2009 10:35:44 AM

Trong Silverlight bạn có thể tương tác một cách trựa tiếp với HTML DOM (Document Object Model). Điều này có thể được thực hiện nhờ vào đối tượng HtmlPage.Document object:

HtmlDocument doc = HtmlPage.Document;

Hãy chắc chắn là đầu tiên bạn phải thêm vào namespace sau:

using System.Windows.Browser;

Để minh họa điểm này, tôi sẽ dẫn bạn qua 1 demo mà sẽ thay đổi màu nền (background color) của trang HTML Page của bạn khi bạn click vào một button. Để tạo demo này, hãy thực hiện theo các bước sau:

Bước 1. Tạo mới một ứng dụng Silverlight Application sử dụng Visual Studio 2008.

Bước 2. Hãy mở trang Test page của bạn (như là trang SilverlightApplication1TestPage.aspx) và thay đổi thẻ DIV bao quanh đối tượng Silverlight object để có một ID và màu nền. Ngoài ra, gán giá trị cho thuộc tính width và height là 20% và giá trị cho Silverlight control của bạn là width: 50% để Silverlight control che phủ và đè lên toàn bộ nền của trang HTML page:

Bước 3. Trong trang Page.xaml thêm một button với một sự kiện click event:

<UserControl x:Class="SilverlightApplication1.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Canvas>
        <Button Click="Button_Click" Content="Change Colors"></Button>
    </Canvas>
</UserControl>

Bước 4. Trong trang Page.xaml.cs và đoạn mã sau sẽ thay đổi màu nền của trang HTML Page của bạn . Bạn sẽ thấy là chúng ta:

Lấy HTML Document cho trang web.
Lấy thẻ DIV bằng ID của nó .
Thiết lập thuộc tính style của thẻ DIV để thay đổi màu nền của nó từ màu xanh da trời thành màu xanh lá cây.

private void Button_Click(object sender, RoutedEventArgs e)
{
    HtmlDocument doc = HtmlPage.Document;
    HtmlElement div = doc.GetElementById("myDIV");
    div.SetStyleAttribute("background", "green");
}

Bước 5. Chạy ứng dụng. Màu nền của Silverlight control là trắng nơi mà màu nền của trang HTML là màu xanh da trời.

Screen shot trước khi click:

Screen shot sau khi click:

Thank you,
--Mike Snow

Silverlight Tip of the Day #55 – How to Apply Styles in Silverlight – Part I

Nguyễn Thị Như Quỳnh — Fri, 31 Jul 2009 17:48:37 GMT

Current revision posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 8/1/2009 1:48:37 AM

Silverlight Tip of the Day #55 – How to Apply Styles in Silverlight – Part I

Filed under: Silverlight

Những Styles vô cùng quan trọng bởi vì chúng cho phép những nhà phát triển kiểm soát phong cách và kiến trúc của những control trong các ứng dụng của họ. Bằng cách sử dụng styles bạn có thể thay đổi sự khai báo style một cách dễ dàng và tất cả các control trong ứng dụng cũng được cập nhật một cách tự động. Điều này giúp bạn cập nhật các control nhanh hơn là thay đổi từng cái một trong các ứng dụng. (Hơn nữa bạn còn có thể sử dụng nó cho các ứng dụng khác (kế thừa)).

Trong bài này chúng ta sẽ khám phá các nền tảng cơ bản được sử dụng của styles trong Silverlight. Tôi sẽ tiếp tục với những điều phức tạp hơn về style ở Tip of the Day tiếp theo.

Trong Silverlight, styles được khai báo với những control tag <UserControl.Resources> . Nếu bạn muốn thực hiện trên toàn bộ các control thì bạn đặt chúng trong tập tin App.XAML của bạn với những tag <Application.Resources> .

Để minh họa điểm này chúng ta tạo một style cho toàn bộ những gì chúng ta sẽ hiển thị trong TextBlocks xuyên suốt ứng dụng đơn giản của chúng ta:

Với mã XAML ở trên:

Style - Khai báo mỗi style với thẻ <Style></Style> trong thẻ <Application.Resources> hay phần <UserControl.Resources> .
Name – Đặt tên cho style (qua thuộc tính x:Name=””) vì thế chúng ta có thể tham chiếu đến nó từ các control của chúng ta .
TargetType -Tên của FrameworkElement mà bạn đang hướng đến. Trong trường hợp của chúng ta ở trên, ta đang hướng đến một “TextBlock”.
Setter - Mỗi thuộc tính chùng úng ta muốn gán cho style này được khai báo như một Setter. Bạn có thể gán nhiều setters trên một style. Thí dụ, FontSize, FontFamily, vv....

Tiếp theo, mã XAML sau đây hiển thị cho bạn biết bằng cách nào tạo nhiều TextBlocks với cùng một style được áp dụng lên nó.

Cuối cùng, nếu bạn muốn thay đổi font size cho những TextBlocks này, tất cả những gì chúng ta phải làm là chỉ cần thay đổi nó trong style setter đơn giản và nhanh hơn là thay đổi từng TextBlock riêng biệt.

Trước: <Setter Property="FontSize" Value="16"></Setter>

Sau: <Setter Property="FontSize" Value="25"></Setter>

Thank you,
--Mike Snow

Silverlight Tip of the Day #55 – How to Apply Styles in Silverlight – Part I

Nguyễn Thị Như Quỳnh — Fri, 31 Jul 2009 17:46:45 GMT

Revision 1 posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 8/1/2009 1:46:45 AM

Để minh họa điểm này chúng ta tạo một style cho toàn bộ những gì chúng ta sẽ hiển thị trong TextBlocks xuyên suốt ứng dụng đơn giản của chúng ta:

Với mã XAML ở trên:

Style - Khai báo mỗi style với thẻ <Style></Style> trong thẻ <Application.Resources> hay phần <UserControl.Resources> .
Name – Đặt tên cho style (qua thuộc tính x:Name=””) vì thế chúng ta có thể tham chiếu đến nó từ các control của chúng ta .
TargetType -Tên của FrameworkElement mà bạn đang hướng đến. Trong trường hợp của chúng ta ở trên, ta đang hướng đến một “TextBlock”.
Setter - Mỗi thuộc tính chùng ta muốn gán cho style này được khai báo như một Setter. Bạn có thể gán nhiều setters trên một style. Thí dụ, FontSize, FontFamily, vv....

Tiếp theo, mã XAML sau đây hiển thị cho bạn biết bằng cách nào tạo nhiều TextBlocks với cùng một style được áp dụng lên nó.

Cuối cùng, nếu bạn muốn thay đổi font size cho những TextBlocks này, tất cả những gì chúng ta phải là chỉ cần thay đổi nó trong style setter đơn giản và nhanh hơn là thay đổi từng TextBlock riêng biệt.

Trước: <Setter Property="FontSize" Value="16"></Setter>

Sau: <Setter Property="FontSize" Value="25"></Setter>

Thank you,
--Mike Snow

Silverlight Tip of the Day #53 – MessageBox is now Available in Silverlight 2

Nguyễn Thị Như Quỳnh — Fri, 31 Jul 2009 16:54:50 GMT

Current revision posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 8/1/2009 12:54:50 AM

Trong Silverlight 2 bây giờ bạn đã có thể đặt vào một Message Boxes. Việc gọi đơn giản và dễ hiểu và được thực hiện không cần bất kì thao tác nhập nào từ một user.

Phương thức này có ba tham số sau với tham số cuối là tham số tùy chọn:

String – Thông điệp bạn muốn hiển thị
String – Thông điệp hướng dẫn bạn muốn hiển thị
MessageBoxButton – Hoặc MessageBoxButton .OKCancel hay MessageBoxButton .OK

Nó trả về một MessageBoxResult mà bạn có thể sử dụng để kiểm tra button nào người dùng sẽ chọn.

Đây là thí dụ hiển thị một thông điệp ban đầu, sau đó gợi ý cho người dùng nhập vào để chơi lại hay không:

MessageBox.Show("You won the game!");
 
MessageBoxResult result = MessageBox.Show("Do you want to play again?", "Restart", MessageBoxButton.OKCancel);
 
if (result == MessageBoxResult.OK)
{
}

Thank you,
--Mike Snow

Silverlight Tip of the Day #52 – How to Popup a Browser Window

Nguyễn Thị Như Quỳnh — Fri, 31 Jul 2009 16:44:15 GMT

Current revision posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 8/1/2009 12:44:15 AM

Chẳng hạn khi một người sử dụng nhấp chuột vào một button và bạn muốn mở ra một trình duyệt riêng biệt và hướng sự chú ý của họ đến 1 trang web cụ thể.Thì bạn sẽ phải làm điều này trong Silverlight như thế nào?

Silverlight bây giờ đã hỗ trợ một phương thức gọi là HtmlPage.PopupWindow(). Vì lí do bảo mật mà việc gọi phương thức này chỉ được thực hiện trong sự phản hồi đến bất kì người sử dụng nào nhập vào như là một button click.

Để sử dụng phương thức này bạn cần thêm vào một namespace là System.Windows.Browser;

Việc gọi phương thức HtmlPage.PopupWindow() có ba tham số:

Uri – Địa chỉ trình duyệt (ví dụ http://www.silverlight.net).
String – Tên bạn đặt cho cửa sổ.
HtmlPopupWindowOptions – Một số tùy chọn như là vị trí, kích thước của sổ. Ngoài ra, còn có toolbar và menubar cũng được hiển thị và nhiều thứ nữa.

Mã sau đây minh chứng bằng cách nào để thực hiện điều này để phản hồi lại một button click từ users:

private void Button_Click(object sender, RoutedEventArgs e)
{
    HtmlPopupWindowOptions options = new HtmlPopupWindowOptions();
 
    options.Left = 0;
    options.Top = 0;
    options.Width = 800;
    options.Height = 600;
 
    if(true == HtmlPage.IsPopupWindowAllowed)
        HtmlPage.PopupWindow(new Uri("http://www.silverlight.net"), "new", options);
}

*Lưu ý : Phương thức này không được hỗ trợ trong trình duyệt Safari vì nó không thực hiện hợp đồng NPAPI .

Thank you,
--Mike Snow

Silverlight Tip of the Day #51 – How to Enable and Disable Controls

Nguyễn Thị Như Quỳnh — Fri, 31 Jul 2009 16:15:34 GMT

Current revision posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 8/1/2009 12:15:34 AM

Với Silverlight 2 RC0 Silverlight Controls bây giờ đã có thể enabled/disabled dựa vào thuộc tính IsEnabled. Thuộc tính này được hỗ trợ với mọi XAML controls được tìm thấy trong toolbox ngoại trừ những controls mà không tương tác (non-interactive) ( như là An ellipse, image, line, vvv..). Mặc định tất cả những control được làm cho có khả năng tương tác thì bạn chỉ cần thêm thuộc tính này, nếu bạn muốn nó không có khả năng tương tác chỉ cần gán giá trị cho nó là "false".

Ngoài thuộc tính IsEnabled còn có thuộc tính IsEnableChanged bây giờ cũng có thể được sử dụng.

Khi gán IsEnabled=”false” thì control đó sẽ bị ẩn đi và không được tương tác với người sử dụng.

Thí dụ sau có hai slider với cái đầu tiên là enable và cái thứ hai bị disable:

Screen shot:

Thank you,
--Mike Snow

Silverlight Tip of the Day #50 – Main Game Loop Revisited!

Nguyễn Thị Như Quỳnh — Fri, 31 Jul 2009 16:03:56 GMT

Current revision posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 8/1/2009 12:03:56 AM

Trong phiên bản gần đây của Silverlight 2 RC0 có một sự kiện mới ( new event) mà diễn ra một lần trước sự biểu diễn của mỗi frame trong trình duyệt của bạn. Sự kiện rendering event được xác định cho các sự kiện event handler cụ thể sau khi chuyển động (animation) và kiến trúc (layout) được áp dụng cho composition tree . Ngoài ra, nếu thay đổi visual tree bắt buộc phải thay đổi composition tree, và sự kiện event handler của bạn cũng được gọi. (Tức là, theo kpopyo hiểu, CompositionTarget.Rendering event là sự kiện làm cho chuyển động của các đối tượng diễn ra một cách liên tục, như là tuyết rợi liên tục)

Vì thế, thay vì phải sử dụng DispatchTimer or Storyboard Timer, bây giờ bạn có thể sử dụng event mới này cho MainGameLoop() của bạn. Để thêm sự kiện mới này tất cả điều bạn cần làm là thực hiện gọi như sau:

CompositionTarget.Rendering += new EventHandler(MainGameLoop);

Hãy nhìn lại đoạn code trong Snowflake demo, đoạn code sau được sử dụng để tạo một Storyboard timer để tạo vòng lặp chính:

Storyboard _snowflakeTimer = new Storyboard();
public Page()

{
    InitializeComponent();
 
    _snowflakeTimer.Duration = TimeSpan.FromMilliseconds(0);
    _snowflakeTimer.Completed += new EventHandler(SnowFlakeTimer);
    _snowflakeTimer.Begin();
}
 
private void SnowFlakeTimer(object sender, EventArgs e)
{
    MoveSnowFlakes();
    CreateSnowFlakes();
}

Và cách khác là:

public Page()
{
    InitializeComponent();
 
    CompositionTarget.Rendering += new EventHandler(SnowFlakeTimer);
}
 
private void SnowFlakeTimer(object sender, EventArgs e)
{
    MoveSnowFlakes();
    CreateSnowFlakes();
}

Thank you,
--Mike Snow

Silverlight Tip of the Day #48 – How to Implement a Combobox

Nguyễn Thị Như Quỳnh — Thu, 30 Jul 2009 12:38:05 GMT

Current revision posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 7/30/2009 8:38:05 PM

Silverlight Tip of the Day #48 – How to Implement a Combobox

Filed under: Silverlight

Chúng ta sẽ thảo luận ba control mới trong bản Silverlight 2 RC0 không có trong bản beta 2 . Và ba control mới đó sẽ lần lượt được trình bày qua từng Tip of the Day bao gồm:

Và bài này chúng ta sẽ khám phá control ComboBox .

Phần code sau đây trình bày làm thế nào để khai báo và định kích thước cho một combo box bằng mã XAML:

Nếu bạn chạy những dòng code trên bạn sẽ thấy một combo box mà không có một danh sách chọn nào như sau:

Click chuột vào hình tam giác màu đen bạn sẽ thấy một danh sách thả xuống với 3 tùy chọn được hiển thị như sau:

Nếu bạn muốn gán một lựa chọn mặc định cho combo box của bạn thì chỉ cẩn thêm thuộc tính IsSelected=”true” vào bất cứ item nào của ComboBoxItems của bạn như sau:

Và nếu bạn chạy đoạn mã trên, bạn sẽ thấy item thứ ba được chọn mặc định hiển thị lên combo box như sau:

Công cụ ComboBox còn hỗ trợ data binding (tải các item từ dữ liệu bên dưới) . Những dòng code sau là một thí dụ minh họa cho điều này:

Một vài lưu ý về đoạn mã này:

Bằng việc gán giá trị cho thuộc tính DisplayMemberPath bạn có thể chỉ rõ thuộc tính nào trong dữ liệu mà bạn muốn hiển thị trong ComboBox. Trong trường hợp của chúng ta bên dưới, chúng ta sử dụng thuộc tính Name. Chúng ta cũng có thể gán thuộc tính DisplayMemberPath =”Price” và tất nhiên là nó sẽ hiển thị những giá của xe hơi trong ComboBox.
Gán giá trị cho thuộc tính SelectedIndex cho phép bạn hiển thị item nào được chọn hiển thị trên ComboBox .
Tôi có kèm theo một sự kiện để phát hiện khi sự lựa chọn trong ComboBox bị thay đổi. Thành phần SelectedItem của ComboBox của chúng ta sẽ trả về cho chúng ta chiếc xe nào được chọn tại bất cứ thời điểm nào.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
 
namespace Password
{
    public partial class Page : UserControl
    {
        ComboBox _cars = new ComboBox();
 
        public Page()
        {
            InitializeComponent();
 
            List<Car> carList = new List<Car>();
 
            carList.Add(new Car() { Name = "Ferrari", Price = 150000 });
            carList.Add(new Car() { Name = "Honda", Price = 12500 });
            carList.Add(new Car() { Name = "Toyota", Price = 11500 });
 
            ComboBox cb = new ComboBox();
            _cars.DisplayMemberPath = "Name";
            _cars.ItemsSource = carList;
            _cars.SelectedIndex = 2;
            _cars.SelectionChanged += new SelectionChangedEventHandler(cb_SelectionChanged);
 
            MyCanvas.Children.Add(_cars);
        }
 
        void cb_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            Car selectedCar = (Car) _cars.SelectedItem;
 
            int price = selectedCar.Price;
            string carName = selectedCar.Name;
        }
    }
 
    public class Car
    {
        public string Name { get; set; }
        public int Price { get; set; }
    }
}

Thank you,
--Mike Snow

Silverlight Tip of the Day #48 – How to Implement a Combobox

Nguyễn Thị Như Quỳnh — Thu, 30 Jul 2009 12:05:55 GMT

Revision 2 posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 7/30/2009 8:05:55 PM

Silverlight Tip of the Day #48 – How to Implement a Combobox

Filed under: Silverlight

Và bài này chúng ta sẽ khám phá control ComboBox .

Phần code sau đây trình bày làm thế nào để khai báo và định kích thước cho một combo box bằng mã XAML:

Nếu bạn chạy những dòng code trên bạn sẽ thấy một combo box mà không có một danh sách chọn nào như sau:

Click chuột vào hình tam giác màu đen bạn sẽ thấy một danh sách thả xuống với 3 tùy chọn được hiển thị như sau:

Và nếu bạn chạy đoạn mã trên, bạn sẽ thấy item thứ ba được chọn mặc định hiển thị lên combo box như sau:

Công cụ ComboBox còn hỗ trợ data binding (tải các item từ dữ liệu bên dưới) . Những dòng code sau là một thí dụ minh họa cho điều này:

Một vài lưu ý về đoạn mã này:

Bằng việc gán giá trị cho thuộc tính DisplayMemberPath bạn có thể chỉ rõ thuộc tính nào trong dữ liệu mà bạn muốn hiển thị trong ComboBox. Trong trường hợp của chúng ta bên dưới, chúng ta sử dụng thuộc tính Name. Chúng ta cũng có thể gán thuộc tính DisplayMemberPath =”Price” và tất nhiên là nó sẽ hiển thị những giá của xe hơi trong ComboBox.
Gán giá trị cho thuộc tính SelectedIndex cho phép bạn hiển thị item nào được chọn hiển thị trên ComboBox .
Tôi có kèm theo một sự kiện để phát hiện khi sự lựa chọn trong ComboBox bị thay đổi. Thành phần SelectedItem của ComboBox của chúng ta sẽ trả về cho chúng ta chiếc xe nào được chọn tại bất cứ thời điểm nào.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
 
namespace Password
{
    public partial class Page : UserControl
    {
        ComboBox _cars = new ComboBox();
 
        public Page()
        {
            InitializeComponent();
 
            List<Car> carList = new List<Car>();
 
            carList.Add(new Car() { Name = "Ferrari", Price = 150000 });
            carList.Add(new Car() { Name = "Honda", Price = 12500 });
            carList.Add(new Car() { Name = "Toyota", Price = 11500 });
 
            ComboBox cb = new ComboBox();
            _cars.DisplayMemberPath = "Name";
            _cars.ItemsSource = carList;
            _cars.SelectedIndex = 2;
            _cars.SelectionChanged += new SelectionChangedEventHandler(cb_SelectionChanged);
 
            MyCanvas.Children.Add(_cars);
        }
 
        void cb_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            Car selectedCar = (Car) _cars.SelectedItem;
 
            int price = selectedCar.Price;
            string carName = selectedCar.Name;
        }
    }
 
    public class Car
    {
        public string Name { get; set; }
        public int Price { get; set; }
    }
}

Thank you,
--Mike Snow

Silverlight Tip of the Day #48 – How to Implement a Combobox

Nguyễn Thị Như Quỳnh — Thu, 30 Jul 2009 12:04:36 GMT

Revision 1 posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 7/30/2009 8:04:36 PM

Và bài này chúng ta sẽ khám phá control ComboBox .

Phần code sau đây trình bày làm thế nào để khai báo và định kích thước cho một combo box bằng mã XAML:

Nếu bạn chạy những dòng code trên bạn sẽ thấy một combo box mà không có một danh sách chọn nào như sau:

Click chuột vào hình tam giác màu đen bạn sẽ thấy một danh sách thả xuống với 3 tùy chọn được hiển thị như sau:

Và nếu bạn chạy đoạn mã trên, bạn sẽ thấy item thứ ba được chọn mặc định hiển thị lên combo box như sau:

Công cụ ComboBox còn hỗ trợ data binding (tải các item từ dữ liệu bên dưới) . Những dòng code sau là một thí dụ minh họa cho điều này:

Một vài lưu ý về đoạn mã này:

Bằng việc gán giá trị cho thuộc tính DisplayMemberPath bạn có thể chỉ rõ thuộc tính nào trong dữ liệu mà bạn muốn hiển thị trong ComboBox. Trong trường hợp của chúng ta bên dưới, chúng ta sử dụng thuộc tính Name. Chúng ta cũng có thể gán thuộc tính DisplayMemberPath =”Price” và tất nhiên là nó sẽ hiển thị những giá của xe hơi trong ComboBox.
Gán giá trị cho thuộc tính SelectedIndex cho phép bạn hiển thị item nào được chọn hiển thị trên ComboBox .
Tôi có kèm theo một sự kiện để phát hiện khi sự lựa chọn trong ComboBox bị thay đổi. Thành phần SelectedItem của ComboBox của chúng ta sẽ trả về cho chúng ta chiếc xe nào được chọn tại bất cứ thời điểm nào.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
 
namespace Password
{
    public partial class Page : UserControl
    {
        ComboBox _cars = new ComboBox();
 
        public Page()
        {
            InitializeComponent();
 
            List<Car> carList = new List<Car>();
 
            carList.Add(new Car() { Name = "Ferrari", Price = 150000 });
            carList.Add(new Car() { Name = "Honda", Price = 12500 });
            carList.Add(new Car() { Name = "Toyota", Price = 11500 });
 
            ComboBox cb = new ComboBox();
            _cars.DisplayMemberPath = "Name";
            _cars.ItemsSource = carList;
            _cars.SelectedIndex = 2;
            _cars.SelectionChanged += new SelectionChangedEventHandler(cb_SelectionChanged);
 
            MyCanvas.Children.Add(_cars);
        }
 
        void cb_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            Car selectedCar = (Car) _cars.SelectedItem;
 
            int price = selectedCar.Price;
            string carName = selectedCar.Name;
        }
    }
 
    public class Car
    {
        public string Name { get; set; }
        public int Price { get; set; }
    }
}

Thank you,
--Mike Snow

Silverlight Tip of the Day #47 – How to Implement a Password Box

Nguyễn Thị Như Quỳnh — Thu, 30 Jul 2009 12:36:53 GMT

Current revision posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 7/30/2009 8:36:53 PM

Silverlight Tip of the Day #47 – How to Implement a Password Box

Filed under: Silverlight

Và với bài này, chúng ta sẽ thảo luận về control PasswordBox . Những box Password (mật khẩu) rất tuyệt trong việc làm ẩn đi các kí tự mà người sử dụng đang đánh vào vì sự riêng tư và bảo mật. Đó chính là điều cốt yếu để sử dụng control này ở bất cứ nơi nào mà bạn nhận được 1 mật khẩu từ người sử dụng.

Những dòng code sau hiển thị cho bạn biết cách khai báo, kích cỡ, định vị trí như thế nào cho 1 khung password trong mã XAML của bạn:

Mặc định Silverlight sử dụng 1 "dấu chấm " thay cho 1 kí tự để ẩn những kí tự mà người sử dụng đánh vào.

Bạn có thể ghi đè lên kí tự dấu chấm này bằng 1 kí tự khác bằng cách sử dụng thuộc tính PasswordChar như sau:

Bạn cũng có thể làm tất cả những điều này bằng cách lập trình trong phần mã phía sau:

PasswordBox passBox = new PasswordBox();
passBox.Width = 200;
passBox.SetValue(Canvas.TopProperty, (double)300);
passBox.PasswordChar = '*';
MyCanvas.Children.Add(passBox);

Lưu ý rằng chúng ta phải có một bước lớn là thêm nó vào control Canvas để nó xuất hiện trong những phần tử cây (elemen tree).

Thank you,
--Mike Snow

Silverlight Tip of the Day #47 – How to Implement a Password Box

Nguyễn Thị Như Quỳnh — Thu, 30 Jul 2009 12:08:38 GMT

Revision 3 posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 7/30/2009 8:08:38 PM

Silverlight Tip of the Day #47 – How to Implement a Password Box

Filed under: Silverlight

Những dòng code sau hiển thị cho bạn biết cách khai báo, kích cỡ, định vị trí như thế nào cho 1 khung password trong mã XAML của bạn:

Mặc định Silverlight sử dụng 1 "dấu chấm " thay cho 1 kí tự để ẩn những kí tự mà người sử dụng đánh vào.

Bạn có thể ghi đè lên kí tự dấu chấm này bằng 1 kí tự khác bằng cách sử dụng thuộc tính PasswordChar như sau:

Bạn cũng có thể làm tất cả những điều này bằng cách lập trình trong phần mã phía sau:

PasswordBox passBox = new PasswordBox();
passBox.Width = 200;
passBox.SetValue(Canvas.TopProperty, (double)300);
passBox.PasswordChar = '*';
MyCanvas.Children.Add(passBox);

Lưu ý rằng chúng ta phải có một bước lớn là thêm nó vào control Canvas để nó xuất hiện trong những phần tử cây (elemen tree).

Thank you,
--Mike Snow

Silverlight Tip of the Day #47 – How to Implement a Password Box

Nguyễn Thị Như Quỳnh — Thu, 30 Jul 2009 11:28:50 GMT

Revision 2 posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 7/30/2009 7:28:50 PM

Silverlight Tip of the Day #47 – How to Implement a Password Box

Filed under: Silverlight

Những dòng code sau hiển thị cho bạn biết cách khai báo, kích cỡ, định vị trí như thế nào cho 1 khung password trong mã XAML của bạn:

Mặc định Silverlight sử dụng 1 "dấu chấm " thay cho 1 kí tự để ẩn những kí tự mà người sử dụng đánh vào.

Bạn có thể ghi đè lên kí tự dấu chấm này bằng 1 kí tự khác bằng cách sử dụng thuộc tính PasswordChar như sau:

Bạn cũng có thể làm tất cả những điều này bằng cách lập trình trong phần mã phía sau:

PasswordBox passBox = new PasswordBox();
passBox.Width = 200;
passBox.SetValue(Canvas.TopProperty, (double)300);
passBox.PasswordChar = '*';
MyCanvas.Children.Add(passBox);

Lưu ý rằng chúng ta phải có một bước lớn là thêm nó vào control Canvas để nó xuất hiện trong những phần tử cây (elemen tree).

Thank you,
--Mike Snow

Silverlight Tip of the Day #47 – How to Implement a Password Box

Nguyễn Thị Như Quỳnh — Thu, 30 Jul 2009 11:26:00 GMT

Revision 1 posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 7/30/2009 7:26:00 PM

Những dòng code sau hiển thị cho bạn biết cách khai báo, kích cỡ, định vị trí như thế nào cho 1 khung password trong mã XAML của bạn:

Mặc định Silverlight sử dụng 1 "dấu chấm " thay cho 1 kí tự để ẩn những kí tự mà người sử dụng đánh vào.

Bạn có thể ghi đè lên kí tự dấu chấm này bằng 1 kí tự khác bằng cách sử dụng thuộc tính PasswordChar như sau:

Bạn cũng có thể làm tất cả những điều này bằng cách lập trình trong phần mã phía sau:

PasswordBox passBox = new PasswordBox();
passBox.Width = 200;
passBox.SetValue(Canvas.TopProperty, (double)300);
passBox.PasswordChar = '*';
MyCanvas.Children.Add(passBox);

Lưu ý rằng chúng ta phải có một bước lớn là thêm nó vào control Canvas để nó xuất hiện trong những phần tử cây (elemen tree).

Thank you,
--Mike Snow

Silverlight Tip of the Day #49 – How to Implement a Progress Bar

Nguyễn Thị Như Quỳnh — Thu, 30 Jul 2009 12:33:52 GMT

Current revision posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 7/30/2009 8:33:52 PM

Silverlight Tip of the Day #49 – How to Implement a Progress Bar

Filed under: Silverlight

à bài này chúng ta sẽ khám phá control ProgressBar . Đoạn mã sau sẽ cho bạn biết bằng cách nào khai báo một ProgressBar trong mã XAML của bạn:

Hãy nhìn vào từng thuộc tính sau đây trong control ProgressBar và những gì chúng ta làm là:

Foreground – Màu sắc của thanh chạy ở bên trong ProgressBar.
Background – Màu nền của control.
Value – Giá trị bắt đầu cho ProgressBar.
Maximum – Giá trị kết thúc cho ProgressBar.
Width/Height – Chiều rộng/ chiều cao của ProgressBar.
Margin – Khoảng cách giữa control ProgressBar với những control chứa nó (canvas, stackpanel, grid...). Tôi nghĩ sử dụng Margin dễ hơn các thuộc tính Canvas.Left and và Canvas.Top.

Thêm một timer và bạn có thể tạo di chuyển cho thanh progress đến giá trị lớn nhất của nó:

namespace Password
{
    public partial class Page : UserControl
    {
        Storyboard _timer = new Storyboard();
        public Page()
        {
            InitializeComponent();
 
            _timer.Duration = TimeSpan.FromMilliseconds(10);
            _timer.Completed += new EventHandler(_timer_Completed);
            _timer.Begin();
        }
 
        void _timer_Completed(object sender, EventArgs e)
        {
            if (MyProgress.Value < MyProgress.Maximum)
            {
                MyProgress.Value++;
                _timer.Begin();
            }
        }
    }
}

Nếu bạn chạy control này bạn sẽ thấy nó bắt đầu ở giá trị 25 và kết thúc khi nó đầy:

Bắt đầu:

Kết thúc:

Và bây giờ nếu bạn không muốn sử dụng thời gian và muốn thanh progress cứ lặp lại không ngừng thì bạn có thể gán giá trị cho thuộc tính IsDeterminate là “true”

Bạn có thể thêm tùy chọn vào ProgressBar của bạn bằng cách gán giá trị cho thuộc tính Background và Foreground với bất kì brush thích hợp nào:

Brush
GradientBrush
LinearBrush
Imagebrush
LinearGradientBrush
RadialGradientBrush
SolidColorBrush

Đây là mọt 1 thí dụ sử dụng một ImageBrush:

Bắt đầu:

Kết thúc:

Thank you,
--Mike Snow

Silverlight Tip of the Day #49 – How to Implement a Progress Bar

Nguyễn Thị Như Quỳnh — Thu, 30 Jul 2009 12:29:08 GMT

Revision 1 posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 7/30/2009 8:29:08 PM

ProgressBar
ComboxBox
PasswordBox

à bài này chúng ta sẽ khám phá control ProgressBar . Đoạn mã sau sẽ cho bạn biết bằng cách nào khai báo một ProgressBar trong mã XAML của bạn:

Hãy nhìn vào từng thuộc tính sau đây trong control ProgressBar và những gì chúng ta làm là:

Foreground – Màu sắc của thanh chạy ở bên trong ProgressBar.
Background – Màu nền của control.
Value – Giá trị bắt đầu cho ProgressBar.
Maximum – Giá trị kết thúc cho ProgressBar.
Width/Height – Chiều rộng/ chiều cao của ProgressBar.
Margin – Khoảng cách giữa control ProgressBar với những control chứa nó (canvas, stackpanel, grid...). Tôi nghĩ sử dụng Margin dễ hơn các thuộc tính Canvas.Left and Canvas.Top.

Thêm một timer và bạn có thể tạo di chuyển cho thanh progress đến giá trị lớn nhất của nó:

namespace Password
{
    public partial class Page : UserControl
    {
        Storyboard _timer = new Storyboard();
        public Page()
        {
            InitializeComponent();
 
            _timer.Duration = TimeSpan.FromMilliseconds(10);
            _timer.Completed += new EventHandler(_timer_Completed);
            _timer.Begin();
        }
 
        void _timer_Completed(object sender, EventArgs e)
        {
            if (MyProgress.Value < MyProgress.Maximum)
            {
                MyProgress.Value++;
                _timer.Begin();
            }
        }
    }
}

Nếu bạn chạy control này bạn sẽ thấy nó bắt đầu ở giá trị 25 và kết thúc khi nó đầy:

Bắt đầu:

Kết thúc:

Bạn có thể thêm tùy chọn vào ProgressBar của bạn bằng cách gán giá trị cho thuộc tính Background và Foreground với bất kì brush thích hợp nào:

Brush
GradientBrush
LinearBrush
Imagebrush
LinearGradientBrush
RadialGradientBrush
SolidColorBrush

Đây là mọt thí dụ sử dụng một ImageBrush:

Bắt đầu:

Kết thúc:

Thank you,
--Mike Snow

Silverlight Tip of the Day #7: Creating Transparent PNG files for Silverlight

Nguyễn Thị Như Quỳnh — Wed, 29 Jul 2009 16:24:01 GMT

Current revision posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 7/30/2009 12:24:01 AM

Với những file ảnh đuôi GIF( không được hỗ trợ trong Silverlight 2), để làm cho ảnh trở trên trong suốt (transparency) hoàn toàn rất dễ dàng bởi vì bạn chỉ cần chỉ rõ màu nào trong hình đuôi GIF đó mà bạn muốn nó trong suốt. Nhưng với hình ảnh đuôi PNG, điều đó có khó hơn chút xíu. Bạn sẽ phải sử dụng một công cụ chỉnh sửa để làm sạch (clear) hết những vùng bên ngoài mà bạn không muốn nó hiển thị ra. Có một công cụ để làm điều này, và tôi sẽ chỉ cho các bạn làm điều đó.

Bước 1. Tìm một công cụ chỉnh sửa hỗ trợ định dạng file GIF và sử dụng công cụ "Magic Wand" để làm sạch những vùng không cần thiết. Mở file ảnh mà bạn muốn chỉnh sửa trong công cụ mà bạn đã chọn. Đối với ví dụ này, chúng ta sẽ sử dụng hình ảnh của thầy phù thủy nhỏ dễ thương như hình 7.1.

Hình 7.1 Attacking Mage

Bước 2. Click vào nút "Magic Want" trên thanh toolbar. Nếu bạn sử dụng công cụ là Photoshop,đầu tiê hãy nhấp đôi vào layer để xóa đi layer background gốc. Phương pháp này sẽ làm cho màu nền ảnh (background) được trong suốt và không có màu trắng. Nếu được, hãy gán Tolerance level = 0 để nó chỉ chọn vùng màu nâu thôi. Và nếu được, hãy tắt Anti-Alias.

Bước 3. Clich chuột trái lên vùng màu nâu như hình 7.2 ( tức là sau khi bạn chọn magic want trên thanh công cụ thì chỉ cần bạn click vào vùng mầu nâu trên hình) và bạn sẽ thấy tất cả những vùng màu nâu được chọn.

Hình 7.2 Ranh giới được chọn trên hình

Bước 4. Nhấn phím delete trên bàn phím. Kết quả background của hình được xóa như hình 7.3.

Hình 7.3 Background đã được xóa.

Bước 5. Lưu lại hình đã xóa background với định dạng đuôi PNG. Hình này bây giờ sẽ được hiển thị trong Silverlight như là một hình trong suốt ở những khu vực mà bạn đã cắt bên ngoài hình phù thủy nhỏ dễ thương. Dưới đây là một ví dụ để biết được phải làm sao để loadvà hiển thị file ảnh đuôi PNG. Chúng ta gọi phương thức này là LoadImage() và hơn nữa là ta sẽ thêm image resource vào một Canvas có tên là MapCanvas.

public void DisplayPNG()
{
    Image img = LoadImage("images/mage.png");
    MapCanvas.Children.Add(img);
}
 
public Image LoadImage(string resource)
{
    Image img = new Image();
    Uri uri = new Uri(resource, UriKind.Relative);
    ImageSource imgSrc = new System.Windows.Media.Imaging.BitmapImage(uri);
    img.SetValue(Image.SourceProperty, imgSrc);
    return img;
}

Credits: Chân thành cám ơn trang web http://reinerstileset.4players.de/ (Reiner "Tiles" Prokein) về những hình ảnh này.

Thank you,
--Mike Snow

Silverlight Tip of the Day #9 – How to Capture the Size of your Browser when it is Resized.

Nguyễn Thị Như Quỳnh — Wed, 29 Jul 2009 16:23:10 GMT

Current revision posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 7/30/2009 12:23:10 AM

Trong tutorial này,Tôi sẽ trình bày làm thế nào để điều khiển kích cỡ browers của bạn khi nó được thay đổi kích cỡ. Đây là yếu tố cần thiết nếu bạn muốn canh chỉnh các yếu tố của bạn vào browsers borders, đặt vào giữa các kí tự của bạn trên screen, vân vân...

Để thực hiện điều này chúng ta sẽ gắn một resized event handler đơn giản vào đối tượng App.Current.Host.Content .

Page.xaml.cs:

public Page()
{
    InitializeComponent();
 
    App.Current.Host.Content.Resized += new EventHandler(Content_Resized);
}

Từ nay, chúng ta có thể điều khiển kích cỡ của browser khi nó được thay đổi:

void Content_Resized(object sender, EventArgs e)
{
     double height = App.Current.Host.Content.ActualHeight;
     double width = App.Current.Host.Content.ActualWidth;
}

Thank you,
--Mike Snow

Silverlight Tip of the Day #8 - Silverlight Blogs and Resources

Nguyễn Thị Như Quỳnh — Wed, 29 Jul 2009 16:22:15 GMT

Current revision posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 7/30/2009 12:22:15 AM

Sau đây là danh sách về Silverlight Resources bao gồm blogs, tutorials và vân vân. Nếu bạn biết trang nào hay hơn hãy nói cho tôi biết để tôi update list nhé.

Cài đặt Version mới nhất của Silverlight với Silverlight Tools

Silverlight Tools RTM: http://www.microsoft.com/downloads/details.aspx?FamilyId=c22d6a7b-546f-4407-8ef6-d60c8ee221ed&displaylang=en

Bắt đầu

Main Site: http://silverlight.net/GetStarted/
First Look at Silverlight: http://weblogs.asp.net/scottgu/archive/2008/02/22/first-look-at-silverlight-2.aspx
Tutorials: http://silverlight.net/learn/tutorials.aspx
MSDN: http://msdn.microsoft.com/en-us/library/bb404700(VS.95).aspx
Architecture: http://msdn.microsoft.com/en-us/library/bb404700(VS.95).aspx

Silverlight Blogs

Alvin Ashcraft: http://www.alvinashcraft.com/
Bill Reiss: http://www.bluerosegames.com/SilverlightBrassTacks/
Brad Adams: http://blogs.gotdotnet.com/BradA/
Dan Wahlin: http://weblogs.asp.net/dwahlin/default.aspx
Dave Relyea - http://blogs.msdn.com/DevDave
Delay: http://blogs.msdn.com/delay/
Einar Ingebrigtsen: http://www.ingebrigtsen.info
Jeff Paries: http://designwithsilverlight.com/
Jessie Liberty: http://silverlight.net/blogs/jesseliberty/
Joe Stegman: http://blogs.msdn.com/jstegman/default.aspx
Karen Corby: http://scorbs.com/
Laurence Moroney: http://blogs.msdn.com/webnext/default.aspx
Michael Palermo: http://weblogs.asp.net/palermo4/default.aspx
Michael Sync: http://michaelsync.net/
Neo: http://www.silverlightexamples.net/
Nikhil Kothari: http://www.nikhilk.net
Nikola: http://blogs.msdn.com/nikola/default.aspx and http://www.nokola.com/
Peter Blois: http://www.blois.us/blog/
Pete Brown: http://community.irritatedvowel.com/blogs/pete_browns_blog/default.aspx
Seema Ramchandani: http://blogs.msdn.com/seema
Scott Guthrie: http://weblogs.asp.net/scottgu/archive/tags/Silverlight/default.aspx
Synergist: http://blogs.msdn.com/synergist/
SDK Team: http://blogs.msdn.com/silverlight_sdk/
The MossyBlog Times: http://blogs.msdn.com/msmossyblog/
Tim Sneath: http://blogs.msdn.com/tims/
Tim Heuer: http://timheuer.com/blog/
VectorForm: http://www.vectorform.com/silverlight/blog/
Web Services Team: http://blogs.msdn.com/silverlightws
Wilco Bauwer: http://www.wilcob.com/Wilco/Silverlight.aspx

Những trang Silverlight khác (Daily Silverlight Links,vv)

Miscellaneous Topics of Interest for Silverlight

3D Engines:

Kit3d: http://www.codeplex.com/Kit3D

Balder 3D Engine: http://www.codeplex.com/Balder (Blog: http://www.dolittle.com/blogs/einar)

Game Programming:

Silverlight Games 101 by Bill Reiss

Refactor by Joel Neubeck.

Silverlight Game Programming Tutorial by Matthew Casperson

2D Game Development by Mike Gold.

Andy Beaulieu

Silverlight Games by Roger Guess

Developer Fusion

Secure Password sending: http://dnnsilverlight.adefwebserver.com/Samples/SilverlightXAML/tabid/56/Default.aspx
Silverlight Nuggets: http://silverlightnuggets.com/
Sockets: http://www.flawlesscode.com/
Web Services: http://dnnsilverlight.adefwebserver.com/Silverlight20/SilverlightWebservice/tabid/66/Default.aspx

Is your site not listed? Post a comment here and I will add it if it’s Silverlight focused!

Thank you,
--Mike Snow

Silverlight Tip of the Day #6: Monitoring for Keyboard and Mouse Events.

Nguyễn Thị Như Quỳnh — Wed, 29 Jul 2009 16:21:36 GMT

Current revision posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 7/30/2009 12:21:36 AM

Silverlight Tip of the Day #6: Monitoring for Keyboard and Mouse Events.

Filed under: Silverlight

Silverlight 2 cung cấp đầy đủ các hỗ trợ event handling dành cho keyboard và mouse . Bạn không những có thể giám sát các event của toàn bộ ứng dụng mà bạn còn có thể giám sát chúng tại các mức điều khiển riêng lẻ khác.

Sau đây là một ví dụ cho biết làm cách nào để giám sát tất cả những sự kiện xuất phát từ bàn phím và chuột trong ứng dụng:

Page.xaml.cs:

namespace SilverlightApplication
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
 
            this.KeyDown                += new KeyEventHandler(Page_KeyDown);
            this.KeyUp                  += new KeyEventHandler(Page_KeyUp);
            this.MouseEnter             += new MouseEventHandler(Page_MouseEnter);
            this.MouseLeave             += new MouseEventHandler(Page_MouseLeave);
            this.MouseLeftButtonDown    += new MouseButtonEventHandler(Page_MouseLeftButtonDown);
            this.MouseLeftButtonUp      += new MouseButtonEventHandler(Page_MouseLeftButtonUp);
            this.MouseMove              += new MouseEventHandler(Page_MouseMove);
        }
 
        void Page_KeyDown(object sender, KeyEventArgs e)
        {
        }
 
        void Page_KeyUp(object sender, KeyEventArgs e)
        {
        }
 
        void Page_MouseEnter(object sender, MouseEventArgs e)
        {
        }
 
        void Page_MouseLeave(object sender, MouseEventArgs e)
        {
        }
 
        void Page_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
        }
 
        void Page_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
        }
 
        void Page_MouseMove(object sender, MouseEventArgs e)
        {
        }
    }
}

Để giám sát các điều khiển tại các mức khác, bạn sẽ phải thêm trực tiếp một event handler vào trong các control của XAML. Trong ví dụ sau, chúng ta sẽ thêm event handle button mouse left down và mouse left up vào <Textblock> control.

Page.xaml:

<UserControl x:Class="SilverlightApplication6.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <TextBlock x:Name="FPS" MouseLeftButtonDown="FPS_MouseLeftButtonDown" 
                   MouseLeftButtonUp="FPS_MouseLeftButtonUp">Hello there</TextBlock>
    </Grid>
</UserControl>

Page.xaml.cs:

namespace SilverlightApplication
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
        }
 
        private void FPS_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            FPS.Text = "Mouse button down";
        }
 
        private void FPS_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            FPS.Text = "Mouse button up";
        }
    }
}

Thank you,

--Mike Snow

Silverlight Tip of the Day #6: Monitoring for Keyboard and Mouse Events.

Nguyễn Thị Như Quỳnh — Wed, 29 Jul 2009 16:21:36 GMT

Revision 1 posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 7/30/2009 12:21:36 AM

Sau đây là một ví dụ cho biết làm cách nào để giám sát tất cả những sự kiện xuất phát từ bàn phím và chuột trong ứng dụng:

Page.xaml.cs:

namespace SilverlightApplication
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
 
            this.KeyDown                += new KeyEventHandler(Page_KeyDown);
            this.KeyUp                  += new KeyEventHandler(Page_KeyUp);
            this.MouseEnter             += new MouseEventHandler(Page_MouseEnter);
            this.MouseLeave             += new MouseEventHandler(Page_MouseLeave);
            this.MouseLeftButtonDown    += new MouseButtonEventHandler(Page_MouseLeftButtonDown);
            this.MouseLeftButtonUp      += new MouseButtonEventHandler(Page_MouseLeftButtonUp);
            this.MouseMove              += new MouseEventHandler(Page_MouseMove);
        }
 
        void Page_KeyDown(object sender, KeyEventArgs e)
        {
        }
 
        void Page_KeyUp(object sender, KeyEventArgs e)
        {
        }
 
        void Page_MouseEnter(object sender, MouseEventArgs e)
        {
        }
 
        void Page_MouseLeave(object sender, MouseEventArgs e)
        {
        }
 
        void Page_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
        }
 
        void Page_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
        }
 
        void Page_MouseMove(object sender, MouseEventArgs e)
        {
        }
    }
}

Page.xaml:

<UserControl x:Class="SilverlightApplication6.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <TextBlock x:Name="FPS" MouseLeftButtonDown="FPS_MouseLeftButtonDown" 
                   MouseLeftButtonUp="FPS_MouseLeftButtonUp">Hello there</TextBlock>
    </Grid>
</UserControl>

Page.xaml.cs:

namespace SilverlightApplication
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
        }
 
        private void FPS_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            FPS.Text = "Mouse button down";
        }
 
        private void FPS_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            FPS.Text = "Mouse button up";
        }
    }
}

Thank you,

--Mike Snow

Silverlight Tip of the Day #3: Silverlight Game Support, Limitations and Workarounds

Nguyễn Thị Như Quỳnh — Wed, 29 Jul 2009 16:20:40 GMT

Current revision posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 7/30/2009 12:20:40 AM

Silverlight Tip of the Day #3: Silverlight Game Support, Limitations and Workarounds

Khi khai thác những kỹ thuật của Silverlight trong phát triển các ứng dụng game, tôi đã phát hiện ra một số cách để khắc phục những khó khăn gặp phải. Tôi dự định sử dụng blog này để theo dõi những vấn đề này với hi vọng có thể giúp bạn tiết kiệm thời gian nếu bạn cũng nghiên cứu như tôi. Ngoài ra, tôi đã thêm một phần game resource, để đặt những đường liên kết tới các game tutorial ứng dụng Silverlight khác.

Nếu bạn khám phá bất kỳ chi tiết nào khác, xin vui lòng gửi cho tôi và tôi sẽ post bài của bạn ! Cảm ơn bạn.

Game Resources

Silverlight Hỗ Trợ:

Định dạng file JPG và PNG.
Transparency through PNG files.
Keyboard và mouse input
Sound
Game UI layout through Grid elements.
Timers (animating, game loop, etc.)
Texture blending through Opacity.
Socket/TCP programming for multi-player networking support
Events (clicking, etc.)
Animation - WPF model that uses timers instead of frames.
Great debugging support through Visual Studio.

Silverlight Không Hỗ Trợ:

Định dạng file GIF or BMP.

Cách khắc phục: Sử dụng file định dạng PNG (hay JPG).

Tạo hình ảnh từ những tập hợp con của những hình ảnh lớn hơn.

Cách khắc phục: Bạn có hai cách:

1. Thiết lập một khu vực riêng dành cho hình ảnh như là bạn chỉ hiển thị một phần của hình ảnh mà bạn muốn hiển thị.

2. Đặt mỗi hình ảnh trong tập tin riêng của chúng. Nhưng khó khăn cho những công việc như là những chuyển động của các yêu tinh, điều này có nghĩa là phải có rất nhiều file riêng. Rất khó để quản lý.

Lưu file cục bộ - Vì còn liên quan đến security, Silverlight 2.0 không hỗ trợ saving. Sẽ có nói về sự hỗ trợ SaveFileDialog trong tương lai và tôi sẽ theo dõi vấn đề này chặt chẽ để cho bạn biết những gì tôi nghiên cứu được. Tôi cần nét riêng này (chỉnh sửa bản đồ)!

Cách khắc phục: Lưu tại một web server. Xem Michael Sync's blog tại đây: http://michaelsync.net/category/silverlight bên dưới "Uploading with Silveright 2 Beta 1 and WCF"

Những giá trị dấu chấm động cho các vị trí - Nếu bạn ghép các hình với nhau tạo thành 1 bản đồ, chúng sẽ tự động đổi vị trí các điểm X và Y trên bản đồ thành các giá trị thập phân , bạn sẽ nhìn thấy những đường line được tạo thành giữa những miếng ghép.

Cách khắc phục: Sử dụng làm tròn giá trị.

Chỉnh sửa các điểm ảnh bitmap, lọc ảnh (color matrix, vv....) và những hiệu ứng (blur, glow, vv...).

Cách khắc phục: Dựa vào opacity bạn có thể tạo ra những hiệu ứng thật đẹp, thật cool như là tạo nên sự pha trộn thật mềm mượt liên tục giữa những mảnh ghép bản đồ. Xem ví dụ tại đây tutorial .

Trình diễn 3D - Silverlight 2 không hỗ trợ 3D. Tuy nhiên, hãy xem Tip of the Day #71 trên Silverlight 3. Bạn sẽ được hỗ trợ về 3D tại đây.

Cách khắc phục: Tại đây có những engines và demos về 3D rất tuyệt. Thí dụ:

1. http://www.markdawson.org/kit3d/

2. http://www.codeplex.com/Balder

Chia sẻ các nguồn lực là không được phép. Ví dụ, chia sẻ một SolidColorBrush giữa các hình chữ nhật. Nếu bạn có hình chữ nhật 1000, chúng sẽ cần phải có tất cả các brush riêng biệt cho mỗi hình chữ nhật.

• Căn chỉnh cho văn bản trong Textboxes.

Cách khắc phục: Bạn sẽ phải programmatically center nó.

Thank you,
--Mike Snow

Silverlight Tip of the Day #3: Silverlight Game Support, Limitations and Workarounds

Nguyễn Thị Như Quỳnh — Mon, 13 Apr 2009 22:12:43 GMT

Revision 2 posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 4/14/2009 6:12:43 AM

Silverlight Tip of the Day #3: Silverlight Game Support, Limitations and Workarounds

Nếu bạn khám phá bất kỳ chi tiết nào khác, xin vui lòng gửi cho tôi và tôi sẽ post bài của bạn ! Cảm ơn bạn.<o:p></o:p>

Game Resources<o:p></o:p>

Silverlight Games 101 by Bill Reiss <o:p></o:p>
Refactor by Joel Neubeck. <o:p></o:p>
Silverlight Game Programming Tutorial by Matthew Casperson <o:p></o:p>
2D Game Development by Mike Gold. <o:p></o:p>
Andy Beaulieu <o:p></o:p>
Silverlight Games by Roger Guess <o:p></o:p>
Developer Fusion <o:p></o:p>

Silverlight Hỗ Trợ:<o:p></o:p>

Định dạng file JPG và PNG. <o:p></o:p>
Transparency through PNG files. <o:p></o:p>
Keyboard và mouse input <o:p></o:p>
Sound <o:p></o:p>
Game UI layout through Grid elements. <o:p></o:p>
Timers (animating, game loop, etc.) <o:p></o:p>
Texture blending through Opacity. <o:p></o:p>
Socket/TCP programming for multi-player networking support <o:p></o:p>
Events (clicking, etc.) <o:p></o:p>
Animation - WPF model that uses timers instead of frames. <o:p></o:p>
Great debugging support through Visual Studio. <o:p></o:p>

Silverlight Không Hỗ Trợ:<o:p></o:p>

Định dạng file GIF or BMP. <o:p></o:p>

Cách khắc phục: Sử dụng file định dạng PNG (hay JPG). <o:p></o:p>

Tạo hình ảnh từ những tập hợp con của những hình ảnh lớn hơn. <o:p></o:p>

Cách khắc phục: Bạn có hai cách: <o:p></o:p>

1.  Thiết lập một khu vực riêng dành cho hình ảnh như là bạn chỉ hiển thị một phần của hình ảnh mà bạn muốn hiển thị.<o:p></o:p>

2.  Đặt mỗi hình ảnh trong tập tin riêng của chúng. Nhưng khó khăn cho những công việc như là những chuyển động của các yêu tinh, điều này có nghĩa là phải có rất nhiều file riêng. Rất khó để quản lý. <o:p></o:p>

Lưu file cục bộ - Vì còn liên quan đến security, Silverlight 2.0 không hỗ trợ saving. Sẽ có nói về sự hỗ trợ SaveFileDialog trong tương lai và tôi sẽ theo dõi vấn đề này chặt chẽ để cho bạn biết những gì tôi nghiên cứu được. Tôi cần nét riêng này (chỉnh sửa bản đồ)đồ)! <o:p></o:p>

Cách khắc phục: Lưu tại một web server. Xem Michael Sync's blog tại đây: ây: http://michaelsync.net/category/silverlight bên dưới "Uploading with Silveright 2 Beta 1 and WCF" <o:p></o:p>

Những giá trị dấu chấm động cho các vị trí – - Nếu bạn ghép các hình với nhau tạo thành 1 bản đồ, chúng sẽ tự động đổi vị trí các điểm X và Y trên bản đồ thành các giá trị thập phân , bạn sẽ nhìn thấy những đường line được tạo thành giữa những miếng ghép. <o:p></o:p>

Cách khắc phục: Sử dụng làm tròn giá trị.<o:p></o:p>

Chỉnh sửa các điểm ảnh bitmap, lọc ảnh (color matrix, vv….) vv....) và những hiệu ứng (blur, glow, vv…). <o:p></o:p>vv...).

Trình diễn 3D – - Silverlight 2 không hỗ trợ 3D. Tuy nhiên, ên, hãy xem Tip of the Day #71 trên Silverlight 3. Bạn sẽ được hỗ trợ về 3D tại đây. <o:p></o:p>ây.

Cách khắc phục: Tại đây có những engines và demos về 3D rất tuyệt. Thí dụ:<o:p></o:p>

1.  http://www.markdawson.org/kit3d/ <o:p></o:p>

2.  http://www.codeplex.com/Balder <o:p></o:p>

•

Chia sẻ các nguồn lực là không được phép. Ví dụ, chia sẻ một SolidColorBrush giữa các hình chữ nhật. Nếu bạn có hình chữ nhật 1000, chúng sẽ cần phải có tất cả các brush riêng biệt cho mỗi hình chữ nhật. <o:p></o:p>

• Căn chỉnh cho văn bản trong Textboxes.<o:p></o:p>

Cách khắc phục: Bạn sẽ phải programmatically center nó.<o:p></o:p>ó.

Thank you,
--Mike Snow <o:p></o:p>

Silverlight Tip of the Day #3: Silverlight Game Support, Limitations and Workarounds

Nguyễn Thị Như Quỳnh — Mon, 13 Apr 2009 22:10:22 GMT

Revision 1 posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 4/14/2009 6:10:22 AM

Nếu bạn khám phá bất kỳ chi tiết nào khác, xin vui lòng gửi cho tôi và tôi sẽ post bài của bạn ! Cảm ơn bạn.<o:p></o:p>

Game Resources<o:p></o:p>

Silverlight Games 101 by Bill Reiss <o:p></o:p>
Refactor by Joel Neubeck. <o:p></o:p>
Silverlight Game Programming Tutorial by Matthew Casperson <o:p></o:p>
2D Game Development by Mike Gold. <o:p></o:p>
Andy Beaulieu <o:p></o:p>
Silverlight Games by Roger Guess <o:p></o:p>
Developer Fusion <o:p></o:p>

Silverlight Hỗ Trợ:<o:p></o:p>

Định dạng file JPG và PNG. <o:p></o:p>
Transparency through PNG files. <o:p></o:p>
Keyboard và mouse input <o:p></o:p>
Sound <o:p></o:p>
Game UI layout through Grid elements. <o:p></o:p>
Timers (animating, game loop, etc.) <o:p></o:p>
Texture blending through Opacity. <o:p></o:p>
Socket/TCP programming for multi-player networking support <o:p></o:p>
Events (clicking, etc.) <o:p></o:p>
Animation - WPF model that uses timers instead of frames. <o:p></o:p>
Great debugging support through Visual Studio. <o:p></o:p>

Silverlight Không Hỗ Trợ:<o:p></o:p>

Định dạng file GIF or BMP. <o:p></o:p>

Cách khắc phục: Sử dụng file định dạng PNG (hay JPG). <o:p></o:p>

Tạo hình ảnh từ những tập hợp con của những hình ảnh lớn hơn. <o:p></o:p>

Cách khắc phục: Bạn có hai cách: <o:p></o:p>

1. Thiết lập một khu vực riêng dành cho hình ảnh như là bạn chỉ hiển thị một phần của hình ảnh mà bạn muốn hiển thị.<o:p></o:p>

2. Đặt mỗi hình ảnh trong tập tin riêng của chúng. Nhưng khó khăn cho những công việc như là những chuyển động của các yêu tinh, điều này có nghĩa là phải có rất nhiều file riêng. Rất khó để quản lý. <o:p></o:p>

Lưu file cục bộ - Vì còn liên quan đến security, Silverlight 2.0 không hỗ trợ saving. Sẽ có nói về sự hỗ trợ SaveFileDialog trong tương lai và tôi sẽ theo dõi vấn đề này chặt chẽ để cho bạn biết những gì tôi nghiên cứu được. Tôi cần nét riêng này (chỉnh sửa bản đồ)! <o:p></o:p>

Cách khắc phục: Lưu tại một web server. Xem Michael Sync's blog tại đây: http://michaelsync.net/category/silverlight bên dưới "Uploading with Silveright 2 Beta 1 and WCF" <o:p></o:p>

Những giá trị dấu chấm động cho các vị trí – Nếu bạn ghép các hình với nhau tạo thành 1 bản đồ, chúng sẽ tự động đổi vị trí các điểm X và Y trên bản đồ thành các giá trị thập phân , bạn sẽ nhìn thấy những đường line được tạo thành giữa những miếng ghép. <o:p></o:p>

Cách khắc phục: Sử dụng làm tròn giá trị.<o:p></o:p>

Chỉnh sửa các điểm ảnh bitmap, lọc ảnh (color matrix, vv….) và những hiệu ứng (blur, glow, vv…). <o:p></o:p>

Trình diễn 3D – Silverlight 2 không hỗ trợ 3D. Tuy nhiên, hãy xem Tip of the Day #71 trên Silverlight 3. Bạn sẽ được hỗ trợ về 3D tại đây. <o:p></o:p>

Cách khắc phục: Tại đây có những engines và demos về 3D rất tuyệt. Thí dụ:<o:p></o:p>

1. http://www.markdawson.org/kit3d/ <o:p></o:p>

2. http://www.codeplex.com/Balder <o:p></o:p>

• Chia sẻ các nguồn lực là không được phép. Ví dụ, chia sẻ một SolidColorBrush giữa các hình chữ nhật. Nếu bạn có hình chữ nhật 1000, chúng sẽ cần phải có tất cả các brush riêng biệt cho mỗi hình chữ nhật. <o:p></o:p>

• Căn chỉnh cho văn bản trong Textboxes.<o:p></o:p>

Cách khắc phục: Bạn sẽ phải programmatically center nó.<o:p></o:p>

Thank you,
--Mike Snow <o:p></o:p>

Silverlight Tip of the Day #46 – Font Support in Silverlight

Nguyễn Thị Như Quỳnh — Wed, 29 Jul 2009 16:17:09 GMT

Current revision posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 7/30/2009 12:17:09 AM

Những Font mặc định:

Mặc định, Silverlight hỗ trợ những phông chữ cục bộ sau (hiển thị được trong Silverlight):

Bạn cũng có thể chọn từ một danh sách dài của những phông chữ của East Asian (Đông Á) nếu nó có trong máy cục bộ của bạn.

Batang
BatangChe
DFKai-SB
Dotum
DutumChe
FangSong
GulimChe
Gungsuh
GungsuhChe
KaiTi
Malgun Gothic
Meiryo
Microsoft JhengHei
Microsoft YaHei
MingLiU
MingLiu_HKSCS
MingLiu_HKSCS-ExtB
MingLiu-ExtB
MS Gothic
MS Mincho
MS PGothic
MS PMincho
MS UI Gothic
NSimSun
NSimSun-18030
PMingLiU
PMingLiu-ExtB
SimHei
SimSun
SimSun-18030
SimSun-ExtB

Những Font tùy chọn:

Ngoài các phông chữ mặc định người dùng có thể sử dụng phông chữ của riêng họ tạo ra hay các phông chữ được mua từ nơi khác . Hãy chắc chắn là bạn có quyền hợp pháp để sử dụng những phông chữ này trong ứng dụng của bạn.

Các bước bạn cần phải áp dụng để nhập phông chữ và sử dụng một phông chữ tùy chọn là:

Click chuột phải trên thư mục Silverlight application project của bạn trong cửa sổ Solution Explorer, sau đó chọn “Add->New Item…”
Tìm font của bạn ở nơi mà bạn lưu nó , chọn nó và click vào nút OK.
Click một lần để bôi đen chọn font, trong của sổ property gán thuộc tính Build Action = “Resource” và “Copy to Output Directory” = “Copy if newer”:
Nào, bây giờ trong trang chứa mã XAML của bạn, để tham khảo một phông chữ trong một phàn tử như là TextBlock, hãy sử dụng cú pháp trong thuộc tính FontFamily như là mã XAML được bôi màu vàng dưới đây- FontFamily=”[FontFileName]#[FontFriendlyName]”

Thí dụ: <TextBlock Text="Hi" FontFamily="Century.ttf#Century"></TextBlock>
Để lấy chính xác tên của phông chữ mà bạn cần biết, chỉ cần nhấp đôi chuột trên phông chữ đó trong cửa sổ solution explorer để mở ra hộp thoại font viewer như sau:

Supported Types: Những loại được hỗ trợ.

Những loại sau được hỗ trợ khi người sử dụng thêm vào là : TTF, ODTTF and OTF. Silverlight sẽ không chấp nhận những loại phông chữ khác như là FON và TTC mà được thêm vào từ người sử dụng. Tuy nhiên, nếu hệ thống đã có những phông chữ này, chúng sẽ được chấp nhận.

Lưu ý bổ sung:

Bạn có lẽ có lưu ý là từ Tip of the Day #45 rằng Silverlight cung cấp một tùy chọn cho định dạng văn bản là FontStretch mà nó cho phép bạn kéo giãn phông chữ. Tuy nhiên, khi áp dụng những phông chữ thông thường như “Arial”, “Verdana”, “Times New Roman”, vv...... bạn nên chú ý là không có gì xảy ra. Có điều này bởi vì Silverlight không thực hiện kéo giãn. Tùy chọn này được áp dụng cho những phông được hỗ trợ riêng biệt mình nó như là những phông chữ Adobe Open type (OTF) .

Thank you,
--Mike Snow

Silverlight Tip of the Day #45: Text Formatting with the TextBlock control

Nguyễn Thị Như Quỳnh — Wed, 29 Jul 2009 15:47:46 GMT

Current revision posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 7/29/2009 11:47:46 PM

Silverlight mang đến một control rất hữu dụng được gọi là TextBlock. Control này cho phép bạn hiển thị những văn bản chỉ dùng để đọc. HIển thị văn bản dựa vào control này rất dễ dàng và đơn giản như sau:

Ngoài ra, còn có các thuộc tính đi kèm theo control này mà bạn có thể chọn, để định dạng văn bản hiển thị theo như ý muốn của bạn. Bao gồm:

1. FontFamily. Các kiểu chữ, bạn có thể chọn theo tên font chữ, giống như sau.

<TextBlock FontFamily="Courier New">Hello There</TextBlock>
<TextBlock FontFamily="Times New Roman" Canvas.Top="10">Hello There</TextBlock>
<TextBlock FontFamily="Verdana" Canvas.Top="20">Hello There</TextBlock>

2. FontSize. Kích cỡ chữ theo đơn vị pixel.

<TextBlock FontSize="10">Hello There</TextBlock>
<TextBlock FontSize="20" Canvas.Top="20">Hello There</TextBlock>
<TextBlock FontSize="30" Canvas.Top="50">Hello There</TextBlock>

2 FontStretch. (tỉ lệ phông chữ) Tùy chọn là :

Font stretch	usWidthClass	% of normal
UltraCondensed	1	50.0%
ExtraCondensed	2	62.5%
Condensed	3	75.0%
SemiCondensed	4	87.5%
Normal	5	100%
SemiExpanded	6	112.5%
Expanded	7	125.0%
ExtraExpanded	8	150.0%
UltraExpanded	9	200.0%

Lưu ý là những hỗ trợ tùy chọn trên còn tùy thuộc vào loại phông chữ mà bạn đang sử dụng nữa nhé.

3. FontWeight. Tùy chọn bao gồm : Thin, ExtraLight, Light, Normal, Medium, SemiBold, Bold, ExtraBold, Black, ExtraBlack.

Lưu ý là những hỗ trợ tùy chọn trên còn tùy thuộc vào loại phông chữ mà bạn đang sử dụng nữa nhé.

4 FontStyle: Tùy chọn bao gồm: Normal, Italic

5. Foreground. Thuộc tính này cho phép bạn thay đổi màu sắc của phông chữ. Bạn có thể sử dụng bao gồm những brush như solid color (một màu nào đó và chỉ màu đó thôi còn gọi là màu rắn) , gradient (màu đậm nhạt theo kiểu nghệ thuật) , hình ảnh hoặc video brush để tạo ra nhiều hiệu ứng.

6. TextDecorations. Môt văn bản được trang trí là văn bản dùng để thu hút sự chú ý của người đọc mà bạn có thể thêm hiệu ứng này cho văn bản của bạn. Hiện tại chỉ hỗ trợ hiệu ứng gạch dưới văn bản là "underline".

<TextBlock TextDecorations="underline">Hi there</TextBlock>

7. Runs. Cuối cùng, bạn có thể liên kết chạy những phần khác nhau của phần định dạng văn bản trong cùng một TextBlock bằng cách sử dụng phần tử Run . Thí dụ, bạn có thể hiển thị một string như thế này:

<TextBlock>
    <Run FontWeight="Bold">Hello There.</Run>
    <Run Foreground="Red">How are you?</Run>
    <Run FontStyle="Italic">I am fine thanks!</Run>
    <Run>漢字</Run>
</TextBlock>

Thank you,
--Mike Snow

Silverlight Tip of the Day #43: Making it Snow in Silverlight

Nguyễn Thị Như Quỳnh — Wed, 29 Jul 2009 07:30:42 GMT

Current revision posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 7/29/2009 3:30:42 PM

Silverlight Tip of the Day #43: Making it Snow in Silverlight

Filed under: Silverlight

Tôi không say mê mùa đông vì mùa hè là mùa yêu thích của tôi. Tuy nhiên, sáng nay tôi đã thức dậy và đã nghe trời sắp có tuyết trên những đỉnh núi (Cascades) và tạo cảm hứng thú vị nho nhỏ trong tôi là tạo một khung cảnh có tuyết rơi trong Silverlight.

Demo:

Screenshot:

Bên phải là một công cụ cho phép bạn :

Điều chỉnh dung lượng của tuyết.
Điều chỉnh tốc độ gió (bên trái bên phải).

Tôi nhận thấy ứng dụng đã được nhiều người xây dựng trên bản beta2 và sau đó là bản RTM. Vì vậy, nếu bạn sử dụng bản beta 2, tôi khuyên bạn nên thận trọng khi tăng khối lựng lượng tuyết

Để làm demo này, hãy thực hiện theo những bước sau:

Bước 1. Tạo một ứng dụng Silverlight Application Project sử dụng Visual Studio 2008. (Hãy xem cụ thể tại Tip of the Day #2 cho cụ thể) ).

Bước 2. Thêm hình sau vào Silverlight Application project của bạn :

Click Here to Download

Bước 3. Thêm mới một Silverlight User Control vào ứng dụng Silverlight Application của bạn và gọi nó là SnowFlake.xaml. Để làm điều này, click chuột phải trên ứng dụng Silverlight của bạn trong cửa sổ Solution Explorer. Chọn “Add->New Item…”. Chọn “Silverlight User Control” thay đổi Name thành “Snowflake.xaml” và nhấn nút OK.

Bước 4. Thay đổi code XAML của trang Snowflake.xaml của bạn như sau:

<UserControl x:Class="Snowflakes.SnowFlake"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Image x:Name="Flake" Source="snowflake.png">
        <Image.RenderTransform>
            <ScaleTransform x:Name="SnowScale" ScaleX="0.25" ScaleY="0.25"></ScaleTransform>
        </Image.RenderTransform>
    </Image>
</UserControl>

Chúng ta chủ yếu thêm vào một hình ảnh đại diện cho một hoa tuyết. Vì hình hoa tuyết gốc lớn hơn là tôi tưởng, tôi đã thay đổi tỉ lệ để nó chỉ hiển thị kích thước là 0.25 (1/4) so với kích thước bình thường của nó bằng cách sử dụng một ScaleTranform.

Bước 5. Trong phần code phía sau của snowflake (Snowflake.xaml.cs) chúng ta sẽ thêm một điều cần thiết để làm cho hoa tuyết rơi xuống. Tất cả những điều cần thiết chúng ta phải làm là:

Chọn tọa độ là Left, Top cho hoa tuyết . Và các hoa tuyết sẽ được ngẫu nhiên thay đổihướng từ 1 đến 50 hướng.
Khi những hoa tuyết từ tọa độ Top có giá trị bằng giá trị floor value (764 như các hình ảnh của tôi ), hay khi nó bắt đầu đến hết cửa sổ chúng ta sẽ gán Completed = true. Vòng lặp chính của chúng ta trong Page.xaml.cs sẽ được dọn sạch tất cả các bông tuyết với thuộc tính Completed được gán là true.
Khi chúng ta tạo các hoa tuyết, chúng ta ngẫu nhiên thay đổi tỉ lệ lên hay xuống một chút để tạo một cái nhìn sâu sắc hơn.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
 
namespace Snowflakes
{
    public partial class SnowFlake : UserControl
    {
        double _posLeft = 0.0;
        double _posTop = 0.0;
        double _floorValue = 764;
        int seed = DateTime.Now.Millisecond;
        Random _rand = new Random(DateTime.Now.Millisecond);
        private bool _completed = false;
 
        double _horzInc = 0.0;
 
        public bool Completed
        {
            get { return _completed; }
        }
 
        public SnowFlake(double left, double top)
        {
            InitializeComponent();
 
            _posLeft = left;
            _posTop = top;
 
            this.SetValue(Canvas.LeftProperty, _posLeft);
            this.SetValue(Canvas.TopProperty, _posTop);
 
            Random rndSize = new Random(DateTime.Now.Millisecond);
            SnowScale.ScaleX = SnowScale.ScaleY = 0.05 * rndSize.Next(1, 6);
 
        }      
        
        public void Fall(double windValue)
        {
            int value = _rand.Next(50);
 
            if (value == 25) //  1 in 50 change to change direction
            {
                if (_horzInc >= 0.2)
                    _horzInc = 0;
                else if (_horzInc <= -0.2)
                    _horzInc = 0;
                else
                {
                    value = _rand.Next(3);
                    if (value == 1) _horzInc = 0.2;
                    else if (value == 2) _horzInc = -0.2;
                    else if (value > 0) _horzInc = 0.0;
                }
            }
            
            double horzValue = _horzInc + (windValue * 0.1);
            
            _posLeft += horzValue;
               
            this.SetValue(Canvas.LeftProperty, _posLeft);
            this.SetValue(Canvas.TopProperty, _posTop++);
 
            _completed = (_posLeft >= 1019 || _posLeft <= 0 || _posTop >= _floorValue);
        }
    }
}

Bước 6: Trở lại trang Page.xaml.cs chúng ta sẽ thêm một timer để di chuyển hay tạo các hoa tuyết. Khi di chuyển các hoa tuyết , chúng ta kiểm tra để xem nếu các hoa tuyết có Completed = true. Nếu như thế, chúng ta thêm nó vào một array để gỡ bỏ. Khi chúng ta tạo những hoa tuyết, chúng ta tạo chúng dọc theo chiều của trang giấy từ trên xuống . Tuy nhiên, nếu có gió chúng ta cũng cần tạo chúng rơi từ bên trái hay từ bên phải của cảnh bay qua lại theo hướng gió.

Sau đây là code cho trang Page.xaml.cs bao gồm những đoạn mã cần thiết cho việc xử lý thanh công cụ:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
 
namespace Snowflakes
{
    public partial class Page : UserControl
    {
        List<SnowFlake> _snowFlakes = new List<SnowFlake>();
        Storyboard _snowflakeTimer = new Storyboard();
        Random _rand = new Random(DateTime.Now.Millisecond);
        int _newFlakeCount = 2;
        int _wind = 0;
 
        public Page()
        {
            InitializeComponent();
 
            _snowflakeTimer.Duration = TimeSpan.FromMilliseconds(10);
            _snowflakeTimer.Completed += new EventHandler(SnowFlakeTimer);
            _snowflakeTimer.Begin();
        }
 
        private void SnowFlakeTimer(object sender, EventArgs e)
        {
            MoveSnowFlakes();
            CreateSnowFlakes();
        }
 
        private void MoveSnowFlakes()
        {
            List<SnowFlake> _flakesToRemove = new List<SnowFlake>();
         
            foreach (SnowFlake flake in _snowFlakes)
            {
                flake.Fall(_wind);
                if (true == flake.Completed)
                    _flakesToRemove.Add(flake);
            }
            foreach (SnowFlake flake in _flakesToRemove)
            {
                _snowFlakes.Remove(flake);
                SnowCanvas.Children.Remove(flake);
            }
            _snowflakeTimer.Begin();
        }    
 
        private void CreateSnowFlakes()
        {
            TotalCount.Text = "Total Snowflakes = " + _snowFlakes.Count;
          
            int count = _rand.Next(0, _newFlakeCount);
            for (int i = 0; i < count; i++)
            {
                SnowFlake flake = new SnowFlake(_rand.Next(0, 1020), 0.0);
                _snowFlakes.Add(flake);
                SnowCanvas.Children.Add(flake);
            }
            if (_wind < 0)
            {
                for (int i = 0; i < count; i++)
                {
                    SnowFlake flake = new SnowFlake(1010, _rand.Next(0, 700));
                    _snowFlakes.Add(flake);
                    SnowCanvas.Children.Add(flake);
                }
            }
            else if (_wind > 0)
            {
                for (int i = 0; i < count; i++)
                {
                    SnowFlake flake = new SnowFlake(0, _rand.Next(0, 700));
                    _snowFlakes.Add(flake);
                    SnowCanvas.Children.Add(flake);
                }
            }
        }
 
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            Application.Current.Host.Content.IsFullScreen = true;
        }
 
        private void Slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            if (null != Volume)
            {
                _newFlakeCount = (int)Volume.Value;
                VolumeValue.Text = _newFlakeCount.ToString();
            }
        }
 
        private void Wind_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            if (null != Wind)
            {
                _wind = (int)Wind.Value;
                WindValue.Text = _wind.ToString();
            }
        }
    }
}

Bước 7: Sau đây là code dành cho thanh công cụ chúng ta đặt trong trang Page.xaml:

<UserControl x:Class="Snowflakes.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="1020" Height="768">
    <Canvas x:Name="SnowCanvas" Width="1020" Height="768" Background="Black">
        <Image Width="1020"  Source="Scene.jpg"></Image>
        <TextBlock Canvas.Left="1022" x:Name="TotalCount" Foreground="White">Total Snowflakes</TextBlock>
        <TextBlock Canvas.Left="1022" Canvas.Top="30" Foreground="White">Volume</TextBlock>
        <Slider x:Name="Volume" Value="3" ValueChanged="Slider_ValueChanged" Canvas.Left="1110" Canvas.Top="30"  Minimum="0" Maximum="10" Width="100"></Slider>        
        <TextBlock  Canvas.Left="1210" Canvas.Top="30" Foreground="White" x:Name="VolumeValue">2</TextBlock>
       
        <TextBlock Canvas.Left="1022" Canvas.Top="60" Foreground="White">Wind</TextBlock>
        <Slider x:Name="Wind" Value="0" ValueChanged="Wind_ValueChanged" Canvas.Left="1110" Canvas.Top="60"  Minimum="-50" Maximum="50" Width="100"></Slider>
        <TextBlock  Canvas.Left="1210" Canvas.Top="60" Foreground="White" x:Name="WindValue">0</TextBlock>
        <Button Canvas.Left="1022" Canvas.Top="100" Content="Full Screen" Click="Button_Click"></Button>
    </Canvas>
</UserControl>
 

Cuối cùng, bạn đã có một khung cảnh tuyết đẹp và lãng mạn để thưởng thức!

Thank you,
--Mike Snow

Silverlight Tip of the Day #43: Making it Snow in Silverlight

Nguyễn Thị Như Quỳnh — Wed, 29 Jul 2009 07:22:46 GMT

Revision 1 posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 7/29/2009 3:22:46 PM

Demo:

Screenshot:

Bên phải là một công cụ cho phép bạn :

Điều chỉnh dung lượng của tuyết.
Điều chỉnh tốc độ gió (bên trái bên phải).

Tôi nhận thấy ứng dụng đã được nhiều người xây dựng trên bản beta2 và sau đó là bản RTM. Vì vậy, nếu bạn sử dụng bản beta 2, tôi khuyên bạn nên thận trọng khi tăng khối lựng tuyết

Để làm demo này, hãy thực hiện theo những bước sau:

Bước 1. Tạo một ứng dụng Silverlight Application Project sử dụng Visual Studio 2008. (Hãy xem Tip of the Day #2 cho cụ thể).

Bước 2. Thêm hình sau vào Silverlight Application project của bạn :

Click Here to Download

Bước 4. Thay đổi code XAML của trang Snowflake.xaml của bạn như sau:

<UserControl x:Class="Snowflakes.SnowFlake"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Image x:Name="Flake" Source="snowflake.png">
        <Image.RenderTransform>
            <ScaleTransform x:Name="SnowScale" ScaleX="0.25" ScaleY="0.25"></ScaleTransform>
        </Image.RenderTransform>
    </Image>
</UserControl>

Chọn tọa độ là Left, Top cho hoa tuyết . Và các hoa tuyết sẽ được ngẫu nhiên thay đổi hướng từ 1 đến 50.
Khi những hoa tuyết từ tọa độ Top có giá trị bằng giá trị floor value (764 như các hình ảnh của tôi ), hay khi nó bắt đầu đến hết cửa sổ chúng ta sẽ gán Completed = true. Vòng lặp chính của chúng ta trong Page.xaml.cs sẽ được dọn sạch tất cả các bông tuyết với thuộc tính Completed được gán là true.
Khi chúng ta tạo các hoa tuyết, chúng ta ngẫu nhiên thay đổi tỉ lệ lên hay xuống một chút để tạo một cái nhìn sâu sắc hơn.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
 
namespace Snowflakes
{
    public partial class SnowFlake : UserControl
    {
        double _posLeft = 0.0;
        double _posTop = 0.0;
        double _floorValue = 764;
        int seed = DateTime.Now.Millisecond;
        Random _rand = new Random(DateTime.Now.Millisecond);
        private bool _completed = false;
 
        double _horzInc = 0.0;
 
        public bool Completed
        {
            get { return _completed; }
        }
 
        public SnowFlake(double left, double top)
        {
            InitializeComponent();
 
            _posLeft = left;
            _posTop = top;
 
            this.SetValue(Canvas.LeftProperty, _posLeft);
            this.SetValue(Canvas.TopProperty, _posTop);
 
            Random rndSize = new Random(DateTime.Now.Millisecond);
            SnowScale.ScaleX = SnowScale.ScaleY = 0.05 * rndSize.Next(1, 6);
 
        }      
        
        public void Fall(double windValue)
        {
            int value = _rand.Next(50);
 
            if (value == 25) //  1 in 50 change to change direction
            {
                if (_horzInc >= 0.2)
                    _horzInc = 0;
                else if (_horzInc <= -0.2)
                    _horzInc = 0;
                else
                {
                    value = _rand.Next(3);
                    if (value == 1) _horzInc = 0.2;
                    else if (value == 2) _horzInc = -0.2;
                    else if (value > 0) _horzInc = 0.0;
                }
            }
            
            double horzValue = _horzInc + (windValue * 0.1);
            
            _posLeft += horzValue;
               
            this.SetValue(Canvas.LeftProperty, _posLeft);
            this.SetValue(Canvas.TopProperty, _posTop++);
 
            _completed = (_posLeft >= 1019 || _posLeft <= 0 || _posTop >= _floorValue);
        }
    }
}

Bước 6: Trở lại trang Page.xaml.cs chúng ta sẽ thêm một timer để di chuyển hay tạo các hoa tuyết. Khi di chuyển các hoa tuyết , chúng ta kiểm tra để xem nếu các hoa tuyết có Completed = true. Nếu như thế, chúng ta thêm nó vào một array để gỡ bỏ. Khi chúng ta tạo những hoa tuyết, chúng ta tạo chúng dọc theo chiều của trang giấy từ trên xuống . Tuy nhiên, nếu có gió chúng ta cũng cần tạo chúng từ bên trái hay từ bên phải của cảnh bay qua lại theo hướng gió.

Sau đây là code cho trang Page.xaml.cs bao gồm những đoạn mã cần thiết cho việc xử lý thanh công cụ:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
 
namespace Snowflakes
{
    public partial class Page : UserControl
    {
        List<SnowFlake> _snowFlakes = new List<SnowFlake>();
        Storyboard _snowflakeTimer = new Storyboard();
        Random _rand = new Random(DateTime.Now.Millisecond);
        int _newFlakeCount = 2;
        int _wind = 0;
 
        public Page()
        {
            InitializeComponent();
 
            _snowflakeTimer.Duration = TimeSpan.FromMilliseconds(10);
            _snowflakeTimer.Completed += new EventHandler(SnowFlakeTimer);
            _snowflakeTimer.Begin();
        }
 
        private void SnowFlakeTimer(object sender, EventArgs e)
        {
            MoveSnowFlakes();
            CreateSnowFlakes();
        }
 
        private void MoveSnowFlakes()
        {
            List<SnowFlake> _flakesToRemove = new List<SnowFlake>();
         
            foreach (SnowFlake flake in _snowFlakes)
            {
                flake.Fall(_wind);
                if (true == flake.Completed)
                    _flakesToRemove.Add(flake);
            }
            foreach (SnowFlake flake in _flakesToRemove)
            {
                _snowFlakes.Remove(flake);
                SnowCanvas.Children.Remove(flake);
            }
            _snowflakeTimer.Begin();
        }    
 
        private void CreateSnowFlakes()
        {
            TotalCount.Text = "Total Snowflakes = " + _snowFlakes.Count;
          
            int count = _rand.Next(0, _newFlakeCount);
            for (int i = 0; i < count; i++)
            {
                SnowFlake flake = new SnowFlake(_rand.Next(0, 1020), 0.0);
                _snowFlakes.Add(flake);
                SnowCanvas.Children.Add(flake);
            }
            if (_wind < 0)
            {
                for (int i = 0; i < count; i++)
                {
                    SnowFlake flake = new SnowFlake(1010, _rand.Next(0, 700));
                    _snowFlakes.Add(flake);
                    SnowCanvas.Children.Add(flake);
                }
            }
            else if (_wind > 0)
            {
                for (int i = 0; i < count; i++)
                {
                    SnowFlake flake = new SnowFlake(0, _rand.Next(0, 700));
                    _snowFlakes.Add(flake);
                    SnowCanvas.Children.Add(flake);
                }
            }
        }
 
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            Application.Current.Host.Content.IsFullScreen = true;
        }
 
        private void Slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            if (null != Volume)
            {
                _newFlakeCount = (int)Volume.Value;
                VolumeValue.Text = _newFlakeCount.ToString();
            }
        }
 
        private void Wind_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            if (null != Wind)
            {
                _wind = (int)Wind.Value;
                WindValue.Text = _wind.ToString();
            }
        }
    }
}

Bước 7: Sau đây là code dành cho thanh công cụ chúng ta đặt trong trang Page.xaml:

<UserControl x:Class="Snowflakes.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="1020" Height="768">
    <Canvas x:Name="SnowCanvas" Width="1020" Height="768" Background="Black">
        <Image Width="1020"  Source="Scene.jpg"></Image>
        <TextBlock Canvas.Left="1022" x:Name="TotalCount" Foreground="White">Total Snowflakes</TextBlock>
        <TextBlock Canvas.Left="1022" Canvas.Top="30" Foreground="White">Volume</TextBlock>
        <Slider x:Name="Volume" Value="3" ValueChanged="Slider_ValueChanged" Canvas.Left="1110" Canvas.Top="30"  Minimum="0" Maximum="10" Width="100"></Slider>        
        <TextBlock  Canvas.Left="1210" Canvas.Top="30" Foreground="White" x:Name="VolumeValue">2</TextBlock>
       
        <TextBlock Canvas.Left="1022" Canvas.Top="60" Foreground="White">Wind</TextBlock>
        <Slider x:Name="Wind" Value="0" ValueChanged="Wind_ValueChanged" Canvas.Left="1110" Canvas.Top="60"  Minimum="-50" Maximum="50" Width="100"></Slider>
        <TextBlock  Canvas.Left="1210" Canvas.Top="60" Foreground="White" x:Name="WindValue">0</TextBlock>
        <Button Canvas.Left="1022" Canvas.Top="100" Content="Full Screen" Click="Button_Click"></Button>
    </Canvas>
</UserControl>
 

Cuối cùng, bạn đã có một khung cảnh tuyết đẹp và lãng mạn để thưởng thức!

Thank you,
--Mike Snow

Silverlight Tip of the Day #42: How to Create a Web Service for your Silverlight App

Nguyễn Thị Như Quỳnh — Wed, 29 Jul 2009 06:29:31 GMT

Current revision posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 7/29/2009 2:29:31 PM

Web services ( Những dịch vụ web) đa phần là những API’s (Application programming interface: giao diện lập trình ứng dụng) mà có thể được truy cập trên một mạng như là Internet. Do vấn đề bảo mật Silverlight hạn chế nhiều tính năng quan trọng như là lưu vào đĩa. Tuy nhiện, bạn có thể lấy được những tính năng hạn chế này bằng cách thực hiện gọi web services thay vì thực hiện những tính năng này.

Bài Tip of the Day này sẽ hướng dẫn bạn thông qua từng bước bằng cách nào tạo một web service trong trang web của bạn và tôi sẽ hiển thị cho bạn thấy làm cách nào để tham khảo và thực hiện gọi API’s trong các web service đó.

Bước 1. Tạo một ứng dụng Silverlight Application Project sử dụng Visual Studio 2008. (Hãy xem Tip of the Day #2 để xem chi tiết).

Bước 2. Thêm một Web Service vào Web Site của bạn.

Trong cửa sổ Solution Explorer của bạn , click chuột phải lên nút Web Site , chọn Add-> New Item…
Có 3 mẫu cung cấp các chức năng cho Web Service :
- Silverlight-enabled WCF Service.
- WCF Service
- Web Service.

Chọn “Silverlight-enabled WCF Service” vì nó hỗ trợ cụ thể cho Silverlight mà chúng ta sẽ khảo sát trong Tip of the Day tiếp theo của chúng ta.

Thay đổi tên cho giống như “MyService.asmx” và click vào nút “Add”.

Bước 3. Thêm một Service Reference

Rebuild lại Solution của bạn (Ctrl+Shift+B). Nếu bạn chuyển sang bước kế tiếp mà không rebuild bạn sẽ gặp hộp thoại sau:

Trong cửa sổ solution explorer, click chuột phải lên nút Silverlight Application và chọn “Add Service Reference…”.
Tiếp ngay sau sẽ xuất hiện hộp thoại là “Add Service Reference”. Click vào nút “Discover” để tìm web service của bạn.
Thay đổi Namespace thành bất cứ gì bạn muốn cho reference này và click vào nút “OK”.

Vào lúc này , bạn đã thiết lập được web service của mình được tham khảo một cách thích đáng từ ứng dụng Silverlight của bạn.

Bước 4. Thực hiện gọi từ ứng dụng Silverlight của bạn vào web service của bạn.

Trong cửa sổ Solution Explorer , từ trang web của bạn mở ra MyService1.svc. Mặc định sẽ có một phương thức được gọi là DoWork(). Điều này chưa làm nhiều, vì vậy hãy thêm một hàm mới gọi là HelloWorld() mà nó sẽ trả về một chuỗi kí tự (string). Thực hiện chắc chắn bao gồm thuộc tính [OperationContract] để cho phương thức này được hiển thị:

[OperationContract]
public string HelloWorld()
{
    // Add your operation implementation here
    return "Hello World";
}

Trong ứng dụng Silverlight application project của bạn phía dưới Service References, click chuột phải lên ServiceReference1 và chọn “Update Service Reference”.

Tiếp theo, hãy thực hiện gọi từ ứng dụng Silverlight của chúng ta đến hàm HelloWorld() này. Đoạn code sau nằm trong trang Page.xaml.cs hiển thị cho bạn thấy bằng cách nào tạo một cuộc gọi bất đồng bộ đến HelloWorld().

public partial class Page : UserControl
{
    public Page()
    {
        InitializeComponent();
 
        ServiceReference1.MyService1Client client = new SilverlightApplication9.ServiceReference1.MyService1Client();
 
        client.HelloWorldCompleted += new EventHandler<SilverlightApplication9.ServiceReference1.HelloWorldCompletedEventArgs>(client_HelloWorldCompleted);
 
        client.HelloWorldAsync();
        
    }
 
    void client_HelloWorldCompleted(object sender, SilverlightApplication9.ServiceReference1.HelloWorldCompletedEventArgs e)
    {
        string message = e.Result;
    }
}

Lưu ý là tất cả các phương thức gọi web service đều được thực hiện một cách bất đồng bộ.

Thank you,
--Mike Snow

Silverlight Tip of the Day #41: Using Bookmarks in your Silverlight Application

Nguyễn Thị Như Quỳnh — Tue, 28 Jul 2009 03:43:20 GMT

Current revision posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 7/28/2009 11:43:20 AM

Bookmarks rất có ích trong các trang web, bởi vì chúng cho phép người ta có thể trực tiếp quay trở lại một section( một phiên làm việc, một lần truy cập) của trang web mà họ đã truy cập trước đó. Bài hướng dẫn này sẽ trình bày cho bạn biết làm cách nào để áp dụng và sử dụng bookmarks trong những ứng dụng Silverlight.

Thí dụ, nếu người sử dụng đánh vào dòng liên kết này http://www.MySilverlightApp.com/default.aspx#Page2 bạn sẽ ngăn việc này từ thanh địa chỉ và hiển thị trang thứ hai của ứng dụng.

Đối với demo của chúng ta, với mục đích đơn giản, chúng ta sẽ chỉ tạo mỗi trang một phần tử Canvas với một TextBlock. Ý tưởng là bạn làm cho mỗi trang của bạn một UserControl của riêng nó. Tôi đã tạo hai trang : Page 1 và Page 2.

Page.xaml:

<UserControl x:Class="SilverlightApplication14.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Canvas>
        <Canvas x:Name="Page1">
            <TextBlock>Hello there this is page 1</TextBlock>
        </Canvas>
        <Canvas x:Name="Page2" Visibility="Collapsed">
            <TextBlock>Hello there this is page 2</TextBlock>
        </Canvas>
    </Canvas>
</UserControl>

Trong hàm khởi tạo của class Page.xaml.cs chúng ta gọi hàm ProcessBookmark(). Thủ tục này sẽ tạo ra các chuỗi địa chỉ trong bookmark từ thanh địa chỉ bằng cách gọi HtmlPage.Window.CurrentBookmark; Mỗi lần chúng ta muốn đánh dấu trang thì chúng ta có thể gán Visiblity của Canvas mà chúng ta muốn hiển thị là Visible. Chú ý là chúng ta cũng có thể đánh dấu trang cho thanh tiêu đề của trình duyệt window bằng cách gọi HtmlPage.Document.SetProperty("title", _page1Title);

public partial class Page : UserControl
{
    const string _page1Title = "My Silverlight App - Page 1";
    const string _page2Title = "My Silverlight App - Page 2";
 
 
    public Page()
    {
        InitializeComponent();
        ProcessBookmark();
    }
 
 
    private void ProcessBookmark()
    {
        string bookMark = HtmlPage.Window.CurrentBookmark;
        switch (bookMark)
        {
            case "Page1":
                HtmlPage.Document.SetProperty("title", _page1Title);
                Page1.Visibility = Visibility.Visible;
                Page2.Visibility = Visibility.Collapsed;
                break;
            case "Page2":
                HtmlPage.Document.SetProperty("title", _page2Title);
                Page1.Visibility = Visibility.Collapsed;
                Page2.Visibility = Visibility.Visible;
                break;
        }
    }
}

Vậy nếu bạn muốn cài một thanh địa chỉ vào một bookmark (có nghĩa là lưu lại địa chỉ trang web)? Bạn có thể thay đổi chuỗi kí tự trong thanh địa chỉ của trình duyệt của bạn bằng cách gọi như sau: HtmlPage.Window.Eval("window.location.hash='Page1'");

Cụ thể hơn:

private void SetBookmark(string bookmark)
{
    HtmlPage.Window.Eval("window.location.hash='"+bookmark+"'");
}

Hiện tại nếu bạn nhấn nút Back để quay lại trong trình duyệt của bạn, nó sẽ đẩy bạn ra khỏi ứng dụng Silverlight của bạn. Tôi đang tìm kiếm cách để chặn nút Back và nút Forward trong trình duyệt của bạn, để ta có thể tạo một danh sách nội bộ các bookmark (history of bookmarks) cho ứng dụng Silverlight của chúng ta. Nếu bạn nào có những tài nguyên / kĩ thuật tốt về điều này, hãy cho tôi biết và tôi sẽ trình bày trên blog này.

Thank you,
--Mike Snow

Silverlight Tip of the Day #40: 1.05 != 1.05 - Peril with Floating Point Comparisons.

Nguyễn Thị Như Quỳnh — Mon, 27 Jul 2009 08:02:05 GMT

Current revision posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 7/27/2009 4:02:05 PM

Silverlight Tip of the Day #40: 1.05 != 1.05 - Peril with Floating Point Comparisons.

Filed under: Silverlight

Vào một ngày tôi đã tìm ra một lỗi của một trong những ứng dụng Silverlight mà tôi đang so sánh các số dư giữa chúng.

Trong chuyển động một hình ảnh của tôi, tôi đã tăng ScaleTransform.ScaleX lên "0.05" từ "0.0" đến "2.0 và kiểm tra thấy vấn đề ở chỗ khi ScaleTransform.ScaleX= "2.0" . Vấn đề là nó không bao giờ chính xác khi nó đạt 2.0. Nói chuyện với các đồng nghiệp của tôi, có lẽ nó là hiệu ứng bên cạnh việc phân chia số dư , việc chia cho 10 không đúng chính xác với hai số dư . Thí dụ như, hãy nhìn vào debugger, khi tôi gán ScaleX = 1.05 giá trị thực tế của nó là 1.0499999523162842.

Moral of the story: "Comparing floating point is fraught with peril. Do not rely on comparisons with floats or exact fuzzy with epsilon. That is, floating computation has errors so never do equal comparisons. Also, you should generally never introduce an epsilon and do a fuzzy comparison since it simply pushes your bugs to some other range of numbers you likely don't test."

(Vì đoạn này khó mà dịch được xác nghĩa nên kpopyo để nguyên văn, và ý nghĩa chính của đoạn này là một thủ thuật khi lập trình. Tức là: Khi so sánh hai giá trị nào đó, ta không nên so sánh không bằng, vì khi tính toán các giá trị có thể bị dư ra , mà nên so sánh bé hơn hay lớn hơn . Giống như chủ đề của bài này " Nguy cơ của những giá trị so sánh " )

Dưới đây là cách làm sai. Đây là một vòng lặp vô định vì nó không bao giờ chính xác đến 2.0. Trong debugger của tôi (chế độ debug có ghi các chi tiết tính toán) nó là 1.9999991655349731 và sau đó là 2.0499992370605469.

scale.ScaleX = 0.0;
while (scale.ScaleX != 2.0)
{
    scale.ScaleX += 0.05;
    // Do stuff here...
}

Cách khác (so sánh bé hơn)

scale.ScaleX = 0.0;
while (scale.ScaleX < 2.0)
{
    scale.ScaleX += 0.05;
    // Do stuff here...
}

Thank you,
--Mike Snow

Silverlight Tip of the Day #40: 1.05 != 1.05 - Peril with Floating Point Comparisons.

Nguyễn Thị Như Quỳnh — Mon, 27 Jul 2009 08:01:06 GMT

Revision 5 posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 7/27/2009 4:01:06 PM

Silverlight Tip of the Day #40: 1.05 != 1.05 - Peril with Floating Point Comparisons.

Filed under: Silverlight

Vào một ngày tôi đã tìm ra một lỗi của một trong những ứng dụng Silverlight mà tôi đang so sánh các số dư giữa chúng.<o:p></o:p>úng.

Trong chuyển động một hình ảnh của tôi, tôi đã tăng ScaleTransform.ScaleX ScaleTransform.ScaleX lên “0.05” "0.05" từ “0.0” "0.0" đến “2.0 "2.0 và kiểm tra thấy vấn đề ở chỗ khi ScaleTransform.ScaleX= “2.0” ScaleTransform.ScaleX= "2.0" . Vấn đề là nó không bao giờ chính xác khi nó đạt 2.0. Nói chuyện với các đồng nghiệp của tôi, có lẽ nó là hiệu ứng bên cạnh việc phân chia số dư , việc chia cho 10 không đúng chính xác với hai số dư . Thí dụ như, hãy nhìn vào debugger, khi tôi gán ScaleX = 1.05 giá trị thực tế của nó là 1.0499999523162842.<o:p></o:p>

Moral of the story: “"Comparing floating point is fraught with peril. Do not rely on comparisons with floats or exact fuzzy with epsilon. That is, floating computation has errors so never do equal comparisons. Also, you should generally never introduce an epsilon and do a fuzzy comparison since it simply pushes your bugs to some other range of numbers you likely don’t 't test.”<o:p></o:p>"

scale.ScaleX = 0.0;<o:p></o:p>

while (scale.ScaleX != 2.0)<o:p></o:p>

{<o:p></o:p>

scale.ScaleX += 0.05;<o:p></o:p>

// Do stuff here...<o:p></o:p>

}<o:p></o:p>

Cách khác (so sánh bé hơn)<o:p></o:p>

scale.ScaleX = 0.0;<o:p></o:p>

while (scale.ScaleX < 2.0)<o:p></o:p>

{<o:p></o:p>

scale.ScaleX += 0.05;<o:p></o:p>

// Do stuff here...<o:p></o:p>

}<o:p></o:p>

<o:p></o:p>

Thank you,
--Mike Snow <o:p></o:p>

Silverlight Tip of the Day #40: 1.05 != 1.05 - Peril with Floating Point Comparisons.

Nguyễn Thị Như Quỳnh — Mon, 27 Jul 2009 07:59:46 GMT

Revision 4 posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 7/27/2009 3:59:46 PM

Silverlight Tip of the Day #40: 1.05 != 1.05 - Peril with Floating Point Comparisons.

Filed under: Silverlight

The other day I found a bug in one of my </style> <![endif]-->

Vào một ngày tôi đã tìm ra một lỗi của một trong những ứng dụng Silverlight applications that was doing floating point comparisons.

In my animation of an image I was increasing the mà tôi đang so sánh các số dư giữa chúng.<o:p></o:p>

Trong chuyển động một hình ảnh của tôi, tôi đã tăng ScaleTransform.ScaleXby lên “0.05” from từ “0.0” to “2.0 and checking to see when my đến “2.0 và kiểm tra thấy vấn đề ở chỗ khi ScaleTransform.ScaleX= “2.0”. The problem was it was never reaching exactly “2.0” . Vấn đề là nó không bao giờ chính xác khi nó đạt 2.0. Talking with my co-workers it turns out this is a side effect of parsing a float Nói chuyện với các đồng nghiệp của tôi, có lẽ nó là hiệu ứng bên cạnh việc phân chia số dư , the divide by việc chia cho 10isn’t precise with a base 2 float representation không đúng chính xác với hai số dư . For exampleThí dụ như, looking in the hãy nhìn vào debugger, when I set khi tôi gán ScaleX = 1.05the actual value turned out to be giá trị thực tế của nó là 1.0499999523162842.<o:p></o:p>

Moral of the story: “Comparing floating point is fraught with peril. Do not rely on comparisons with floats or exact fuzzy with epsilon. That is, floating computation has errors so never do equal comparisons. Also, you should generally never introduce an epsilon and do a fuzzy comparison since it simply pushes your bugs to some other range of numbers you likely don’t test.”

Below is the wrong way <o:p></o:p>

(Vì đoạn này khó mà dịch được xác nghĩa nên kpopyo để nguyên văn, và ý nghĩa chính của đoạn này là một thủ thuật khi lập trình. Tức là: Khi so sánh hai giá trị nào đó, ta không nên so sánh không bằng, vì khi tính todo itán các giá trị có thể bị dư ra , mà nên so sánh bé hơn hay lớn hơn . This is an infinite loop since it never reaches exactly Giống như chủ đề của bài này " Nguy cơ của những giá trị so sánh " ) <o:p></o:p>

Dưới đây là cách làm sai. Đây là một vòng lặp vô định vì nó không bao giờ chính xác đến 2.0. In my Trong debugger , it hit của tôi (chế độ debug có ghi các chi tiết tính toán) nó là 1.9999991655349731 and then và sau đó là 2.0499992370605469.<o:p></o:p>

scale.ScaleX = 0.0;<o:p></o:p>

while (scale.ScaleX != 2.0)<o:p></o:p>

{<o:p></o:p>

scale.ScaleX += 0.05;<o:p></o:p>

// Do stuff here...<o:p></o:p>

}

Alternate way <o:p></o:p>

Cách khác (compare to less than equalso sánh bé hơn)<o:p></o:p>

scale.ScaleX = 0.0;<o:p></o:p>

while (scale.ScaleX < 2.0)<o:p></o:p>

{<o:p></o:p>

scale.ScaleX += 0.05;<o:p></o:p>

// Do stuff here...<o:p></o:p>

}<o:p></o:p>

<o:p></o:p>

Thank you,
--Mike Snow <o:p></o:p>

Silverlight Tip of the Day #40: 1.05 != 1.05 - Peril with Floating Point Comparisons.

Nguyễn Thị Như Quỳnh — Mon, 27 Jul 2009 07:57:32 GMT

Revision 3 posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 7/27/2009 3:57:32 PM

Silverlight Tip of the Day #40: 1.05 != 1.05 - Peril with Floating Point Comparisons.

Filed under: Silverlight

Vào một ngày tôi đã tìm ra một lỗi của một trong những ứng dụng

The other day I found a bug in one of my Silverlight mà tôi đang so sánh các số dư giữa chúng.

Trong chuyển động một hình ảnh của tôi, tôi đã tăng ScaleTransform.ScaleX lên "0.05" từ "0.0" đến "2.0 và kiểm tra thấy vấn đề ở chỗ khi ScaleTransform.ScaleX= "2.0" applications that was doing floating point comparisons. Vấn đề là nó không bao giờ chính xác khi nó đạt

In my animation of an image I was increasing the ScaleTransform.ScaleX by “0.05” from “0.0” to “2.0 and checking to see when my ScaleTransform.ScaleX= “2.0”. The problem was it was never reaching exactly 2.0. Nói chuyện với các đồng nghiệp của tôi, có lẽ nó là hiệu ứng bên cạnh việc phân chia số dư Talking with my co-workers it turns out this is a side effect of parsing a float, việc chia cho the divide by 10 không đúng chính xác với hai số dư isn’t precise with a base 2 float representation. Thí dụ nhưFor example, hãy nhìn vào looking in the debugger, khi tôi gán when I set ScaleX = 1.05 giá trị thực tế của nó là the actual value turned out to be 1.0499999523162842.

Moral of the story: "“Comparing floating point is fraught with peril. Do not rely on comparisons with floats or exact fuzzy with epsilon. That is, floating computation has errors so never do equal comparisons. Also, you should generally never introduce an epsilon and do a fuzzy comparison since it simply pushes your bugs to some other range of numbers you likely don't ’t test."

Below is the wrong way to án các giá trị có thể bị dư ra , mà nên so sánh bé hơn hay lớn hơn . Giống như chủ đề của bài này " Nguy cơ của những giá trị so sánh " )

Dưới đây là cách làm saido it. Đây là một vòng lặp vô định vì nó không bao giờ chính xác đến This is an infinite loop since it never reaches exactly 2.0. Trong In my debuggercủa tôi (chế độ debug có ghi các chi tiết tính toán) nó là , it hit 1.9999991655349731 và sau đó là and then 2.0499992370605469.

scale.ScaleX = 0.0;
while (scale.ScaleX != 2.0)
{
    scale.ScaleX += 0.05;
    // Do stuff here...
}

Cách khác

Alternate way (so sánh bé hơncompare to less than equal)

scale.ScaleX = 0.0;
while (scale.ScaleX < 2.0)
{
    scale.ScaleX += 0.05;
    // Do stuff here...
}

Thank you,
--Mike Snow

Silverlight Tip of the Day #40: 1.05 != 1.05 - Peril with Floating Point Comparisons.

Nguyễn Thị Như Quỳnh — Mon, 27 Jul 2009 07:56:35 GMT

Revision 2 posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 7/27/2009 3:56:35 PM

Silverlight Tip of the Day #40: 1.05 != 1.05 - Peril with Floating Point Comparisons.

Filed under: Silverlight

Vào một ngày tôi đã tìm ra một lỗi của một trong những ứng dụng Silverlight mà tôi đang so sánh các số dư giữa chúng.<o:p></o:p>úng.

scale.ScaleX = 0.0;<o:p></o:p>
while (scale.ScaleX != 2.0)<o:p></o:p>
{<o:p></o:p>
    scale.ScaleX += 0.05;<o:p></o:p>
    // Do stuff here...<o:p></o:p>
}<o:p></o:p>

Cách khác (so sánh bé hơn)<o:p></o:p>

scale.ScaleX = 0.0;<o:p></o:p>
while (scale.ScaleX < 2.0)<o:p></o:p>
{<o:p></o:p>
    scale.ScaleX += 0.05;<o:p></o:p>
    // Do stuff here...<o:p></o:p>
}<o:p></o:p>
 <o:p></o:p>

Thank you,
--Mike Snow <o:p></o:p>

<o:p> </o:p>

Silverlight Tip of the Day #40: 1.05 != 1.05 - Peril with Floating Point Comparisons.

Nguyễn Thị Như Quỳnh — Mon, 27 Jul 2009 07:54:58 GMT

Revision 1 posted to SilverLight programming tip tricks by Nguyễn Thị Như Quỳnh on 7/27/2009 3:54:58 PM

Vào một ngày tôi đã tìm ra một lỗi của một trong những ứng dụng Silverlight mà tôi đang so sánh các số dư giữa chúng.<o:p></o:p>

Trong chuyển động một hình ảnh của tôi, tôi đã tăng ScaleTransform.ScaleX lên “0.05” từ “0.0” đến “2.0 và kiểm tra thấy vấn đề ở chỗ khi ScaleTransform.ScaleX= “2.0” . Vấn đề là nó không bao giờ chính xác khi nó đạt 2.0. Nói chuyện với các đồng nghiệp của tôi, có lẽ nó là hiệu ứng bên cạnh việc phân chia số dư , việc chia cho 10 không đúng chính xác với hai số dư . Thí dụ như, hãy nhìn vào debugger, khi tôi gán ScaleX = 1.05 giá trị thực tế của nó là 1.0499999523162842.<o:p></o:p>

scale.ScaleX = 0.0;<o:p></o:p>

while (scale.ScaleX != 2.0)<o:p></o:p>

{<o:p></o:p>

scale.ScaleX += 0.05;<o:p></o:p>

// Do stuff here...<o:p></o:p>

}<o:p></o:p>

Cách khác (so sánh bé hơn)<o:p></o:p>

scale.ScaleX = 0.0;<o:p></o:p>

while (scale.ScaleX < 2.0)<o:p></o:p>

{<o:p></o:p>

scale.ScaleX += 0.05;<o:p></o:p>

// Do stuff here...<o:p></o:p>

}<o:p></o:p>

<o:p></o:p>

Thank you,
--Mike Snow <o:p></o:p>

<o:p> </o:p>