Response.Write("Hello LOLOTA")

這次我們來介紹Silverlight中的ListBox控制項，這個控制項可以透過文字、圖形或是圖案讓我們選擇項目，

讓使用者在視覺感受上有更深刻的體驗。

 

1.

首先，我們建立一個新的Silverlight專案，然後在Page.xmal中，新增一個ListBox，並在其中加入12個Item：

<UserControl x:Class="SL_D18._2.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"> <ListBox x:Name="uxListBox" Width="60" Height="180" > <ListBoxItem Content="鼠"></ListBoxItem> <ListBoxItem Content="牛"></ListBoxItem> <ListBoxItem Content="虎"></ListBoxItem> <ListBoxItem Content="兔"></ListBoxItem> <ListBoxItem Content="龍"></ListBoxItem> <ListBoxItem Content="蛇"></ListBoxItem> <ListBoxItem Content="馬"></ListBoxItem> <ListBoxItem Content="羊"></ListBoxItem> <ListBoxItem Content="猴"></ListBoxItem> <ListBoxItem Content="雞"></ListBoxItem> <ListBoxItem Content="狗"></ListBoxItem> <ListBoxItem Content="豬"></ListBoxItem> </ListBox> </Grid> </UserControl>

 

2.

按下F5的顯示內容如下：

有沒有感覺很單調，接下來，我們為它設定一些變化：

 

3.

在ListBoxItem中，我們新增Image來顯示：

<UserControl x:Class="SL_D18._2.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="700"> <Grid x:Name="LayoutRoot" Background="White"> <ListBox x:Name="uxListBox" Width="350" Height="700" > <ListBoxItem> <Image Source="1.jpg" Width="250" Height="200"></Image> </ListBoxItem> <ListBoxItem> <Image Source="2.jpg" Width="250" Height="200"></Image> </ListBoxItem> <ListBoxItem> <Image Source="3.jpg" Width="250" Height="200"></Image> </ListBoxItem> <ListBoxItem> <Image Source="4.jpg" Width="250" Height="200"></Image> </ListBoxItem> <ListBoxItem> <Image Source="5.jpg" Width="250" Height="200"></Image> </ListBoxItem> <ListBoxItem> <Image Source="6.jpg" Width="250" Height="200"></Image> </ListBoxItem> <ListBoxItem> <Image Source="7.jpg" Width="250" Height="200"></Image> </ListBoxItem> <ListBoxItem> <Image Source="8.jpg" Width="250" Height="200"></Image> </ListBoxItem> <ListBoxItem> <Image Source="9.jpg" Width="250" Height="200"></Image> </ListBoxItem> <ListBoxItem> <Image Source="10.jpg" Width="250" Height="200"></Image> </ListBoxItem> <ListBoxItem> <Image Source="11.jpg" Width="250" Height="200"></Image> </ListBoxItem> <ListBoxItem> <Image Source="12.jpg" Width="250" Height="200"></Image> </ListBoxItem> </ListBox> </Grid> </UserControl>

 

 

顯示內容如下：

 

看起來是不是比較好些？

 

3.

再做一些調整：

<UserControl x:Class="SL_D18._2.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="700"> <Grid x:Name="LayoutRoot" Background="White"> <ListBox x:Name="uxListBox" Width="350" Height="700" > <ListBoxItem> <ListBoxItem.Content> <StackPanel> <Image Source="1.jpg" Width="250" Height="200" ToolTipService.ToolTip="這是鼠年!!"> </Image> <TextBlock HorizontalAlignment="Center" Text="鼠" FontSize="32" Foreground="Red"></TextBlock> </StackPanel> </ListBoxItem.Content> </ListBoxItem> <ListBoxItem> <ListBoxItem.Content> <StackPanel> <Image Source="2.jpg" Width="250" Height="200" ToolTipService.ToolTip="這是牛年!!"> </Image> <TextBlock HorizontalAlignment="Center" Text="牛" FontSize="32" Foreground="Black" ></TextBlock> </StackPanel> </ListBoxItem.Content> </ListBoxItem> <ListBoxItem> <ListBoxItem.Content> <StackPanel> <Image Source="3.jpg" Width="250" Height="200"> </Image> <TextBlock HorizontalAlignment="Center" Text="虎" FontSize="32" Foreground="Yellow" ></TextBlock> </StackPanel> </ListBoxItem.Content> </ListBoxItem> <ListBoxItem> <ListBoxItem.Content> <StackPanel> <Image Source="4.jpg" Width="250" Height="200"> </Image> <TextBlock HorizontalAlignment="Center" Text="兔" FontSize="32" Foreground="Gray" ></TextBlock> </StackPanel> </ListBoxItem.Content> </ListBoxItem> <ListBoxItem> <ListBoxItem.Content> <StackPanel> <Image Source="5.jpg" Width="250" Height="200"> </Image> <TextBlock HorizontalAlignment="Center" Text="龍" FontSize="32" Foreground="Green" ></TextBlock> </StackPanel> </ListBoxItem.Content> </ListBoxItem> <ListBoxItem> <ListBoxItem.Content> <StackPanel> <Image Source="6.jpg" Width="250" Height="200"> </Image> <TextBlock HorizontalAlignment="Center" Text="蛇" FontSize="32" Foreground="GreenYellow" ></TextBlock> </StackPanel> </ListBoxItem.Content> </ListBoxItem> <ListBoxItem> <ListBoxItem.Content> <StackPanel> <Image Source="7.jpg" Width="250" Height="200"> </Image> <TextBlock HorizontalAlignment="Center" Text="馬" FontSize="32" Foreground="Silver" ></TextBlock> </StackPanel> </ListBoxItem.Content> </ListBoxItem> <ListBoxItem> <ListBoxItem.Content> <StackPanel> <Image Source="8.jpg" Width="250" Height="200"> </Image> <TextBlock HorizontalAlignment="Center" Text="羊" FontSize="32" Foreground="Gray" ></TextBlock> </StackPanel> </ListBoxItem.Content> </ListBoxItem> <ListBoxItem> <ListBoxItem.Content> <StackPanel> <Image Source="9.jpg" Width="250" Height="200"> </Image> <TextBlock HorizontalAlignment="Center" Text="猴" FontSize="32" Foreground="Gray" ></TextBlock> </StackPanel> </ListBoxItem.Content> </ListBoxItem> <ListBoxItem> <ListBoxItem.Content> <StackPanel> <Image Source="10.jpg" Width="250" Height="200"> </Image> <TextBlock HorizontalAlignment="Center" Text="雞" FontSize="32" Foreground="Tomato" ></TextBlock> </StackPanel> </ListBoxItem.Content> </ListBoxItem> <ListBoxItem> <ListBoxItem.Content> <StackPanel> <Image Source="11.jpg" Width="250" Height="200"> </Image> <TextBlock HorizontalAlignment="Center" Text="狗" FontSize="32" Foreground="Indigo" ></TextBlock> </StackPanel> </ListBoxItem.Content> </ListBoxItem> <ListBoxItem> <ListBoxItem.Content> <StackPanel> <Image Source="4.jpg" Width="250" Height="200"> </Image> <TextBlock HorizontalAlignment="Center" Text="豬" FontSize="32" Foreground="Pink" ></TextBlock> </StackPanel> </ListBoxItem.Content> </ListBoxItem> </ListBox> </Grid> </UserControl>

再加入Tooltip跟TextBlock作顯示：

 

這個看起來是不是比較特別呢？

透過這個範例，我想你應該也知道，在這個控制項可以塞進去很多東西了吧? XD

 

 

線上Demo

程式碼下載

 

試煉大會，我們下次見~

 

 

如果您有微軟技術開發的問題，可以到MSDN Forum發問。

如果您有微軟IT管理的問題，可以到TechNet Forum發問喔。