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

一些控件例子: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=""></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

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

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

        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之后找到解决将会写一个,可能是预览版,在真机就出错

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

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

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. 201521123005 《java程序设计》 第六周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...

  2. 201521123044 《Java程序设计》第5周学习总结

    1. 本章学习总结 2. 书面作业 1. 代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过?哪句会出现错误?试改正该错误.并分析输出结果. 答: ...

  3. 201521123022 《Java程序设计》 第四周学习总结

    1. 本章学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2. 使用常规方法总结其他上课内容. ①instenceof运算符:可通过它判断父类引用对象实例的实际类型,且在父类转化成子类时 ...

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

    1.本周学习总结 类名第一个字母大写,类名下的方法如main第一个字母要小写: Java有三种基本数据类型:整型(byte,short,int,long,char),浮点型(float,double) ...

  5. 201521123052《Java程序设计》第1周学习总结

    1. 本周学习总结 1.认识Java,了解JVM.JRE与JDK,并下载与安装JDK: 2.设置好eclipse并使用eclipse完成简单的Java编程: 3.使用博客.码云与PTA,这些对Java ...

  6. Vagrant下共享目录下静态文件(js/jpg/png等)修改完运行报错

    利用Vagrant部署开发环境,使用目录共享模式,在本地磁盘进行开发,通过虚拟机环境运行开发的页面. 接下来打开页面,看上去一切正常,接下来将发生一个神奇的事情,你修改一个css文件,在刷新浏览器,发 ...

  7. CSS3 3D环境实现立体 魔方效果代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 《MySQL必知必会》[03] 表数据的增删改

    1.增:插入数据 INSERT关键字可以插入新的行到数据库表中: 插入完整的行 插入行的一部分 插入多行 插入某些查询的结果 基本的INSERT语句是: INSERT INTO R(A1, A2, . ...

  9. response对象的使用

    使用response对象提供的sendRedirect()方法可以将网页重定向到另一个页面.重定向操作支持将地址重定向到不同的主机上,这一点与转发是不同的.在客户端浏览器上将会得到跳转地址,并重新发送 ...

  10. C语言bitmap的使用技巧

    bitmap是一种以位的状态来表示某种特性的状态的一种操作方式,类似嵌入式中的寄存器操作,在表示某种特性enable/disable的时候很适用且占用的内存空间也很小 比如:做过交换机或者企业网管,路 ...