win10 UWP Controls by function

最新推荐文章于 2019-10-21 09:19:14 发布
最新推荐文章于 2019-10-21 09:19:14 发布
阅读量3.2k 收藏 1
点赞数 3
分类专栏： c# UWP xaml # win10 uwp 控件入门 文章标签： C# UWP xaml win10 windows10
c# 同时被 3 个专栏收录
436 篇文章 19 订阅
订阅专栏
UWP
181 篇文章 4 订阅
订阅专栏
win10
128 篇文章 1 订阅
订阅专栏

Windows的 XAML UI 框架提供了很多控件，支持用户界面开发库。

我现在做的一个中文版的，很多都是照着微软写，除了注释

我们先学微软做一个简单的frame，新建Page，里面放title和跳转页

    public class page
    {
        public page()
        {
            
        }

        /// <summary>
        /// 跳转页
        /// </summary>
        public Type navigate
        {
            set
            {
                _navigate = value;
            }
            get
            {
                return _navigate;
            }
        }

        /// <summary>
        /// 页面名
        /// </summary>
        public string title
        {
            set
            {
                _title = value;
            }
            get
            {
                return _title;
            }
        }

        private Type _navigate;
        private string _title;
    }

我们需要把所有页放到一个类，本来这个类可以不弄，直接放 Page 列表，使用索引，最后我还是想给宝资通打广告，所以弄了一个类，本来应该叫page管理器，于是现在修改为 baozitong 。

输入title返回type 也就是页面的 Type 可以用来跳转

       public static Type page(string title)
       {
           foreach (var temp in _page)
           {
               if (temp.title == title)
               {
                   return temp.navigate;
               }
           }
           return null;
       }
       public static List<page> _page
       {
           set;
           get;
       } = new List<page>()
       {
           new page()
           {
               title = "appbar",
               navigate = typeof(appbar)
           }
       };

每次添加page可以在 baozitong._page 添加新的页面，通过 new page() 的方式添加

界面是一个简单的 splitview 请看代码

        <ToggleButton Grid.Row="0" IsChecked="{Binding ElementName=split,Path=IsPaneOpen,Mode=TwoWay}" FontFamily="Segoe MDL2 Assets" Content="&#xE700;"></ToggleButton>
        <SplitView x:Name="split" Grid.Row="1" IsPaneOpen="True">
            <SplitView.Pane>
                <ListView ItemsSource="{x:Bind _page}" SelectionChanged="nagivate">
                   <ListView.ItemTemplate>
                       <DataTemplate>
                           <TextBlock Text="{Binding title}"></TextBlock>
                       </DataTemplate>
                   </ListView.ItemTemplate>
                </ListView>
            </SplitView.Pane>
                <Frame x:Name="frame" ></Frame>
        </SplitView>

        private void nagivate(object sender, SelectionChangedEventArgs e)
        {
            //跳转navigate
            frame.Navigate(((sender as ListView).SelectedItem as page).navigate);
        }

Appbars and commands

App bar

用于显示应用程序特定命令的工具栏。

App bar button

使用app bar风格按钮

一个简单的按钮

            <AppBarButton Label="按钮" HorizontalContentAlignment="Center"/>

我们可以加上内容

            <AppBarButton Label="按钮" HorizontalContentAlignment="Center">
                <Grid Width="48" Height="48" Margin="0,-8,0,-4">
                    <SymbolIcon Symbol="Memo"/>
                    <TextBlock Text="内容" Margin="0,2,0,0" Style="{StaticResource CaptionTextBlockStyle}" HorizontalAlignment="Center"/>
                </Grid>
            </AppBarButton>

我们可以在按钮加浮出的效果

            <AppBarButton Icon="OpenWith" Label="浮出">
                <AppBarButton.Flyout>
                    <MenuFlyout>
                        <MenuFlyoutItem Text="林德熙"/>
                        <MenuFlyoutItem Text="csdn"/>
                        <MenuFlyoutSeparator></MenuFlyoutSeparator>
                    </MenuFlyout>
                </AppBarButton.Flyout>
            </AppBarButton>

运行代码可以看到下面的界面

App bar separator

命令栏中的命令组。

如果我们有很多按钮，我们可以使用 AppBarSeparator 进行分割

            <AppBarButton Content="林德熙"></AppBarButton>
            <AppBarSeparator></AppBarSeparator>
            <AppBarButton Content="csdn"></AppBarButton>

App bar toggle button

开关命名命令栏

Command bar

一种专门处理命令按钮栏按钮

我们把刚才的按钮放在<CommandBar>

        <CommandBar>
            <AppBarButton Label="按钮" HorizontalContentAlignment="Center">
                <Grid Width="48" Height="48" Margin="0,-8,0,-4">
                    <SymbolIcon Symbol="Memo"/>
                    <TextBlock Text="内容" Margin="0,2,0,0" Style="{StaticResource CaptionTextBlockStyle}" HorizontalAlignment="Center"/>
                </Grid>
            </AppBarButton>
            
            <AppBarButton Icon="OpenWith" Label="浮出">
                <AppBarButton.Flyout>
                    <MenuFlyout>
                        <MenuFlyoutItem Text="林德熙"/>
                        <MenuFlyoutItem Text="csdn"/><!--博客没有授权红黑转载-->
                        <MenuFlyoutSeparator></MenuFlyoutSeparator>
                    </MenuFlyout>
                </AppBarButton.Flyout>
            </AppBarButton>
        </CommandBar>

我们也看到最后的按钮，如果有按钮不是常用的，就可以放在 SecondaryCommands 进行折叠

            <CommandBar.SecondaryCommands>
                <AppBarButton Label="没有授权"/>
                <AppBarButton Label="红黑转载"/>
            </CommandBar.SecondaryCommands>

Buttons

Button

响应用户输入和点击事件。

<Button Margin="72,163,0,0" Content="请勿转载"></Button>

按钮点击可以使用X:Bind绑定 ViewModel 的方法

Hyperlink

超链接

        <TextBlock HorizontalAlignment="Left" Margin="72,163,0,0" TextWrapping="Wrap"  VerticalAlignment="Top">
           <Hyperlink NavigateUri="http://blog.csdn.net/lindexi_gd"> 博客发在csdn </Hyperlink>，没有授权红黑转载，没有授权推酷转载
        </TextBlock>

Repeat button

用户点击不停响应。

和 Button 不同的在于，用户按住 Repeat button 会不断触发点击的事件

Collection/data controls

Flip view

幻灯片播放

      <FlipView>
            <Image Source="Assets/QQ截图20160328094421.png"></Image>
            <Image Source="Assets/QQ截图20160328094435.png"></Image>
      </FlipView>

更好看的效果请看 分享大麦UWP版本开发历程-01.响应式轮播顶部焦点图 - 大麦胖哥 - 博客园

Grid view

行列布局，可以水平滚动控件。

Items control

提供UI指定数据模板

List view

在一个列表上的项目的集合，可以垂直或水平滚动的控件

在演示如何使用之前，先创建一个 viewmodel 用来放数据

    public class viewmodel : notify_property
    {
        public viewmodel()
        {

        }
    }

如果绑定的属性列表需要在值发生添加的时候动态修改界面的列表，需要使用 ObservableCollection 获得通过win10 uwp 通知列表的方法

        public ObservableCollection<string> lindexi
        {
            set;
            get;
        } = new ObservableCollection<string>()
        {
            "林德熙",
            "csdn"
        };

在界面绑定 ViewModel 的属性

        <ListView ItemsSource="{x:Bind view.lindexi}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{x:Bind }"></TextBlock>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

Date and time controls

Calendar date picker

日历日期选择器

Calendar view

日程表，让用户选择日期

Time picker

用户选择一个时间

Flyouts

Flyout

这是浮出控件，简单的使用是用来显示一条消息

        <Button Margin="200,153,0,0" Content="请勿转载">
            <Button.Flyout>
                <Flyout>
                    <StackPanel>
                        <TextBlock Text="http://blog.csdn.net/lindexi_gd"/>
                    </StackPanel>
                </Flyout>
            </Button.Flyout>
        </Button>

Menu flyout

暂时显示命令或列出选项给用户选择

            <AppBarButton Icon="OpenWith" Label="浮出">
                <AppBarButton.Flyout>
                    <MenuFlyout>
                        <MenuFlyoutItem Text="林德熙"/>
                        <MenuFlyoutItem Text="csdn"/>
                        <MenuFlyoutSeparator></MenuFlyoutSeparator>
                    </MenuFlyout>
                </AppBarButton.Flyout>
            </AppBarButton>

Popup menu

弹出自己写的菜单

Tooltip

提示，使用方法和 Flyout 差不多

<Button Content="Button" Click="请勿转载" 
        ToolTipService.ToolTip="没有授权红黑转" />

Images

Image

图片

<Image Source="Assets/QQ截图20160328094421.png"></Image>

如果需要gif的图片显示请看 http://www.songsong.org/post/2015/10/11/ImageLib.html

Graphics and ink

InkCanvas

<InkCanvas></InkCanvas>

手写

更多关于笔迹请看 win10 uwp 使用油墨输入

保存文件可以去 edi.wang 的博客看

Shapes

椭圆,矩形、线、贝塞尔曲线路径

            <Ellipse Fill="Black" Width="100" Margin="10,10,10,10" Height="200"></Ellipse>


            <Rectangle Fill="Black" Width="10" Height="100" Margin="10,10,10,10"></Rectangle>


           <Path Stroke="Black" StrokeThickness="10">
                <Path.Data>
                    <PathGeometry>
                        <PathGeometry.Figures>
                            <PathFigure StartPoint="10,100">
                                <PathFigure.Segments>
                                    <BezierSegment Point1="100,50" Point2="150,200" Point3="200,100"></BezierSegment>
                                </PathFigure.Segments>
                            </PathFigure>
                        </PathGeometry.Figures>
                    </PathGeometry>
                </Path.Data>
            </Path>

Layout controls

Border

边框

Canvas

画板

Grid

网格布局

StackPanel

堆放布局

Scroll viewer

滚动视图

            <ScrollViewer Height="20" VerticalScrollBarVisibility="Visible">
                <StackPanel Orientation="Vertical">
                    <TextBlock Text=" 林德熙"/>
                    <TextBlock Text="脑残粉"></TextBlock>
                </StackPanel>
            </ScrollViewer>

Viewbox

可以改变内容的长宽

                <Viewbox Width="100">
                    <TextBlock Margin="10,10,10,10" Text="林德熙"></TextBlock>
                </Viewbox>
                <Viewbox Width="200">
                    <TextBlock Margin="10,10,10,10" Text="林德熙"></TextBlock>
                </Viewbox>
                <Viewbox Width="300">
                    <TextBlock Margin="10,10,10,10" Text="林德熙"></TextBlock>
                </Viewbox>

Media controls

Media element

播放视频

        private async void speech(string str, MediaElement media_element)
        {
            SpeechSynthesizer synthesizer = new SpeechSynthesizer();
            SpeechSynthesisStream stream = await synthesizer.SynthesizeTextToStreamAsync(str);
            media_element.SetSource(stream, stream.ContentType);
            //http://blog.csdn.net/lindexi_gd
            media_element.Play();
        }

语音分析的功能需要在权限打开麦克风，上面代码是将文本读出来

其实我之前用它播放音频，使用的项目请看 https://github.com/lindexi/Markdown

这个项目还有没写好，在全屏出问题，关于这个项目使用的技术请看 http://blog.csdn.net/lindexi_gd 之后找到解决将会写新的博客

MediaTransportControls

控制播放

Navigation

Hub

全景视图控件

            <Hub>
                <HubSection Header="林德熙"> 
                    <DataTemplate>
                        <Image Source="Assets/QQ截图20160328094421.png"></Image>
                    </DataTemplate>
                </HubSection>
                <HubSection Header="http://blog.csdn.net/lindexi_gd">
                    <DataTemplate>
                        <Image Source="Assets/QQ截图20160328094435.png"></Image>
                    </DataTemplate>
                </HubSection>
                <HubSection Header="sharp">
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Ellipse Fill="Black" Width="100" Margin="10,10,10,10" Height="200"></Ellipse>
                            <Rectangle Fill="Black" Width="100" Height="100" Margin="10,10,10,10"></Rectangle>
                            <Path Stroke="Black" StrokeThickness="10">
                                <Path.Data>
                                    <PathGeometry>
                                        <PathGeometry.Figures>
                                            <PathFigure StartPoint="10,100">
                                                <PathFigure.Segments>
                                                    <BezierSegment Point1="100,50" Point2="150,200" Point3="200,100"></BezierSegment>
                                                </PathFigure.Segments>
                                            </PathFigure>
                                        </PathGeometry.Figures>
                                    </PathGeometry>
                                </Path.Data>
                            </Path>
                        </StackPanel>
                    </DataTemplate>
                </HubSection>
            </Hub>

Progress controls

Progress bar

进度条

进度条分为带进度的和不带进度的

 <ProgressBar Value="10" Height="100"></ProgressBar>

通过设置属性 IsIndeterminate 可以设置为不带进度的进度条

        <ProgressBar Value="10" IsIndeterminate="True" Height="100"></ProgressBar>

Progress ring

        <ProgressRing Width="100" IsActive="True"></ProgressRing>

更多进度条请看

win10 uwp 进度条 Marquez

win10 uwp 进度条 WaveProgressControl

Text controls

Auto suggest box

       <AutoSuggestBox PlaceholderText="输入林德熙" QueryIcon="Find" Margin="10,10,10,10" TextChanged="query" DisplayMemberPath="name" ></AutoSuggestBox>

需要在后台写一些代码，请看 https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlAutoSuggestBox

Password box

密码输入

        <PasswordBox Margin="10,10,10,10" Height="10" PlaceholderText="输入中文密码" IsPasswordRevealButtonEnabled="True"></PasswordBox>

Rich edit box

<RichEditBox Name="redit" Grid.Row="3" Margin="10,10,10,10" ContextMenuOpening="OnContextMenuOpening">
            <FlyoutBase.AttachedFlyout>
                <MenuFlyout>
                    <MenuFlyoutItem Text="复制" Click="OnCopy"/>
                    <MenuFlyoutItem Text="剪切" Click="OnCut"/>
                    <MenuFlyoutItem Text="粘贴" Click="OnPaste"/>
                    <MenuFlyoutSeparator/>
                    <MenuFlyoutSubItem Text="字号">
                        <MenuFlyoutItem Text="16" Tag="16" Click="OnFontSize" />
                        <MenuFlyoutItem Text="20" Tag="20" Click="OnFontSize"/>
                        <MenuFlyoutItem Text="24" Tag="24" Click="OnFontSize" />
                        <MenuFlyoutItem Text="36" Tag="36" Click="OnFontSize"/>
                        <MenuFlyoutItem Text="48" Tag="48" Click="OnFontSize"/>
                    </MenuFlyoutSubItem>
                    <!--分割-->
                    <MenuFlyoutSeparator/>
                    <ToggleMenuFlyoutItem Text="加粗" Click="OnBold" />
                    <MenuFlyoutSeparator/>
                    <MenuFlyoutSubItem Text="下划线">
                        <MenuFlyoutItem Text="无" Tag="-1" Click="OnUnderline" />
                        <MenuFlyoutItem Text="单实线" Tag="0" Click="OnUnderline"/>
                        <MenuFlyoutItem Text="双实线" Tag="1" Click="OnUnderline"/>
                        <MenuFlyoutItem Text="虚线" Tag="2" Click="OnUnderline"/>
                    </MenuFlyoutSubItem>
                    <MenuFlyoutSeparator/>
                    <MenuFlyoutSubItem Text="颜色">
                        <MenuFlyoutItem Text="黑色" Tag="黑色" Click="OnTinct"/>
                        <MenuFlyoutItem Text="蓝色" Tag="蓝色" Click="OnTinct"/>
                        <MenuFlyoutItem Text="白色" Tag="白色" Click="OnTinct"/>
                    </MenuFlyoutSubItem>
                </MenuFlyout>
            </FlyoutBase.AttachedFlyout>
        </RichEditBox>

Text block

简单输出文本

        <TextBlock HorizontalAlignment="Left" Margin="72,163,0,0" Text="博客发在csdn ，没有授权红黑转载，没有授权推酷转载" TextWrapping="Wrap"  VerticalAlignment="Top" ></TextBlock>

Text box

用户输入文本

            <TextBox Margin="10,10,10,10" Height="10"></TextBox>

博客：http://blog.csdn.net/lindexi_gd

现在委托csdn维权，没有授权的网站不要转载

原文 https://msdn.microsoft.com/en-us/windows/uwp/controls-and-patterns/controls-by-function

一些控件例子 https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlUIBasics

知识共享许可协议
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。欢迎转载、使用、重新发布，但务必保留文章署名林德熙(包含链接:http://blog.csdn.net/lindexi_gd )，不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。如有任何疑问，请与我联系。

lindexi_gd
关注
专栏目录
win10 uwp 如何开始写 uwp 程序
lindexi
05-19 7428
本文告诉大家如何创建一个 UWP 程序 这是一系列的 uwp 入门博客，所以写的很简单
UWP入门（八）--几个简单的控件
怪咖先森的博客
03-22 6088
每天看几个，要不聊几天我就可以看完啦，加油！看效果1. CheckBox <TextBlock Grid.Row="0" Text="CheckBox" VerticalAlignment="Center" /> <StackPanel Grid.Column="1" Margin="20,10,0,10"
看起来没用的 UWP Controls
Troublor的博客
03-18 593
Hub &amp; ListView 看到Hub第一感觉就是Win8时代的横向滑动布局，那个时候就觉得很鸡肋，既不方便，又不符合使用习惯，于是就觉得这个控件没有用了，保留下来的原因也许是为了向前兼容把。 然后，被自己打脸了，刷IT之家UWP的时候，突然发现这个Hub不就正是用在了文章列表的最顶端的吗 不过话又说回来了，我也没看过IT之家UWP的源码，也不一定用的就是Hub控件，但至少Hu...
五个存疑的uwp控件
weixin_30823683的博客
03-19 132
刚开始写这个我是拒绝的，怎么会有人闲着没事费心往上添一些没用的控件。但是秉持着认真学习多见多看独立思考等原则，大概了解了XAML Controls Gallery的功能。下面谈一谈我认为的好像没有这个也可以的控件们。 1.CalenDarDatePicker 认为这个控件十分鸡肋，我能想到的几乎所有能用到日历的地方似乎都有更好的选择：比如选择某一天添加计划，先用选一天然后在写...
Windows 应用商店应用程序中的 Hub 项目和控件一览
王韧竹 的专栏
04-04 1894
Windows 应用商店应用程序中的 Hub 项目和控件一览
Windows 10 UWP控件简述
qq1617176084的博客
10-26 742
1BottomAppBar  在page底部 这是关闭情况下    这是开启情况下 值得注意的是需要配合appbarbutton配合使用，下面是文档结构，也可以将AppBarSeparator加入其中，这个空间将产生一个下划线，且一般无法点击 其中appbarbutton可以在属性的图标中改变图表 见下图 ，说到这里不得不提另外一个能添加到内容里的控件
Win10 UWP应用代理工具
04-13
全选设置之后UWP即可访问localhost，可以走代理。
C#实现win10 uwp 右击浮出窗在点击位置
09-01
在Windows 10 UWP应用开发中，常常需要创建一种用户友好的交互方式，即当用户右键点击某个元素时，能在一个特定的位置显示一个浮出菜单（MenuFlyout）。本篇文章将详细介绍如何使用C#实现这样的功能，使得MenuFlyout...
Win10 UWP 开发教程 课程 资源
09-27
Win10 UWP 开发教程 课程 资源 80课时 课程地址：http://blog.csdn.net/shanguuncle/article/details/78111649
uwp 如何使用c#生成带MenuFlyoutItem的AppBarButton
chent86的博客
03-20 648
我们先分别创建AppBarButton和MenuFlyout控件，然后再将二者关联即可。 如果是使用xmal写死的话，这一步使用<AppBarButton.Flyout>控件就可以了， 而如果要用c#关联，则需要使用到SetAttachedFlyout函数将二者关联， 再在AppBarButton的click事件中添加ShowAttachedFlyout事件。
[WPF自定义控件库] 模仿UWP的ProgressRing
dino.c
10-21 294
1. 为什么需要ProgressRing 虽然我认为这个控件库的控件需要模仿Aero2的外观，但总有例外，其中一个就是ProgressRing。ProgressRing是来自UWP的控件，部分代码参考了 这里。ProgressRing的使用方式运行效果如下： <kino:ProgressRing IsActive="True" Height="4...
Ubuntu Navicat for MySQL安装以及破解方案
嚼菜根
07-10 4312
今天发现Navicat for MySQL有LINUX版本了哈， 开心的说， 首先上官网上下载LINUX版本：  http://www.navicat.com/download 1. 下载 navicat110_mysql_en.tar.gz 文件  2. 下载后解压tar文件 tar -zxvf  /home/rain/download/navicat8_mysq
win10 uwp 自定义控件 SplitViewItem
lindexi
07-05 4770
本文主要是因为汉堡菜单里面列出的菜单很多重复的图标和文字，我把它作为控件，因为是随便写，可能存在错误，如果发现了，请和我说或关掉浏览器，请不要发不良言论。 我们使用汉堡菜单，经常需要一个 需要一个图标和一个文字 我开始写 ListViewItem.Content> S
win10 uwp 俄罗斯方块
lindexi
05-19 9546
俄罗斯方块是一个很经典的游戏，做一个UWP俄罗斯方块没有什么用，我想说的是移植，把经典游戏移植到UWP
UWP: Win10 软件开发之学习笔记（2017.5.11更新）
linwh8的博客
03-22 4021
现代操作系统应用开发以下是我个人的学习笔记，欢迎大家提出疑问，我们一起探讨。github1.XAML XAML只是特定格式的XML，它遵循所有XML的规则。XML的使用者就是将我们的代码变成windows10可执行文件的编译器； XAML是一种简单的创建类的实例并设置属性的方法，代码量比C#节省了很多。 XAML中的类型转换器使得用户在设置属性时能用一些非常简洁的字符来代替冗长的类型名和枚举值 XA
win10 UWP读写文件
weixin_30892037的博客
10-09 695
C# uwp应用的文件读写最常见错误就是没有权限。 而最简单的方法是对已知的文件路径进行访问 已知的文件路径常见的是自身的路径 权限这个和之前不同，UWP读写文件多用StorageFile来读写文件 [TOC] StorageFile没有直接的打开一个文件的做法，而是通过StorageFolder创建，打开文件来进行。 下面代码需要using Windows.Storage...
Mysql的客户端工具Navigate，对存储过程的调用
zhengqiqiqinqin的专栏
12-29 4099
Mysql的客户端工具Navigate，对存储过程的调用 原文地址：http://www.cnblogs.com/reveyjay/archive/2012/01/03/2311079.html MySql推荐客户端navicat，下载地址 ：http://www.navicat.com/en/download/download.html ，网上有可供下载的注册码生成器。
UWP作业（一）控件学习
umarumaru
03-19 547
对UWP控件的一些认识了解 PasswordBox:   PasswordBox这个控件实现了输入密码的功能，可以通过对passwordBox_PasswordChanged()函数的编写改变对密码的要求等（比如禁止某些输入的出现）。同时，该控件有“睁眼模式”，以看到密码本身。控件自带的“睁眼模式”允许鼠标点击情况下的密码显示。但是这样的模式下，没有办法通过一次点击让密码一直显示。改变的方...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值