Sunday, February 26, 2012

Basic control in Silverlight


A.     Thiết kế giao diện
a.       Xoá Grid Control và thêm control StackPanel vào đặt tên là chiều rộng 500, chiều cao 500 Orientation="Vertical" (nằm theo chiều dọc)
<StackPanel Name="ParentStackPanel" Height="500" Width="500" Orientation="Vertical">
Chú ý: Orientation="Vertical" (nằm theo chiều dọc), Orientation=" Horizontal" (nằm theo chiều ngang)
b.      Trong thêm 5 StackPanel với tên như bên dưới
<StackPanel Name="TheFirstStackPanel" Width="500" Height="100" Orientation="Horizontal"></StackPanel>
<StackPanel Name="TheSecondStackPanel" Width="500" Height="100" Orientation="Horizontal" Visibility="Collapsed"></StackPanel>
<StackPanel Name="TheThirdStackPanel" Width="500" Height="100" Orientation="Vertical"></StackPanel>
<StackPanel Name="TheFourStackPanel" Width="500" Height="100" Orientation="Vertical"></StackPanel>
<StackPanel Name="TheFiveStackPanel" Width="500" Height="100" Orientation="Vertical"></StackPanel>

c.       Trong control StackPanel thứ nhất thêm 2 TextBlock như dưới đây
<StackPanel Name="TheFirstStackPanel" Width="500" Height="100" Orientation="Horizontal">
    <TextBlock Text="Hello Silverlight Control"></TextBlock>
    <TextBlock Text="Goodbye Silverlight Control"></TextBlock>           
</StackPanel>

d.      Trong control StackPanel thứ hai thêm 2 TextBlock như dưới đây
<StackPanel Name="TheSecondStackPanel" Width="500" Height="100" Orientation="Horizontal" Visibility="Collapsed">
            <TextBlock Text="Hello Silverlight Course"></TextBlock>
            <TextBlock Text="Goodbye Silverlight Course"></TextBlock>
        </StackPanel>


e.       Trong control StackPanel thứ ba thêm Button tên là buttonShow và TextBlock tên là textBlogMessage như dưới đây
<StackPanel Name="TheThirdStackPanel" Width="500" Height="100" Orientation="Vertical">
<Button Name="buttonShow" Content="Second" Click="buttonShow_Click"> </Button>
<TextBlock Name="textBlogMessage" Text="TheFirstStackPanel"> </TextBlock>
               </StackPanel>


f.       Trong control StackPanel thứ tư thêm 3 TextBlock và 1 Button như dưới đây
<StackPanel Name="TheFourStackPanel" Width="500" Height="100" Orientation="Vertical">
            <TextBlock Name="labelKeyword" Text="Keywork:" ></TextBlock>
            <TextBox Name="textBoxKeyword"></TextBox>
            <TextBlock Name="labelMessage" Text="LabelMessage"></TextBlock>
                    <Button Name="ButtonOk" Content="OK" Click="ButtonOk_Click"></Button>                       
        </StackPanel>


g.       Trong control StackPanel thứ năm thêm 1 TextBlock , 1 my:AutoCompleteBox, Button như dưới đây
<StackPanel Name="TheFiveStackPanel" Width="500" Height="100" Orientation="Vertical">
            <TextBlock Name="textBockFromAutoCompleteBox" Text="TextBock From AutoCompleteBox"></TextBlock>
            <my:AutoCompleteBox Name="autoCPL"></my:AutoCompleteBox>
            <Button Name="btnGetValue" Content="Get Value" Click="btnGetValue_Click"></Button>
        </StackPanel>
               

Code Giao diện:

<UserControl xmlns:my="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input"  x:Class="ControlSilverlightInSharepoint.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="500" d:DesignWidth="500">
    <StackPanel Name="ParentStackPanel" Height="500" Width="500" Orientation="Vertical">
        <StackPanel Name="TheFirstStackPanel" Width="500" Height="100" Orientation="Horizontal">
            <TextBlock Text="Hello Silverlight Control"></TextBlock>
            <TextBlock Text="Goodbye Silverlight Control"></TextBlock>           
        </StackPanel>

        <StackPanel Name="TheSecondStackPanel" Width="500" Height="100" Orientation="Horizontal" Visibility="Collapsed">
            <TextBlock Text="Hello Silverlight Course"></TextBlock>
            <TextBlock Text="Goodbye Silverlight Course"></TextBlock>
        </StackPanel>
        <StackPanel Name="TheThirdStackPanel" Width="500" Height="100" Orientation="Vertical">
            <Button Name="buttonShow" Content="Second" Click="buttonShow_Click"></Button>
            <TextBlock Name="textBlogMessage" Text="TheFirstStackPanel"></TextBlock>
        </StackPanel>
        <StackPanel Name="TheFourStackPanel" Width="500" Height="100" Orientation="Vertical">
            <TextBlock Name="labelKeyword" Text="Keywork:" ></TextBlock>
            <TextBox Name="textBoxKeyword"></TextBox>
            <TextBlock Name="labelMessage" Text="LabelMessage"></TextBlock>
            <Button Name="ButtonOk" Content="OK" Click="ButtonOk_Click"></Button>                       
        </StackPanel>
        <StackPanel Name="TheFiveStackPanel" Width="500" Height="100" Orientation="Vertical">
            <TextBlock Name="textBockFromAutoCompleteBox" Text="TextBock From AutoCompleteBox"></TextBlock>
            <my:AutoCompleteBox Name="autoCPL"></my:AutoCompleteBox>
            <Button Name="btnGetValue" Content="Get Value" Click="btnGetValue_Click"></Button>
        </StackPanel>
    </StackPanel>
   
</UserControl>
Giao diện chính:
B.     Code
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 ControlSilverlightInSharepoint
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            FillItems();
        }

        private void buttonShow_Click(object sender, RoutedEventArgs e)
        {
           //Kiem tra Text cua button la Second
            if (Convert.ToString(buttonShow.Content) == "Second")
            {
                // Thay doi text thanh First
                buttonShow.Content = "First";
                //Hien TheSecondStackPanel
                TheSecondStackPanel.Visibility = Visibility.Visible;
                //An TheFirstStackPanel
                TheFirstStackPanel.Visibility = Visibility.Collapsed;
                //Gan Text cho textBlogMessage la TheSecondStackPanel
                textBlogMessage.Text = "TheSecondStackPanel";
            }
            else
            {
                //Kiem tra Text cua button la First
                if (Convert.ToString(buttonShow.Content) == "First")
                {
                    // Thay doi text thanh Second
                    buttonShow.Content = "Second";
                    //Hien TheFirstStackPanel
                    TheFirstStackPanel.Visibility = Visibility.Visible;
                    //An TheSecondStackPanel
                    TheSecondStackPanel.Visibility = Visibility.Collapsed;
                    //Gan Text cho textBlogMessage la TheFirstStackPanel
                    textBlogMessage.Text = "TheFirstStackPanel";
                }
            }
        }
        //Gan gia tri cua textBoxKeyword cho labelMessage
        private void ButtonOk_Click(object sender, RoutedEventArgs e)
        {
            labelMessage.Text = textBoxKeyword.Text;
        }

        //Khai bao List de chua cac gia tri va Fill vao autocomplete
        void FillItems()
        {
            List<string> listItems = new List<string>();
            listItems.Add("C#");
            listItems.Add("ASP NET");
            listItems.Add("Sharepoint");
            autoCPL.ItemsSource = listItems;
        }
        //Gan gia tri cua autoCPL cho textBockFromAutoCompleteBox
        private void btnGetValue_Click(object sender, RoutedEventArgs e)
        {
            textBockFromAutoCompleteBox.Text = autoCPL.SelectedItem.ToString();
        }       
    }
}

Sau khi code xong, kết quả như sau:

a.       Trương hợp 1:
ü  Khi  chưa nhấn vào nút Second thì giao diện như sau


ü  Khi nhấn vào nút Second thì giao diện như sau (các control được biến đổi)


ü  Khi nhấn First kết quả trở lại ban đầu
b.       Trương hợp 2:

ü  Khi nhấn nút Ok thì giá trị được gán từ control TextBox đến TextBlock

c.        Trương hợp 2:

ü  Nhấn vào autocomplete thì tự động out ra text từ list được lưu trứ
                           


ü  Và nhấn chọn Get Value giá trị được gán như sau
                           

0 comments:

Post a Comment