I.Introduction
Trong bài này mình xin chia sẽ cách sử dụng TabControl trong Silverlight.
II.Creating Project And Coding
Các bạn Mở Visual Studio 2010 lên, và tạo Silverlight Application
Tiếp theo chúng ta Design Giao diện cho Application, và kéo thả TabControl từ ToolBox vào
Với cách kéo thả chúng ta đã có thể tạo nên một Sample với TabControl, tiếp theo chúng ta thêm một vài TabItem nữa vào Tabcontrol. Các bạn sẽ hiểu rõ hơn ở đoạn Code sau :
<!--Thẻ Tab-->
<sdk:TabControl>
<!--Thêm một TabItem-->
<sdk:TabItem Header="Item Name" Name="tabItem">
<!--Nội dung của TabItem-->
<Grid />
</sdk:TabItem>
</sdk:TabControl>
Bây giờ chúng ta thử thêm vài TabItem với Nội Dung khác nhau nhé, mình sẽ thêm cho mỗi TabItem sẽ có một Backgruond là hình ảnh Riêng.Các bạn Add Images vào Grid trong TabItem :
1: <UserControl x:Class="SilverlightTabControl.MainPage"
2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5: xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6: mc:Ignorable="d"
7: d:DesignHeight="300" d:DesignWidth="400"
8: xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
9:
10: <Grid x:Name="LayoutRoot" Height="300" Width="400">
11: <sdk:TabControl Height="300" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="12,0,0,0" Name="tabControl1" Width="376">
12: <sdk:TabItem Header="One" Name="One">
13: <Grid >
14: <Image Height="257" HorizontalAlignment="Left" Margin="6,6,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="352" Source="/SilverlightTabControl;component/Images/4a8a219c_79247224_smile1.jpg" />
15: </Grid>
16: </sdk:TabItem>
17: <sdk:TabItem Header="" Name="Two">
18: <Grid >
19: <Image Height="251" HorizontalAlignment="Left" Margin="6,6,0,0" Name="image2" Stretch="Fill" VerticalAlignment="Top" Width="358" Source="/SilverlightTabControl;component/Images/MonkeySmile.jpg" />
20: </Grid>
21: </sdk:TabItem>
22: <sdk:TabItem Header="">
23: <Grid >
24: <Image Height="251" HorizontalAlignment="Left" Margin="6,6,0,0" Name="image3" Stretch="Fill" VerticalAlignment="Top" Width="358" Source="/SilverlightTabControl;component/Images/smile.jpg" />
25: </Grid>
26: </sdk:TabItem>
27: </sdk:TabControl>
28: <Grid.Background>
29: <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
30: <GradientStop Color="#FF95BBF2" Offset="0" />
31: <GradientStop Color="White" Offset="1" />
32: </LinearGradientBrush>
33: </Grid.Background>
34: </Grid>
35: </UserControl>
Run Application(Ctrl + F5) and look at the Resuilt.
và khi mình chon Tab Three
Pham Nguyen 