Windows的XAML UI框架提供了很多控件，支持用户界面开发库。其中一些有可视化，一些布局。

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

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

我们先学微软做一个简单的frame，新建Page，

里面放title和跳转页

  1.     public class page
  2.     {
  3.         public page()
  4.         {
  6.         }
  8.         /// <summary>
  9.         /// 跳转页
  10.         /// </summary>
  11.         public Type navigate
  12.         {
  13.             set
  14.             {
  15.                 _navigate = value;
  16.             }
  17.             get
  18.             {
  19.                 return _navigate;
  20.             }
  21.         }
  23.         /// <summary>
  24.         /// 页面名
  25.         /// </summary>
  26.         public string title
  27.         {
  28.             set
  29.             {
  30.                 _title = value;
  31.             }
  32.             get
  33.             {
  34.                 return _title;
  35.             }
  36.         }
  38.         private Type _navigate;
  39.         private string _title;
  40.     }

我们需要把所有页放到一个类，本来这个类可以不弄，直接放Page

使用索引

最后我还是想给宝资通打广告

弄了一个类，本来应该叫page管理器，我叫baozitong

输入title返回type

  1.        public static Type page(string title)
  2.        {
  3.            foreach (var temp in _page)
  4.            {
  5.                if (temp.title == title)
  6.                {
  7.                    return temp.navigate;
  8.                }
  9.            }
  10.            return null;
  11.        }
  12.        public static List<page> _page
  13.        {
  14.            set;
  15.            get;
  16.        }=new List<page>()
  17.        {
  18.            new page()
  19.            {
  20.                title = "appbar",
  21.                navigate = typeof(appbar)
  22.            }
  23.        };

每次添加page可以在baozitong._page new page

界面splitview

  1.         <ToggleButton Grid.Row="0" IsChecked="{Binding ElementName=split,Path=IsPaneOpen,Mode=TwoWay}" FontFamily="Segoe MDL2 Assets" Content=""></ToggleButton>
  2.         <SplitView x:Name="split" Grid.Row="1" IsPaneOpen="True">
  3.             <SplitView.Pane>
  4.                 <ListView ItemsSource="{x:Bind _page}" SelectionChanged="nagivate">
  5.                    <ListView.ItemTemplate>
  6.                        <DataTemplate>
  7.                            <TextBlock Text="{Binding title}"></TextBlock>
  8.                        </DataTemplate>
  9.                    </ListView.ItemTemplate>
  10.                 </ListView>
  11.             </SplitView.Pane>
  12.                 <Frame x:Name="frame" ></Frame>
  13.         </SplitView>
  1.         private void nagivate(object sender, SelectionChangedEventArgs e)
  2.         {
  3.             //跳转navigate
  4.             frame.Navigate(((sender as ListView).SelectedItem as page).navigate);
  5.         }

Appbars and commands

App bar

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

App bar button

使用app bar风格按钮

一个简单的按钮

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



我们可以加上内容

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



我们可以在按钮加浮出

  1.             <AppBarButton Icon="OpenWith" Label="浮出">
  2.                 <AppBarButton.Flyout>
  3.                     <MenuFlyout>
  4.                         <MenuFlyoutItem Text="林德熙"/>
  5.                         <MenuFlyoutItem Text="csdn"/>
  6.                         <MenuFlyoutSeparator></MenuFlyoutSeparator>
  7.                     </MenuFlyout>
  8.                 </AppBarButton.Flyout>
  9.             </AppBarButton>

App bar separator

命令栏中的命令组。

如果我们有很多按钮，我们可以使用

  1.             <AppBarButton Content="林德熙"></AppBarButton>
  2.             <AppBarSeparator></AppBarSeparator>
  3.             <AppBarButton Content="csdn"></AppBarButton>

App bar toggle button

开关命名命令栏

Command bar

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

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

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

我们也看到最后的按钮，如果有一些用不到，但是有用

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

Buttons

Button

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

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



按钮点击可以使用X:Bind

Hyperlink

超链接

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

Repeat button

用户点击不停响应。

Collection/data controls

Flip view

幻灯片播放

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

http://www.cnblogs.com/Damai-Pang/p/5201206.html

Grid view

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

Items control

提供UI指定数据模板

List view

在一个列表上的项目的集合,可以垂直滚动控件

我们做一个viewmodel

  1.     public class viewmodel : notify_property
  2.     {
  3.         public viewmodel()
  4.         {
  6.         }
  7.     }

我们依列表

  1.         public ObservableCollection<string> lindexi
  2.         {
  3.             set;
  4.             get;
  5.         } = new ObservableCollection<string>()
  6.         {
  7.             "林德熙",
  8.             "csdn"
  9.         };
  1.         <ListView ItemsSource="{x:Bind view.lindexi}">
  2.             <ListView.ItemTemplate>
  3.                 <DataTemplate>
  4.                     <TextBlock Text="{x:Bind }"></TextBlock>
  5.                 </DataTemplate>
  6.             </ListView.ItemTemplate>
  7.         </ListView>

Date and time controls

Calendar date picker

日历日期选择器



Calendar view

日程表，让用户选择日期

Time picker

用户选择一个时间

Flyouts

Flyout

显示一条消息

  1.         <Button Margin="200,153,0,0" Content="请勿转载">
  2.             <Button.Flyout>
  3.                 <Flyout>
  4.                     <StackPanel>
  5.                         <TextBlock Text="http://blog.csdn.net/lindexi_gd"/>
  6.                     </StackPanel>
  7.                 </Flyout>
  8.             </Button.Flyout>
  9.         </Button>

Menu flyout

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

  1.             <AppBarButton Icon="OpenWith" Label="浮出">
  2.                 <AppBarButton.Flyout>
  3.                     <MenuFlyout>
  4.                         <MenuFlyoutItem Text="林德熙"/>
  5.                         <MenuFlyoutItem Text="csdn"/>
  6.                         <MenuFlyoutSeparator></MenuFlyoutSeparator>
  7.                     </MenuFlyout>
  8.                 </AppBarButton.Flyout>
  9.             </AppBarButton>

Popup menu

弹出自己写的菜单

Tooltip

提示

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

Images

Image

图片

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

如果需要gif可以 http://www.songsong.org/post/2015/10/11/ImageLib.html

Graphics and ink

InkCanvas

  1. <InkCanvas></InkCanvas>

手写



保存文件可以去edi.wang

Shapes

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

  1.             <Ellipse Fill="Black" Width="100" Margin="10,10,10,10" Height="200"></Ellipse>
  1.             <Rectangle Fill="Black" Width="10" Height="100" Margin="10,10,10,10"></Rectangle>
  1.            <Path Stroke="Black" StrokeThickness="10">
  2.                 <Path.Data>
  3.                     <PathGeometry>
  4.                         <PathGeometry.Figures>
  5.                             <PathFigure StartPoint="10,100">
  6.                                 <PathFigure.Segments>
  7.                                     <BezierSegment Point1="100,50" Point2="150,200" Point3="200,100"></BezierSegment>
  8.                                 </PathFigure.Segments>
  9.                             </PathFigure>
  10.                         </PathGeometry.Figures>
  11.                     </PathGeometry>
  12.                 </Path.Data>
  13.             </Path>

Layout controls

Border

边框

Canvas

画板

Grid

网格布局

StackPanel

堆放布局

Scroll viewer

滚动视图

  1.             <ScrollViewer Height="20" VerticalScrollBarVisibility="Visible">
  2.                 <StackPanel Orientation="Vertical">
  3.                     <TextBlock Text=" 林德熙"/>
  4.                     <TextBlock Text="脑残粉"></TextBlock>
  5.                 </StackPanel>
  6.             </ScrollViewer>

Viewbox

可以改变内容的长宽

  1.                 <Viewbox Width="100">
  2.                     <TextBlock Margin="10,10,10,10" Text="林德熙"></TextBlock>
  3.                 </Viewbox>
  4.                 <Viewbox Width="200">
  5.                     <TextBlock Margin="10,10,10,10" Text="林德熙"></TextBlock>
  6.                 </Viewbox>
  7.                 <Viewbox Width="300">
  8.                     <TextBlock Margin="10,10,10,10" Text="林德熙"></TextBlock>
  9.                 </Viewbox>

Media controls

Media element

播放视频

其实我之前用它播放音频https://github.com/lindexi/Markdown 

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

还有没写好，全屏出问题，可以来我博客http://blog.csdn.net/lindexi_gd之后找到解决将会写一个，可能是预览版，在真机就出错

MediaTransportControls

控制播放

Navigation

Hub

全景视图控件

  1.             <Hub>
  2.                 <HubSection Header="林德熙">
  3.                     <DataTemplate>
  4.                         <Image Source="Assets/QQ截图20160328094421.png"></Image>
  5.                     </DataTemplate>
  6.                 </HubSection>
  7.                 <HubSection Header="http://blog.csdn.net/lindexi_gd">
  8.                     <DataTemplate>
  9.                         <Image Source="Assets/QQ截图20160328094435.png"></Image>
  10.                     </DataTemplate>
  11.                 </HubSection>
  12.                 <HubSection Header="sharp">
  13.                     <DataTemplate>
  14.                         <StackPanel Orientation="Horizontal">
  15.                             <Ellipse Fill="Black" Width="100" Margin="10,10,10,10" Height="200"></Ellipse>
  16.                             <Rectangle Fill="Black" Width="100" Height="100" Margin="10,10,10,10"></Rectangle>
  17.                             <Path Stroke="Black" StrokeThickness="10">
  18.                                 <Path.Data>
  19.                                     <PathGeometry>
  20.                                         <PathGeometry.Figures>
  21.                                             <PathFigure StartPoint="10,100">
  22.                                                 <PathFigure.Segments>
  23.                                                     <BezierSegment Point1="100,50" Point2="150,200" Point3="200,100"></BezierSegment>
  24.                                                 </PathFigure.Segments>
  25.                                             </PathFigure>
  26.                                         </PathGeometry.Figures>
  27.                                     </PathGeometry>
  28.                                 </Path.Data>
  29.                             </Path>
  30.                         </StackPanel>
  31.                     </DataTemplate>
  32.                 </HubSection>
  33.             </Hub>

Progress controls

Progress bar

进度条

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

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

Progress ring

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

Text controls

Auto suggest box

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

密码输入

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

Rich edit box

  1. <RichEditBox Name="redit" Grid.Row="3" Margin="10,10,10,10" ContextMenuOpening="OnContextMenuOpening">
  2.             <FlyoutBase.AttachedFlyout>
  3.                 <MenuFlyout>
  4.                     <MenuFlyoutItem Text="复制" Click="OnCopy"/>
  5.                     <MenuFlyoutItem Text="剪切" Click="OnCut"/>
  6.                     <MenuFlyoutItem Text="粘贴" Click="OnPaste"/>
  7.                     <MenuFlyoutSeparator/>
  8.                     <MenuFlyoutSubItem Text="字号">
  9.                         <MenuFlyoutItem Text="16" Tag="16" Click="OnFontSize" />
  10.                         <MenuFlyoutItem Text="20" Tag="20" Click="OnFontSize"/>
  11.                         <MenuFlyoutItem Text="24" Tag="24" Click="OnFontSize" />
  12.                         <MenuFlyoutItem Text="36" Tag="36" Click="OnFontSize"/>
  13.                         <MenuFlyoutItem Text="48" Tag="48" Click="OnFontSize"/>
  14.                     </MenuFlyoutSubItem>
  15.                     <!--分割-->
  16.                     <MenuFlyoutSeparator/>
  17.                     <ToggleMenuFlyoutItem Text="加粗" Click="OnBold" />
  18.                     <MenuFlyoutSeparator/>
  19.                     <MenuFlyoutSubItem Text="下划线">
  20.                         <MenuFlyoutItem Text="无" Tag="-1" Click="OnUnderline" />
  21.                         <MenuFlyoutItem Text="单实线" Tag="0" Click="OnUnderline"/>
  22.                         <MenuFlyoutItem Text="双实线" Tag="1" Click="OnUnderline"/>
  23.                         <MenuFlyoutItem Text="虚线" Tag="2" Click="OnUnderline"/>
  24.                     </MenuFlyoutSubItem>
  25.                     <MenuFlyoutSeparator/>
  26.                     <MenuFlyoutSubItem Text="颜色">
  27.                         <MenuFlyoutItem Text="黑色" Tag="黑色" Click="OnTinct"/>
  28.                         <MenuFlyoutItem Text="蓝色" Tag="蓝色" Click="OnTinct"/>
  29.                         <MenuFlyoutItem Text="白色" Tag="白色" Click="OnTinct"/>
  30.                     </MenuFlyoutSubItem>
  31.                 </MenuFlyout>
  32.             </FlyoutBase.AttachedFlyout>
  33.         </RichEditBox>

Text block

简单输出文本

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

Text box

用户输入文本

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

win10 UWP Controls by function的更多相关文章

  1. win10 uwp 使用 Border 布局

    在 UWP 写一个界面需要将元素排列,在排列元素的时候有特殊的元素叫容器.容器的意思是元素里面包含元素,在 UWP 用到的容器有很多,也可以自己写一个.简单的容器是 Border 边框控件,如控件说的 ...

  2. Win10 UWP开发系列：使用VS2015 Update2+ionic开发第一个Cordova App

    安装VS2015 Update2的过程是非常曲折的.还好经过不懈的努力,终于折腾成功了. 如果开发Cordova项目的话,推荐大家用一下ionic这个框架,效果还不错.对于Cordova.PhoneG ...

  3. Win10 UWP开发系列：实现Master/Detail布局

    在开发XX新闻的过程中,UI部分使用了Master/Detail(大纲/细节)布局样式.Win10系统中的邮件App就是这种样式,左侧一个列表,右侧是详情页面.关于这种 样式的说明可参看MSDN文档: ...

  4. Win10 UWP开发实现Bing翻译

    微软在WP上的发展从原来的Win7到Win8,Win8.1,到现在的Win10 UWP,什么是UWP,UWP即Windows 10 中的Universal Windows Platform简称.即Wi ...

  5. Win10/UWP开发—使用Cortana语音与App后台Service交互

    上篇文章中我们介绍了使用Cortana调用前台App,不熟悉的移步到:Win10/UWP开发—使用Cortana语音指令与App的前台交互,这篇我们讲讲如何使用Cortana调用App的后台任务,相比 ...

  6. 【Win10 UWP】后台任务与动态磁贴

    动态磁贴(Live Tile)是WP系统的大亮点之一,一直以来受到广大用户的喜爱.这一讲主要研究如何在UWP应用里通过后台任务添加和使用动态磁贴功能. 从WP7到Win8,再到Win10 UWP,磁贴 ...

  7. 【Win10 UWP】URI Scheme（一）：Windows Store协议的解析和使用

    协议是Windows Phone和Windows Store应用的一个重要特点,可以做到在不同应用之间进行互相呼起调用.小小协议,学问大着呢.我打算写几篇关于协议在UWP中使用的文章. 这一讲的主要对 ...

  8. 【Win10 UWP】QQ SDK（二）：SDK的回调处理

    上一讲,我们介绍了QQ SDK的使用方法,请看<[Win10 UWP]QQ SDK(一):SDK基本使用方法> 一. 回调的基本形式 从前面的介绍中我们知道,我们的应用和QQ客户端之间需要 ...

  9. Win10 UWP应用发布流程

    简介 Win10 UWP应用作为和Win8.1 UAP应用不同的一种新应用形式,其上传至Windows应用商店的流程也有了一些改变. 这篇博文记录了我们发布一款Win10 UWP应用的基本流程,希望为 ...

随机推荐

  1. 201521123074 《Java程序设计》第7周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. (嗯..都画了那么久的导图,还是用导图归纳吧~) 2. 书面作业 ArrayList代码分析 1.1 解释ArrayList ...

  2. 201521123098 《Java程序设计》 第4周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. 1. 学习了继承的基本含义,用"class 子类名 extend 父类名" ...

  3. 201521123047 《Java学习笔记》第二周学习总结

    1. 本周学习总结 -知道并了解到浮点数的误差关系,懂得运java.math.BigDecimal来进行浮点数的精确计算 -对于"="与"=="的区分 -字符串 ...

  4. 201521123113 《Java程序设计》第2周学习总结

    1.本周学习总结 学习了各种java数据类型以及各种运算符的使用 string类之所以好用是因为这是人可以看得懂的类型,操作简便 Scanner扫描器与标准输出输入用法上的不同,Scanner较标准输 ...

  5. Java课程设计+购物车WEB页面

    1. 团队名称(keke) 徐婉萍:网络1511 201521123006 2. 项目git地址 3. 项目git提交记录截图 4. 项目功能架构图与主要功能流程图 项目功能架构图 项目主要功能流程图 ...

  6. 201521145048《java程序与设计》第9周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 Q1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自 ...

  7. 201521123019 《Java程序设计》第11周学习总结

    1. 本章学习总结 2. 书面作业 Q1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1.1除了使用synchronized修饰方法实现互斥同步访问,还有什么办法实现互斥同步访 ...

  8. 201521123008《Java程序设计》第11周学习总结

    1. 本周学习总结 2. 书面作业 本次PTA作业题集多线程 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1.1 除了使用synchronized修饰方法实现互斥同步访问, ...

  9. openfire ：openfire 不同类型插件的开发示例

    新建一个自己的Javaproject工程,添加的jar包如下: 将jasper-compiler.jar.jasper-runtime.jar.servlet.jar添加到新建的工程中.如果没有jar ...

  10. linux系统命令<二>----du的使用方法

    1> 要显示一个目录树及其每个子树的磁盘使用情况 du /home/linux 这在/home/linux目录及其每个子目录中显示了磁盘块数. 2> 要通过以1024字节为单位显示一个目录 ...