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, 1 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ứ
0 comments:
Post a Comment