【万里征程——Windows App开发】控件大集合2

下面再来看看一些前面还没有讲过的控件，不过控件太多以至于无法全部列出来，大家只好举一反三啦。

Button

前面最常用的控件就是Button啦，Button还有一个有意思的属性呢，当把鼠标指针放在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>

只要把鼠标放到Button上面就会显示出这张图片啦，也叫做帮助提示吧。其实更简单的方法是下面这种啦。它显示的是一个后退的样式，而且鼠标放上去会有文字Back提示哦。

<Button Content="摩天轮" ToolTipService.ToolTip="Back"
                Style="{StaticResource NavigationBackButtonNormalStyle}" />

ToggleSwitch

还有一个控件和Button很像呢，它像开关一样。

<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"/>

MessageDialog

这控件和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();
}

注意要在函数上加上async表示异步哟，我室友就遇到了这个问题。

用浮动控件做更多的事情，传送门：【万里征程——Windows App开发】用浮出控件做预览效果

ComboBox

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

ListBox控件和ComboBox很相似，都可以让用户选择已经嵌入在列表中的选项。用法如下：

<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>

DatePicker、TimePicker

Win平台设置时间的控件倒是很有特色呢，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"/>

以下既是截图，又是写这篇博客的时间啦。

想了解更多这两个控件的内容请访问： 【万里征程——Windows App开发】DatePicker&Timepicker

FlipView

FlipView是一个可以让用户逐个浏览的项目集合的控件，下面是相关的示例代码啦。CommonAssets文件夹完全可以定义在Shared目录下，这样WP也可以拿来用了。我一直都没有截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来绑定数据也是完全没问题的哦。

<Page.Resources>
    <CollectionViewSource x:Name="collectionVSFlipView" Source="{Binding Items}"/>
</Page.Resources>

上面是一段资源文件，然后FlipView ListView的ItemsSource添加静态资源绑定就OK啦。

<FlipView x:Name="flipView"
          ItemsSource="{Binding Source={StaticResource collectionVSFlipView}}"/>

如果大家自己试过FlipView就会发现它的图片资源等都是左右滚动的，如果要用上下滚动呢？那就用下面这个ItemsPanelTemplate模板就好啦。

<FlipView.ItemsPanel>
     <ItemsPanelTemplate>
          <VirtualizingStackPanel Orientation="Vertical"/>
     </ItemsPanelTemplate>
</FlipView.ItemsPanel>

ScrollBar

如果有缩放图片，并且可以滚动以查看图片的需要，那么就可以用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啦。大家看看下面这个图，是不是很炫酷呢。

    <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>

GridView

相信大家都已经看过了GridView控件，很多Modern应用都会采用的。其和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

HyperlinkButton既可以作为Button来用，也可以用来做超链接。

<HyperlinkButton Content="NoMasp--CSDN" NavigateUri="http://blog.csdn.net/nomasp" />

ProgressBar

相信大家都挺喜欢玩进度条的吧？我本人倒是觉得相比于Win7及Vista等，Win8的进度条变得更加有意思了。

<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"/>

第一个图是运行中的进度条啦；第二个图中的上图也就是progressBar1，其Value为70的确定进度的进度条，下图则是progressBar2，是运行中的进度条在设计器中的静止状态。

ProgressRing

环形的进度条会不会更好玩呢？

<ProgressRing x:Name="progressRing1" IsActive="True" />

Slider

比如说win8上的音量呀、屏幕亮度呀，这些地方都用到了滑动条。这里来看看它的ThumbToolTipValueConverter属性吧。为了将值绑定到Slider上，我们需要有一个类，这个类需要一个为数据绑定提供值转换的接口。可视化元素也就是Slider为绑定目标，其有2个方向：数据源->数据->绑定目标，绑定目标->数据->数据源。

我们需要写一个类，可以直接在MainPage.xaml.cs下写，但更好是单独新建一个类，再考虑到这个是通用应用，所以将类新建到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;
    }
}

然后添加以下代码作为本地实例化的资源即可。

<Page.Resources>
   <local:ThumbToolTipValueConverter x:Key="thumbToolTipValueC"/>
</Page.Resources>

最后就是传说中的本体啦。

<Slider Width="200" Height="50" Name="slider1"
      ThumbToolTipValueConverter="{StaticResource thumbToolTipValueC}" />

我们还可以添加一个Button和TextBlock，让点击来在TextBlock上显示Slider的Value。

private void btnGetSliderValue_Click(object sender, RoutedEventArgs e)
{
    tblockSlider.Text = slider1.Value.ToString();
}

再后面的博客中，我们还会学习到用Slider来控制图片的缩放哟。感谢大家的支持！


为使本文得到斧正和提问，转载请注明出处：
http://blog.csdn.net/nomasp

时间： 2024-10-03 09:56:03

【万里征程——Windows App开发】控件大集合2的相关文章

【万里征程——Windows App开发】应用栏

基本的用法我们在 [万里征程--Windows App开发]页面布局和基本导航中已经讲过了,这里继续补充关于应用栏的更多用法. Icon 在之前的学习中,我们知道Icon属性中有很多很多系统预定义,但也许这些还是不够的,现在就来增加几种用法咯. 字符集应用 <AppBarToggleButton Label="Sigma" Click="AppBarButton_Click"> <AppBarToggleButton.Icon> <Fo

【万里征程——Windows App开发】如何保存、读取、删除应用数据

在前面的几篇博客中,都是关于数据的,这方面的内容其实还有很多很多,省略掉一部分后,也还是有很多.这一篇将是很重要的一部分,关于保存和读取数据,对于游戏而言,这一点尤其重要. 先来看看一个大概的背景吧,我这里写的很简单啦^_^ 保存的内容就是这四个框框里填写的数据咯.先上XAML代码. <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <StackPanel Orientati

【万里征程——Windows App开发】SemanticZoom视图切换

相信用过Windows Phone或者Windows 8/8.1/10的朋友对下面这张截图肯定不陌生.这就是通过SemanticZoom来实现的,当数据过多时,这种控件尤其适用.它有一个放大视图ZoomedInView和一个缩小试图ZoomedOutView,前者主要用来显示当前页面的详细信息,后者则致力于快速导航. 那么我就自己来动手实践咯,首先我们在XAML中添加大致的界面,就像画画要先画轮廓一样. <Grid Name="grid1" Background="{T

【万里征程——Windows App开发】ListView&amp;amp;GridView之分组

本文承接[万里征程--Windows App开发]ListView&GridView之添加数据. 在上一篇中我们已经了解了怎样将数据绑定到ListView或GridView,但既然要用到这两个控件往往是因为数据繁多,那么几乎就不可避免的要让其能够分组.我们所绑定的数据源可能是项列表,其中的每个项甚至还有其自己的项,那么问题就来了. 一时不会也想不出什么宏伟的例子,就做一个简单的闹钟的时间表的ListView和GridView吧.那么先在项目中添加一个类,最好在Shared下.内容都是很简易的,闹

【万里征程——Windows App开发】页面布局和基本导航

上一篇博客中大概的新建了一个应用,几乎是空白的.如果是初学者的话现在当然想往里面加点东西对不对.那么这篇博客就来看看页面的布局都是怎样的. 首先安装上一篇博客中的顺序来新建一个项目.新建好之后就点开MainPage.xaml开始敲代码啦.^_^ <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Grid.RowDefinitions> <RowDefinitio

【万里征程——Windows App开发】文件&amp;amp;数据——写入与读取

在前面 [万里征程--Windows App开发]文件&数据--读取文件/文件夹名我们简单得获取了文件名和文件夹名,很明显没有太大的意思对吧,这里就来写真正的文件.而在 [万里征程--Windows App开发]文件&数据--文件选取器中,已经能够通过文件选取器保存和打开文件了,这里是对保存和读取文件的一些补充. 准备工作 在XAML中添加一个TextBlock用于显示相关信息,添加一个Button来使用它的Click事件,当然了,最后分别创建2个. 创建文件和读取文件 1.实例化Stor

【万里征程——Windows App开发】设置共享（共享源和共享目标）

上一篇博客简单介绍了通过粘贴板来共享数据,这一节将会添加更为强大的功能哦. 以下就是大概的样式了,随便看看就好了,这都不是重点. <Grid Background="AliceBlue"> <Grid.RowDefinitions> <RowDefinition Height="auto"/> <RowDefinition /> <RowDefinition Height="auto"/>

【万里征程——Windows App开发】开发准备

操作系统及SDK 操作系统 如果打算开发Windows App,那么你的电脑就不能再用老旧的Windows 7了.推荐使用Windows 8.1.写这篇博客的时候,我用的操作系统是Windows 10 Pro Technical Preview [Build 10041]. 操作系统除了在官网下载之外,还可以在DreamSpark等地方下载.DreamSpark上除了Office其他微软操作系统.开发工具及其他软件对学生均免费开放. 另外再推荐一个网站:MSDN i tell you Visua

【万里征程——Windows App开发】控件大集合1

添加控件的方式有多种,大家更喜欢哪一种呢? 1)使用诸如 Blend for Visual Studio 或 Microsoft Visual Studio XAML 设计器的设计工具. 2)在 Visual Studio XAML 编辑器中将控件添加到 XAML 标记中. 3)在代码中添加控件. 当应用运行时会看到你在代码中添加的控件,但在 Visual Studio XAML 设计器中看不到. 前面我们已经用过了Grid.Button等控件,现在就来系统地看看关于控件的一些属性.事件等等.