Windows的XAML UI框架提供了很多控件，支持用户界面开发库。其中一些有可视化，一些布局。  一些控件例子：[https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlUIBasics](https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlUIBasics) 我现在做的一个中文版的，很多都是照着微软写，除了注释 我们先学微软做一个简单的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 ~~~ 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 命令栏中的命令组。  如果我们有很多按钮，我们可以使用 ~~~ <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> ~~~  我们也看到最后的按钮，如果有一些用不到，但是有用 ~~~ <CommandBar.SecondaryCommands> <AppBarButton Label="没有授权"/> <AppBarButton Label="红黑转载"/> </CommandBar.SecondaryCommands> ~~~  ## Buttons ### Button 响应用户输入和点击事件。 ~~~ <Button Margin="72,163,0,0" Content="请勿转载"></Button> ~~~  按钮点击可以使用`X:Bind` ### 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 用户点击不停响应。 ## Collection/data controls ### Flip view 幻灯片播放 ~~~ <FlipView> <Image Source="Assets/QQ截图20160328094421.png"></Image> <Image Source="Assets/QQ截图20160328094435.png"></Image> </FlipView> ~~~  [http://www.cnblogs.com/Damai-Pang/p/5201206.html](http://www.cnblogs.com/Damai-Pang/p/5201206.html) ### Grid view 行列布局，可以水平滚动控件。 ### Items control 提供UI指定数据模板 ### List view 在一个列表上的项目的集合,可以垂直滚动控件  我们做一个viewmodel ~~~ public class viewmodel : notify_property { public viewmodel() { } } ~~~ 我们依列表 ~~~ public ObservableCollection<string> lindexi { set; get; } = new ObservableCollection<string>() { "林德熙", "csdn" }; ~~~ ~~~ <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 提示 ~~~ <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](http://www.songsong.org/post/2015/10/11/ImageLib.html) ## Graphics and ink ### InkCanvas ~~~ <InkCanvas></InkCanvas> ~~~ 手写   保存文件可以去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 播放视频  其实我之前用它播放音频[https://github.com/lindexi/Markdown](https://github.com/lindexi/Markdown)   ~~~ 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(); } ~~~ 还有没写好，全屏出问题，可以来我博客[http://blog.csdn.net/lindexi_gd](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> ~~~  ~~~ <ProgressBar Value="10" IsIndeterminate="True" Height="100"></ProgressBar> ~~~  ### Progress ring ~~~ <ProgressRing Width="100" IsActive="True"></ProgressRing> ~~~  ## 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](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](http://blog.csdn.net/lindexi_gd) 现在委托csdn维权，没有授权的网站不要转载 原文[https://msdn.microsoft.com/en-us/windows/uwp/controls-and-patterns/controls-by-function](https://msdn.microsoft.com/en-us/windows/uwp/controls-and-patterns/controls-by-function)