通過前面的學(xué)習(xí),已經(jīng)見過一些控件了,現(xiàn)在起將逐步見到更多控件。但由于控件太多,教程中無法一一介紹,請自行舉一反三。教程內(nèi)容也將不斷更新。
前面最常用的控件就是 Button 了,Button 還有一個有意思的屬性,當(dāng)把鼠標(biāo)指針放在 Button 上時,就會在 Button 的頭頂冒出一串文本。
<Button ToolTipService.ToolTip="Go to www.blog.csdn.net/nomasp" Margin="692,458,0,230"/>
Button 有一個很有意思的屬性。
<Button Content="摩天輪" Margin="134,363,0,367">
<ToolTipService.ToolTip>
<Image MaxHeight="80" MaxWidth="100" Source="Assets/343219.jpg"/>
</ToolTipService.ToolTip>
</Button>
只要把鼠標(biāo)放到 Button 上面就會顯示出這張圖片了,也叫做幫助提示吧。其實(shí)更簡單的方法是下面這種。它顯示的是一個后退的樣式,而且鼠標(biāo)放上去會有文字 Back 提示。
<Button Content="摩天輪" ToolTipService.ToolTip="Back"
Style="{StaticResource NavigationBackButtonNormalStyle}" />
這個控件和 Button 很像,它像開關(guān)一樣。
<ToggleSwitch x:Name="toggleSwitch1" Header="NoMasp Toggle"
OnContent="On" OffContent="Off" Toggled="ToggleSwitch_Toggled"
Margin="409,468,0,227"/>
<ToggleSwitch x:Name="toggleSwitch2" Header="NoMasp Toggle"
OnContent="On" OffContent="Off" IsOn="True"
Toggled="ToggleSwitch_Toggled" Margin="409,565,0,130"/>
這控件和 Button 一起講還蠻合適的,我們隨意添加一個 Button,然后寫好 Click 事件如下。
private async void Button_Click(object sender, RoutedEventArgs e)
{
Windows.UI.Popups.MessageDialog messageDialog =
new Windows.UI.Popups.MessageDialog("噢,你剛剛踩到了地雷!");
await messageDialog.ShowAsync();
}
注意要在函數(shù)上加上 async 表示異步。
如果需要預(yù)覽效果,可以參見教程隨后的“用浮出控件做預(yù)覽效果”。
ComboBox 提供了下拉列表,自然也是一個很常用的控件。
<ComboBox Height="50" Width="200" Name="cbox1" SelectionChanged="cbox1_SelectionChanged"
Margin="17,47,1049,671">
<x:String>Select 1</x:String>
<x:String>Select 2</x:String>
<x:String>Select 3</x:String>
<x:String>Select 4</x:String>
</ComboBox>
ListBox 控件和 ComboBox 很相似,都可以讓用戶選擇已經(jīng)嵌入在列表中的選項(xiàng)。用法如下:
<ListBox x:Name="listBox1" SelectionChanged="listBox1_SelectionChanged" Width="100">
<x:String>Item 1</x:String>
<x:String>Item 2</x:String>
<x:String>Item 3</x:String>
</ListBox>
Winows 平臺設(shè)置時間的控件倒是很有特色,就是 DatePicker 和 TimePicker。
<DatePicker Foreground="Red" Header="NoMasp Date" Margin="3,177,0,533"/>
<TimePicker Foreground="Green" Header="NoMasp Time" Margin="3,246,0,464" Width="289"/>
以下既是截圖,也是寫這篇教程的時間。
這個控件的更多介紹也在教程隨后的“時間控件的更多介紹”中。
FlipView 是一個可以讓用戶逐個瀏覽的項(xiàng)目集合的控件,下面是相關(guān)的示例代碼。CommonAssets 文件夾完全可以定義在 Shared 目錄下,這樣 WP 也可以拿來用了。
<FlipView>
<Image Source="CommonAssets/5083.jpg"/>
<Image Source="CommonAssets/5503.jpg"/>
<Image Source="CommonAssets/6121.jpg"/>
</FlipView>
除此之外呢,我們還可以在后臺代碼中添加,下面的第二段代碼和第一段類似,不過是用的 List。
FlipView flipView = new FlipView();
flipView.Items.Add("Item 1");
flipView.Items.Add("Item 2");
flipView.SelectionChanged += filpView_SelectionChanged;
grid1.Children.Add(flipView);
List<String> listItems = new List<string>();
listItems.Add("Item 1");
listItems.Add("Item 2");
FlipView flipView = new FlipView();
flipView.ItemsSource = listItems;
flipView.SelectionChanged += filpView_SelectionChanged;
grid1.Children.Add(flipView);
除了這 2 種方式之外呢,用 CollectionViewSource 來綁定數(shù)據(jù)也是完全沒問題的。
<Page.Resources>
<CollectionViewSource x:Name="collectionVSFlipView" Source="{Binding Items}"/>
</Page.Resources>
上面是一段資源文件,然后 FlipView ListView 的 ItemsSource 添加靜態(tài)資源綁定就 OK 了。
<FlipView x:Name="flipView"
ItemsSource="{Binding Source={StaticResource collectionVSFlipView}}"/>
如果大家自己試過 FlipView 就會發(fā)現(xiàn)它的圖片資源等都是左右滾動的,如果要用上下滾動呢?那就用下面這個 ItemsPanelTemplate 模板就好了。
<FlipView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</FlipView.ItemsPanel>
如果有縮放圖片,并且可以滾動以查看圖片的需要,那么就可以用ScrollBar啦。這主要是能留給圖片的位置太小以至于圖片無法全部顯示出來。
<ScrollViewer ZoomMode="Enabled" MaxZoomFactor="12" HorizontalScrollMode="Enabled"
HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible"
VerticalScrollMode="Enabled" Height="200" Width="200" Margin="363,35,803,533">
<Image Source="CommonAssets/6121.jpg" Height="400" Width="400"/>
</ScrollViewer>
還有一個控件則可以將圖片等縮放到指定的大小的,那就是 Viewbox。大家看看下面這個圖,是不是很炫酷呢。
<Viewbox MaxHeight="33" MaxWidth="33" Margin="23.5,35,-26,-35">
<Image Source="CommonAssets/5503.jpg" Opacity="0.9 "/>
</Viewbox>
<Viewbox MaxHeight="66" MaxWidth="66" Margin="26,35,-26,-35">
<Image Source="CommonAssets/5503.jpg" Opacity="0.6"/>
</Viewbox>
<Viewbox MaxHeight="99" MaxWidth="99" Margin="26,35,-26,-35">
<Image Source="CommonAssets/5503.jpg" Opacity="0.3"/>
</Viewbox>
相信大家都已經(jīng)看過了 GridView 控件,很多 Modern 應(yīng)用都會采用的。其和 ComboBox 挺類似的。
<GridView x:Name="gView1" SelectionChanged="gView1_SelectionChanged">
<x:String>Item 1</x:String>
<x:String>Item 2</x:String>
<x:String>Item 3</x:String>
</GridView>
HyperlinkButton 既可以作為 Button 來用,也可以用來做超鏈接。
<HyperlinkButton Content="NoMasp--CSDN" NavigateUri="http://blog.csdn.net/nomasp" />
相信大家都挺喜歡玩進(jìn)度條的吧?我本人倒是覺得相比于 Win7 及 Vista 等,Win8 的進(jìn)度條變得更加有意思了。
<ProgressBar x:Name="progressBar1" IsIndeterminate="True" Width="100" Margin="607,377,659,385"/>
<ProgressBar x:Name="progressBar2" Value="70 " Width="100" Margin="607,352,659,410"/>
第一個圖是運(yùn)行中的進(jìn)度條啦;第二個圖中的上圖也就是 progressBar1,其 Value 為 70 的確定進(jìn)度的進(jìn)度條,下圖則是 progressBar2,是運(yùn)行中的進(jìn)度條在設(shè)計(jì)器中的靜止?fàn)顟B(tài)。
環(huán)形的進(jìn)度條會不會更好玩呢?
<ProgressRing x:Name="progressRing1" IsActive="True" />
比如說 win8 上的音量呀、屏幕亮度呀,這些地方都用到了滑動條。這里來看看它的 ThumbToolTipValueConverter 屬性吧。為了將值綁定到 Slider 上,我們需要有一個類,這個類需要一個為數(shù)據(jù)綁定提供值轉(zhuǎn)換的接口。可視化元素也就是 Slider 為綁定目標(biāo),其有 2 個方向:數(shù)據(jù)源->數(shù)據(jù)->綁定目標(biāo),綁定目標(biāo)->數(shù)據(jù)->數(shù)據(jù)源。
我們需要寫一個類,可以直接在 MainPage.xaml.cs 下寫,但更好是單獨(dú)新建一個類,再考慮到這個是通用應(yīng)用,所以將類新建到 Shared 下比較合適。
public class ThumbToolTipValueConverter : Windows.UI.Xaml.Data.IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
if(value is double)
{
double dValue= System.Convert.ToDouble(value);
return dValue;
}
return null;
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
return null;
}
}
然后添加以下代碼作為本地實(shí)例化的資源即可。
<Page.Resources>
<local:ThumbToolTipValueConverter x:Key="thumbToolTipValueC"/>
</Page.Resources>
最后就是傳說中的本體啦。
<Slider Width="200" Height="50" Name="slider1"
ThumbToolTipValueConverter="{StaticResource thumbToolTipValueC}" />
我們還可以添加一個 Button 和 TextBlock,讓點(diǎn)擊來在 TextBlock 上顯示 Slider 的 Value。
private void btnGetSliderValue_Click(object sender, RoutedEventArgs e)
{
tblockSlider.Text = slider1.Value.ToString();
}
更多建議: