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

2021-08-03 18:27:18

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

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

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

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开发】控件大集合2

用浮动控件做很多其它的事情。传送门：【万里征程——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>

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

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开发】控件大集合2

想了解很多其它这两个控件的内容请訪问：【万里征程——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>

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

除此之外呢，我们还能够在后台代码中加入，以下的第二段代码和第一段相似。只是是用的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>

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

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>

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

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，是执行中的进度条在设计器中的精巧状态。

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

ProgressRing

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

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

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

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

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

我们还能够加入一个Button和TextBlock，让点击来在TextBlock上显示Slider的Value。

private void btnGetSliderValue_Click(object sender, RoutedEventArgs e)

{

    tblockSlider.Text = slider1.Value.ToString();

}

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

再后面的博客中，我们还会学习到用Slider来控制图片的缩放哟。

感谢大家的支持！

为使本文得到斧正和提问，转载请注明出处：

http://blog.csdn.net/nomasp

码农公寓

Button

ToggleSwitch

MessageDialog

ComboBox

ListBox

DatePicker、TimePicker

FlipView

ScrollBar

Viewbox

GridView

HyperlinkButton

ProgressBar

ProgressRing

Slider

相关文章