Silverlight-Chapter 4 - Smith.N Studio PDF

Infoway
Solutions
CHNG IV: CONTROL V USER CONTROL TRONG SILVERLIGHT

CHNG IV:
CONTROL V USER CONTROL TRONG SILVERLIGHT
1 Gii thiu v cc control ph bin ca Silverlight SDK tch hp trong VS2008
Cc Control trong silverlight cho php bn lu tr ni dung hoc cc control khc, bn c th to hoc
t thit k c cc control ny chng hin th c nhng thay i trng thi ti ngi dng.
Trong cng c pht trin Visual studio 2008 tch hp cc cng c silverlight (Ci t
Siverlight tool, hng dn chng mt) c rt nhiu cc control c sn bn to, thay i hoc
x l cc s kin theo chng
Di y l hnh nh danh sch cc cng c c trong Silverlight tool

Chng II chng ta tm hiu v cc cch trnh by control theo Layout (Grid, StackPanel,
Canvas). Trong chng ny chng ta s xem v tm hiu cc control ph bin trong silverlight 2 v cch
trnh by chng theo Layout hc.

2 Cc control ph bin trong Silverlight 2
1.1 Border
o M t

Border cung cp mt background , khu vc cho php bn nhng vo mt thnh phn duy nht
nhm to ra hiu qu v ho.
o V d

Smith Nguyen Studio.
https:/ / www.facebook.com/ SmithNguyenStudio
Infoway
Solutions

2
<Border Background="Coral" Width="300" Padding="10" CornerRadius="20">
<TextBlock FontSize="16">Text Surrounded by a Border</TextBlock>
</Border>

1.2 Button
o M t
Button kim sot cc phn ng ca ngi dng qua cc thit b u vo, bao gm cc s kin, style
o V d

<Grid x:Name="LayoutRoot" Background="White">
<Button Name="Button" Content="Click Me !" Background="Blue" Margin="20,60,200,200"
MouseLeftButtonDown="Button_MouseLeftButtonDown"/>
</Grid>

1.3 Calendar
o M t
Calendar cho php ngi s dng chn ngy, thng, nm. Ta c th s dng cc style khc nhau
thng qua Mode
o V d

<basics:Calendar Height="300" Width="300"IsTodayHighlighted="True" >
</basics:Calendar>
</Grid>

1.4 CheckBox
o M t
Cho php ngi dng la chn ba trng thi dnh du ,b dnh du v trng thi trung gian
o V d
<CheckBox Name="CheckBox1" ClickMode="Release" IsThreeState="False" Content="CheckBox two states"
Margin="10,50,0,0"></CheckBox>
Infoway
Solutions

3
<CheckBox Name="CheckBox2" ClickMode="Release" IsThreeState="True" Content="CheckBox three states"
Margin="10,100,0,0"></CheckBox>

1.5 ComboBox
o M t
ComboBox cho php chn la mt Item t mt danh sch Item t
ComboBox
o V d
<ComboBox Name="ComboBox1" BorderThickness="2" IsDropDownOpen="True" SelectedIndex="0" Width="200"
Height="30">
<ComboBoxItem x:Name="ComboBoxItem1" Content="Item1"></ComboBoxItem>
</ComboBox>
</Grid>

1.6 ContentControl
o M t
ContentControl c cc dn xut nh Button, Panel. Ta c th tu chnh ContentControl thng qua cc
template
o V d
Sau y l vic ci t mt vi control c tha k t ContentControl
<StackPanel Name="root" Width="200" HorizontalAlignment="Center" VerticalAlignment="Center">

<! To mt button vi ni dung gn t Content.-->
<Button Margin="10" Content="This is string content of a Button"/>

<! To mt button vi mt UIElement gn t content.-->
<Button Margin="10">
<Rectangle Height="40" Width="40" Fill="Blue"/>
</Button>

<! To mt button vi mt panel cha nhiu i tng gn t content.-->
<CheckBox Margin="10">
Infoway
Solutions

4
<StackPanel Margin="3,0,0,0" Orientation="Horizontal">
<Ellipse Height="10" Width="10" Fill="Blue"/>
<TextBlock TextAlignment="Center" Text="A string of text"></TextBlock>
</StackPanel>
</CheckBox>
</StackPanel>

\

1.7 DatePicker
o M t
DatePicker cho php ngi dng s dng la chn ngy, hoc g trc tip vo textbox hoc s
dng lch th xung.
DatePicker cung cp mt lot cc s kin h tr vic kim sot lch th xung.
o V d

<swc:Calendar x:Name="cal" Canvas.Left="20" Canvas.Top="100" />


<swc:Calendar x:Name="cal2" Canvas.Left="270" Canvas.Top="100"
IsTodayHighlighted="false" />



<swc:DatePicker x:Name="dp1" Canvas.Left="20" Canvas.Top="390" />
<swc:DatePicker x:Name="dp2" Canvas.Left="20" Canvas.Top="480"
SelectedDateFormat="Long"/>


<swc:Calendar x:Name="cal3" Canvas.Left="20" Canvas.Top="540" />

Infoway
Solutions

5

1.8 GridSplitter
o M t
GridSplitter cho php ngi dng phn phi li khng gian gia cc hng hoc ct. N l yu t ho
tng trng cho mt thnh phn gn vo n m thnh phn c th tng tc

o V d
<Grid ShowGridLines="True" Canvas.Top="60" Canvas.Left="20" Width="400" Height="400">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>

<TextBlock Text="One!" Grid.Row="0" Grid.Column="0" />
<TextBlock Text="Two!" Grid.Row="1" Grid.Column="1" />
<TextBlock Text="Three!" Grid.Row="2" Grid.Column="2" />
<TextBlock Text="Four!" Grid.Row="3" Grid.Column="3" />
<swc:GridSplitter Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="4"
Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Top"
ShowsPreview="True"
/>
<swc:GridSplitter Grid.Row="2" Grid.Column="1" Grid.RowSpan="2"
Width="5" HorizontalAlignment="Left" VerticalAlignment="Stretch"
/>
</Grid>

Infoway
Solutions

6

1.9 HyperlinkButton
o M t
HyperlinkButton hin th mt siu lin kt. Khi bm vo HyperlinkButton s cho php ngi dng truy
cp vo mt trang web, a ch URI ch c xc nh vi cc NavigateUri.
Bn c th ch nh ca s hoc mt khung trong nhng im n trang web bng cch s dng
TargetName
o V d
<TextBlock Text="HyperlinkButton Demonstration" Margin="0,20,10,20"
FontFamily="Verdana" FontSize="18" FontWeight="Bold"
Foreground="#FF5C9AC9" />

<HyperlinkButton Content="Click here to learn about Silverlight"
NavigateUri="http://www.silverlight.net" TargetName="_blank" Margin="10,60,0,0"/>

1.10 Image
o M t
Image hin th hnh nh trong nh dng JPEG hoc PNG.
Infoway
Solutions

7
Hnh nh hin th 1, 4 hoc 8 bit mu, hnh nh thc vi 24 hoc 32 bit
o V d
M XAML:

<Image Source="myPicture.png" />

M C#:
Image myImage = new Image();
myImage.Source = new BitmapImage(new Uri("myPicture.jpg", UriKind.RelativeOrAbsolute));
LayoutRoot.Children.Add(myImage);

1.11 InkPresenter
o M t
InkPresenter cung cp cc bn v mt h tr tnh nng Tablet PC. InkPresenter c dn xut t
canvas nn c th hin th mt hoc nhiu i tng v UIElement strokes.

o V d
M XAML:

<Canvas>
<TextBlock Text="InkPresenter Control" FontWeight="Bold" Margin="50,30,0,0" />
<Rectangle Height="500" Width="500" Margin="50,50,0,0" Stroke="Black" />
<InkPresenter x:Name="MyIP" Height="500" Width="500"
Margin="50,50,0,0"
MouseLeftButtonDown="MyIP_MouseLeftButtonDown"
LostMouseCapture="MyIP_LostMouseCapture"
MouseMove="MyIP_MouseMove"
Background="Transparent" Opacity="1" />
</Canvas>

M C#
private void MyIP_MouseLeftButtonDown(object sender, MouseEventArgs e)
{
MyIP.CaptureMouse();
StylusPointCollection MyStylusPointCollection = new StylusPointCollection();
MyStylusPointCollection.Add(e.StylusDevice.GetStylusPoints(MyIP));
NewStroke = new Stroke(MyStylusPointCollection);
MyIP.Strokes.Add(NewStroke);
}

//StylusPoint objects are collected from the MouseEventArgs and added to MyStroke.
private void MyIP_MouseMove(object sender, MouseEventArgs e)
{
if (NewStroke != null)
NewStroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(MyIP));
}

//MyStroke is completed
private void MyIP_LostMouseCapture(object sender, MouseEventArgs e)
{
NewStroke = null;

}

Infoway
Solutions

8

1.12 ListBox
o M t
ListBox cha mt danh sch cc Item, Item c th l mt don vn bn
hay mt Control.

o V d
<TextBlock Text="ListBox Demonstration" Margin="0,20,10,20"

<TextBlock Text="ListBox with unbound data:" />
<ListBox Width="350" Margin="0,5,0,10">
<TextBlock Text="TextBlock" />
<TextBox Text="TextBox" />
<Button Content="Button" />
<Rectangle Fill="LightBlue" Height="20" Width="150" Margin="2,2,2,2"/>
<Ellipse Fill="Coral" Height="20" Width="150" Margin="2,2,2,2"/>
</ListBox>

1.13 MediaElement
o M t
Cc MediaElement kim sot ni dung Audio hoc Video.
Infoway
Solutions

9
MediaElement cung cp mt vng cha nht c th hin th Video trn , hoc Audio
o V d
<MediaElement
x:Name="media"
Source="xbox.wmv"
CurrentStateChanged="media_state_changed"
Width="300" Height="300"/>
1.14 MultiScaleImage
o M t
MultiScaleImage cho php ngi dng m mt hnh nh cho php phng
to thu nh thng qua cng ngh Deep Zoom.
o V d
M XAML:

<MultiScaleImage x:Name="deepZoomObject" Source="source/items.bin"
MouseEnter="DeepZoomObject_MouseEnter" />
M C#:
private void DeepZoomObject_MouseEnter(object sender, MouseEventArgs e)
{
if (deepZoomObject.UseSprings = false)
{
deepZoomObject.UseSprings = true;
}
this.deepZoomObject.ZoomAboutLogicalPoint(3, .5, .5);
}

1.15 PasswordBox
o M t
PasswordBox c s dng nhp vo thng tin mt khu k t hin th ch l k t i din.
o V du
M XAML:
<TextBlock Margin="20,10,0,0" Text="PasswordBox Demonstration" FontWeight="bold"/>
<TextBlock Text="Type password here" Margin="20,10,0,0"/>
<PasswordBox x:Name="MyPWBox1" Margin="20,10,0,0"
PasswordChanged="MyPWBox1_PasswordChanged" MaxLength="8" Height="35" Width="200"
HorizontalAlignment="Left" />
M C#:
public Page()
{
InitializeComponent();
}
Infoway
Solutions

10

private void MyPWBox1_PasswordChanged(object sender, RoutedEventArgs e)
{
ReadOnlyTB.Text = MyPWBox1.Password;
}

1.16 Popup
o M t
Popup lun lun xut hin ln trn cng ca s ng dng hu ch cho vic hin th thng bo cho mt
nhim v

o V d
M XAML:
<Button Width="100" Height="50" x:Name="showPopup"
Click="showPopup_Click" Content="Show Popup" />

M C#
// Create the popup object.
Popup p = new Popup();
private void showPopup_Click(object sender, RoutedEventArgs e)
{
Border border = new Border();
border.BorderBrush = new SolidColorBrush(Colors.Black);
border.BorderThickness = new Thickness(5.0);

}

1.17 ProgressBar
o M t
ProgressBar hin th cho bit tin trnh ang hot ng bng vic thay i gi tr thay i.
o V d
<StackPanel x:Name="LayoutRoot" Background="White">
Infoway
Solutions

11
<Border BorderThickness="5" BorderBrush="Black">
<StackPanel Background="LightGray">
<TextBlock HorizontalAlignment="Center" Margin="10"
Text="Value-Based Progress Bar" />
<ProgressBar x:Name="pg1" Value="100" Margin="10" Maximum="200"
Height="15" IsIndeterminate="False" />
</StackPanel>
</Border>
<Border BorderThickness="5" BorderBrush="Black">
<StackPanel Background="LightGray">
<TextBlock HorizontalAlignment="Center"
Margin="10" Text="Indeterminate Progress Bar" />
<ProgressBar x:Name="pg2" Margin="10" Height="15"
IsIndeterminate="True" />
</StackPanel>
</Border>
</StackPanel>

1.18 RadioButton
o M t
RadioButton cho php ngi dng chn mt ty chn t mt nhm cc ty chn. Cc RadioButton t
chc trong cng mt nhm bng cch t cc GroupName chung cho mi RadioButton. Cc
RadioButton l mt ContentControl
o V d
M XAML:
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Text="RadioButton Demonstration" Margin="0,20,10,20"
Foreground="#FF5C9AC9" Grid.Row="0" Grid.ColumnSpan="2"/>
<TextBlock Text="First Group:" Grid.Row="1" />
<RadioButton x:Name="TopButton" Margin="5,0,0,0" Checked="HandleCheck"
GroupName="First Group" Content="First Choice" Grid.Row="1"
Grid.Column="1"/>
<RadioButton x:Name="MiddleButton" Margin="5,0,0,0" Checked="HandleCheck"
GroupName="First Group" Content="Second Choice" Grid.Row="3"
Grid.Column="1"/>
<TextBlock Text="Ungrouped:" Grid.Row="4" />
<RadioButton x:Name="LowerButton" Margin="5,0,0,0" Checked="HandleCheck"
Infoway
Solutions

12
Content="Third Choice" Grid.Row="4" Grid.Column="1"/>
<TextBlock Grid.Row="5" x:Name="choiceTextBlock" Margin="0,10,0,0"
Grid.ColumnSpan="2"/>

M C#:
private void HandleCheck(object sender, RoutedEventArgs e)
{
RadioButton rb = sender as RadioButton;
choiceTextBlock.Text = "You chose: " + rb.GroupName + ": " + rb.Name;
}

1.19 RepeatButton
o M t
RepeatButton l mt nt kim sot cc s kin tc ng vo nt nh Mouse Click v thi gian gia hai
ln click lin tip
o V d
M XAML:

RepeatButton Content="click and hold for multiple Click events"
Click="RepeatButton_Click" Width="250" Margin="0,0,0,5"
HorizontalAlignment="Left"/><TextBlock x:Name="clickTextBlock"
Text="Number of Clicks:" />

M C#:
static int Clicks = 0;
private void RepeatButton_Click(object sender, RoutedEventArgs e)
{
Clicks += 1;
clickTextBlock.Text = "Number of Clicks: " + Clicks;
}

Infoway
Solutions

13
1.20 ScrollBar
o M t
ScrollBar cung cp mt thanh trt c kh nng di chuyn nh hng theo chiu ngang hoc chiu
dc
1.21 ScrollViewer
o M t
ScrollViewer kim sot mt mng content, cung cp hai ScrollBar kim sot vic di chuyn mng
content .
ScrollViewer cho php bn thit lp kch c ca khong View lin quan n Content theo chiu ngang
v chiu dc.
o V d
<ScrollViewer Height="200" Width="200" HorizontalScrollBarVisibility="Auto"
Canvas.Top="60" Canvas.Left="340">
<TextBlock Width="300" TextWrapping="Wrap" Text="I am the very model of a
modern Major-General,." />
</ScrollViewer>

1.22 Slider
o M t
Slider cho php ngi dng la chn t mt lot cc gi tr bng cch di chuyn dc theo mt thanh
ngang.
o V d
<Slider Margin="0,5,0,20"
x:Name="slider1"
Minimum="0"
Maximum="10" />
Infoway
Solutions

14

1.23 TabControl
o M t
TabControl cung cp mt giao din hin th cho cc thnh phn.
Cc thnh phn con ca TabControl l cc TabItem.
o V d
<UserControl xmlns:swc="clr-
namespace:System.Windows.Controls;assembly=System.Windows.Controls"
x:Class="TabControlExample.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
FontFamily="Trebuchet MS" FontSize="11"
Width="400" Height="300">
<Canvas x:Name="LayoutRoot" Background="White">


<swc:TabControl x:Name="tab1" Canvas.Top="20" Canvas.Left="20" Height="200"
Width="300" />
<swc:TabControl x:Name="tab2" Canvas.Top="240" Canvas.Left="20"
Height="200" Width="300" />

</Canvas>
</UserControl>

Infoway
Solutions

15
1.24 TextBlock
o M t
TextBlock hin th ni dung vn bn. bn c th gn cc ni dung ca mt TextBlock bng cch s dng
ngun text. Ngoi ra cng c th gn TextBlock bng mt tp hp cc i tng text.
o V d
<TextBlock>Hello, world!</TextBlock>

1.25 TextBox
o M t
TextBox c s dng nhp d liu dng text t ngi dng hoc hin th vn bn.
TextBox thng c dng chnh sa vn bn i khi cng c dng ch ch c. TextBox c
th hin th nhiu dng vn bn.
o V d
<TextBox x:Name="ReadWriteTB" TextChanged="ReadWriteTB_TextChanged"
IsReadOnly="False" HorizontalAlignment="Left" Margin="20,5,0,0" Height="35"
Width="200" />

1.26 ToolTip
o M t
Tooltip cung cp thng tin v mt i tng ha bng cch s dng mt ca s pupup.
Infoway
Solutions

16
o V d

<TextBlock Text="TextBlock with an offset ToolTip."
Canvas.Top="110" Canvas.Left="20" >
<ToolTipService.ToolTip >
<ToolTip Content="Offset ToolTip."
HorizontalOffset="20" VerticalOffset="30"/>
</ToolTipService.ToolTip>
</TextBlock>

</Canvas>
</UserControl>

1.27 DataGrid
o M t
DataGrid cung cp mt cch linh hot hin th mt tp hp cc d liu trong cc hng v ct.
Data Grid h tr nhiu style hin th d liu trong cc ct hoc hng.
Data Grid h tr cc bng ty chn nh dng v kh nng hin th hoc n cc tiu , cc thanh trt
di chuyn .
Ngoi ra Data Grid cn cung cp mt s kiu mu m bn c th thay i hnh thc th hin d liu
hng, ct v tiu .
o V d
<UserControl x:Class="DataGridSnippets.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:data="clr-
namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
Width="500" Height="Auto">
<ScrollViewer VerticalScrollBarVisibility="Auto" BorderThickness="0">
<StackPanel Margin="10,10,10,10">

<TextBlock Text="DataGrid Demonstration" Margin="0,20,10,20"

<TextBlock Text="DataGrid with autogenerated columns:"/>
<data:DataGrid x:Name="dataGrid1"
Height="140" Margin="0,5,0,10"
AutoGenerateColumns="True" />

<TextBlock Text="DataGrid with row details sections:"/>
RowDetailsVisibilityMode="VisibleWhenSelected" >
<data:DataGrid.RowDetailsTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
Infoway
Solutions

17
<TextBlock FontSize="12" Text="Address: " />
<TextBlock FontSize="12" Text="{Binding Address}"/>
</StackPanel>
</DataTemplate>
</data:DataGrid.RowDetailsTemplate>
</data:DataGrid>

<TextBlock Text="DataGrid with configured columns:"/>
RowHeight="40" AutoGenerateColumns="False" >
<data:DataGrid.Columns>
<data:DataGridTextColumn
Header="First Name"
Width="SizeToHeader"
Binding="{Binding FirstName}"
FontSize="20" />
Header="Last Name"
Width="SizeToCells"
Binding="{Binding LastName}"
FontSize="20" />
Header="Address"
Width="150"
Binding="{Binding Address}" >
<data:DataGridTextColumn.ElementStyle>
<Style TargetType="TextBlock">
<Setter Property="TextWrapping" Value="Wrap"/>
</Style>
</data:DataGridTextColumn.ElementStyle>
<data:DataGridTextColumn.EditingElementStyle>
<Style TargetType="TextBox">
<Setter Property="Foreground" Value="Blue"/>
</Style>
</data:DataGridTextColumn.EditingElementStyle>
</data:DataGridTextColumn>
<data:DataGridCheckBoxColumn
Header="New?"
Width="40"
Binding="{Binding IsNew}" />
<data:DataGridCheckBoxColumn
Header="Subscribed?"
Width="Auto"
Binding="{Binding IsSubscribed}"
IsThreeState="True" />
</data:DataGrid.Columns>
</data:DataGrid>

<TextBlock Text="DataGrid with template column and custom alternating
row backgrounds:"/>
AutoGenerateColumns="False"
RowBackground="Azure"
AlternatingRowBackground="LightSteelBlue">
<data:DataGrid.Columns>

<data:DataGridTemplateColumn Header="Name">
<data:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Padding="5,0,5,0"
Text="{Binding FirstName}"/>
<TextBlock Text="{Binding LastName}"/>
Infoway
Solutions

18
</StackPanel>
</DataTemplate>
</data:DataGridTemplateColumn.CellTemplate>
<data:DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<TextBox Padding="5,0,5,0"
Text="{Binding FirstName}"/>
<TextBox Text="{Binding LastName}"/>
</StackPanel>
</DataTemplate>
</data:DataGridTemplateColumn.CellEditingTemplate>
</data:DataGridTemplateColumn>

Header="Address" Width="300"
Binding="{Binding Address}" />
</data:DataGrid.Columns>
</data:DataGrid>
</StackPanel>
</ScrollViewer>
</UserControl>
M C#:
using System;
using System.Collections.Generic;
using System.Windows.Controls;

namespace DataGridSnippets
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();

// Thit lp ItemsSource t to cc ct.
dataGrid1.ItemsSource = Customer.GetSampleCustomerList();
}
}

public class Customer
{
public String FirstName { get; set; }
public String LastName { get; set; }
public String Address { get; set; }
public Boolean IsNew { get; set; }

public Boolean? IsSubscribed { get; set; }

public Customer(String firstName, String lastName,
String address, Boolean isNew, Boolean? isSubscribed)
{
this.FirstName = firstName;
this.LastName = lastName;
this.Address = address;
this.IsNew = isNew;
this.IsSubscribed = isSubscribed;
}

public static List<Customer> GetSampleCustomerList()
{
Infoway
Solutions

19
return new List<Customer>(new Customer[4] {
new Customer("A.", "Zero",
"12 North Third Street, Apartment 45",
false, true),
new Customer("B.", "One",
"34 West Fifth Street, Apartment 67",
false, false),
new Customer("C.", "Two",
"56 East Seventh Street, Apartment 89",
true, null),
new Customer("D.", "Three",
"78 South Ninth Street, Apartment 10",
true, true)
});
}
}
}

3 User Control trong Visual Studio 2008
Trong v d c trnh by di y chng ta tm hiu cch to mt User Control v s dng n nh
th no trong Visual Studio 2008
1. Trong Project Silverlight c chng ta lm thao tc to New Item theo hnh v di y
Infoway
Solutions

20

2. Chn Silverlight User Control trong Templates v t tn control ny l
FormContactUserControl.xaml

3. Chng ta s c 2 file sau c to ra
- FormContactUserControl.xaml
- FormContactUserControl.xaml.cs
Trong FormContactUserControl.xaml chng ta s c on m sau
<UserControl x:Class="Chapter2.FromContactUserControl"
xmlns="http://schemas.microsoft.com/client/2007"
Infoway
Solutions

21
>

</UserControl>
4. By gi chng ta s thm on m di y vo bn trong th <Usercontrol>
<Canvas Grid.Column="0" Grid.Row="1" Background="WhiteSmoke">
<TextBlock Text="H v tn: " Margin="5,22,0,0" />
<TextBox x:Name="txtName" Margin="65,15,0,0" Width="180" Height="20"/>
<TextBlock Text="a ch: " Margin="5,47,0,0"/>
<TextBox x:Name="txtAddress" Margin="65,40,0,0" Width="180" Height="20"/>
<TextBlock Text="T: " Margin="5,72,0,0"/>
<TextBox x:Name="txtPhone" Margin="65,65,0,0" Width="180" Height="20"/>
<TextBlock Text="Mobile: " Margin="5,97,0,0"/>
<TextBox x:Name="txtMobile" Margin="65,90,0,0" Width="180" Height="20"/>
<TextBlock Text="Email: " Margin="5,122,0,0"/>
<TextBox x:Name="txtEmail" Margin="65,115,0,0" Width="180" Height="20"/>
<Button x:Name="btnSubmit" Content="Lu li" Margin="140,150,0,0"
Width="55"
<Button x:Name="btnReset" Content="Xa" Margin="200,150,0,0" Width="45"/>
</Canvas>
5. Thm s kin vo nut bm btnSubmit.

Chng ta s x l s kin btnSubmit_Click vo trong m c# nh sau
private void btnSubmit_Click(object sender, RoutedEventArgs e)
{
// Phe duyet du lieu dau vao
if (txtName.Text == "")
{
MessageBox.Show("H v tn khng c b trng");
txtName.Focus();
}
else
{
//Tiep tuc xu ly luu contact
//...
}
}
6. Lm thao tc Build Sulution, chng ta to xong control FormContactUserControl. By gi
chng ta m file Page.xaml s dng li control . Chng ta thm mi on m sau:
xmlns:inf="clr-namespace:Chapter2" vo bn trong th <UserControl>
Infoway
Solutions

22

7. hin th c User control: FormContactUserControl trong Page.xaml ta tip tc thm on
m sau
<inf:FromContactUserControl x:Name="From1"></inf:FromContactUserControl>
8. Bm F5 chy chng trnh bn s c kt qu nh hnh nh sau

4 Cc bi tp thc hnh
Cc v d, v cc bi thc hnh m rng cc bn c th ti v t a ch sau.
http://infomap.vn/learn-silverlight/sources/Chapter2.rar
lin kt ny l cc v d bao gm ca chng 2 v chng 3

Silverlight-Chapter 4 - Smith.N Studio PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Silverlight-Chapter 4 - Smith.N Studio PDF

Uploaded by

Copyright:

Available Formats

Infoway

You might also like