WinRT toolkit是组针对Windows Runtime XAML开发的一系列Control,extension和helper类。它和Windows Phone Toolkit一样,也是由很多开源项目组合成的。这个项目里面最棒的感觉上有:

  1. Control里面的Chart,CaneraCaptureControl
  2. Debug Tool里面的VisualTreeDebuger:可以直接显示当前页面VisualTree,还可以直接修改控件的属性,就像在浏览器直接改CSS一样

另外,7月初更新了一个关于WinRT Toolkit的视频,可以看出,这个项目还是有微软内部的员工主导的。今天先看看控件,下一次深入看看Debug Tool。

需要二次开始,在详细看源码吧 :)

Controls

WinRT ToolKit的确定义很多WinRT 里面常用但是没有的控件,很多都是借鉴WPF和SL。由于很多控件都是照搬,所以不怎么符合Microsoft Design Language,也就是不怎么像metro风格。

AlternativeFrame

  • Win8 和 WP 一样都是通过BackStack,CurrentJournalEntry 记录页面调用顺序。但是Win 8 和 SL一样有 ForwardStack,这个是WP没有的。
  • Win 8 里面可以有PreLoad的page ,这个在应用的一些关键路径可以用得上,而且必须是需要加载大量的资源的时候才会用得上吧。


AnimatingContainer

  • 这里主要是用到了 AnimatingContainer。可以做缩放和位移的动画,但不不知道为什么不设计成behavior,而是设计成一个Container。

    使用
    <controls:AnimatingContainer
    Margin="0,100,0,0"
    PulseScale="2.07" <!--缩放倍数-->
    RadiusX="5" <!--X轴位移-->
    RadiusY="20" <!--Y轴位移-->
    Duration="0:0:10"><!--持续时间-->
    <TextBlock
    Style="{StaticResource HeaderTextStyle}"
    Text="10s rotation" />
    </controls:AnimatingContainer>

Caleendar

  • 就是一个选择日期的控件,Sweet UI里面也有这个。看了实现,从Model到UI,所有东西都自己从新定义,灵活性还是挺高的。
  • 日期的选择模式有 SingleDate , SingleRange ,MultipleRange
  • 控件很多元素Style都是DP,可以根据需要设置

    使用
    <controls:Calendar
    VerticalAlignment="Center"
    HorizontalAlignment="Center" />

CameraCaptureControl

  • 一个支持拍照,录音,CameraBuffer显示的控件
  • 支持将拍照和录像async存储

    使用
    <controls:CameraCaptureControl
    x:Name="TestedControl"
    CameraFailed="OnTestedControlCameraFailed"
    ShowOnLoad="True" /> 存储图片
    // 作者做WinRT存储图片,视频的时候可能无法关闭File,所以要多试几次
    // 如果真的这么多次尝试都失败了,就真失败了。
    stream = await TryCatchRetry.RunWithDelayAsync<Exception, IRandomAccessStreamWithContentType>(
    file.OpenReadAsync(),
    TimeSpan.FromSeconds(0.5),
    10,
    true);

CascadingImageControl

  • 这个控件将图片分块,然后图片小块慢慢无规则出现
  • 呵呵效果很特别,但是妈蛋什么地方会用这样的效果啊。。

CascadingTextBlock

  • 不想说了。。。

Chart

  • 实现了WPF一样的图表控件:饼图,折线图,条形图,散点图什么都有
  • 颜色,图表介绍文字都可以设置,基本上能满足大部分的需求了

    定义
    <charting:Chart
    x:Name="PieChart"
    Title="Pie Chart"
    Margin="70,0">
    <charting:Chart.Series>
    <Series:PieSeries
    Title="Population"
    ItemsSource="{Binding Items}"
    IndependentValueBinding="{Binding Name}"
    DependentValueBinding="{Binding Value}"
    IsSelectionEnabled="True" />
    </charting:Chart.Series>
    </charting:Chart> 数据绑定:
    ((BarSeries)this.BarChart.Series[0]).ItemsSource = items;

CountdownControl

  • 一个倒数的控件,类似于电影开始前的那个,效果还不错,挺Metro

    定义:
    <controls:CountdownControl
    x:Name="myCountdownControl"/> 使用:
    myCountdownControl.Visibility = Visibility.Visible;
    await myCountdownControl.StartCountdownAsync(3);
    myCountdownControl.Visibility = Visibility.Collapsed;

CustomAppBar

  • 可以出现作任何地方的AppBar,页面底部,顶部,左右两边,甚至页面内都可以

    定义:
    <controls:CustomAppBar
    x:Name="BottomAppBar"
    IsOpen="True">
    <StackPanel
    Orientation="Horizontal">
    <Button
    Style="{StaticResource PlayAppBarButtonStyle}"/>
    <CheckBox
    x:Name="IsLightDismissEnabledCheckBox"
    Content="IsLightDismissEnabled"
    VerticalAlignment="Center"
    Checked="OnIsLightDismissEnabledCheckBoxChecked"
    Unchecked="OnIsLightDismissEnabledCheckBoxUnchecked"/>
    </StackPanel>
    </controls:CustomAppBar>

CustomGridSplitter

  • CustomGridSplitter的使用时,是作为一个控件而不是一个容器。

    定义:
    <Grid
    Grid.Column="2">
    <Grid.RowDefinitions>
    <RowDefinition />
    <RowDefinition
    Height="22" />
    <RowDefinition />
    </Grid.RowDefinitions>
    <controls:CustomGridSplitter
    x:Name="cgs4"
    Grid.Row="1" />
    </Grid>

Gauge

  • 还是挺漂亮的,就是没太多用处。

    定义:
    <controls:Gauge
    Minimum="0"
    Maximum="100"
    Height="{Binding Size}"
    Value="{Binding Value}"
    NeedleBrush="Transparent"
    ScaleTickBrush="Black"
    ScaleBrush="DarkSlateGray"
    TickBrush="Transparent"
    TrailBrush="DarkSeaGreen"
    ValueBrush="DarkSeaGreen"
    ValueStringFormat="N1"
    Unit="° Fahrenheit"
    UnitBrush="DarkGray" />

ImageButton & ImageToggleButton

  • 没什么特别,和 WP Toolkit对应的控件差不多用途
  • 但是我不禁吐槽一句,这是安卓和ios按钮吧,所有状态都用图片表示!?反正我应该不会用这玩意。。

    <controls:ImageButton
    HorizontalAlignment="Center"
    NormalStateImageSource="/Assets/Images/RedButton_Idle.png"
    HoverStateImageSource="/Assets/Images/RedButton_Hover.png"
    PressedStateImageSource="/Assets/Images/RedButton_Pressed.png" /> <controls:ImageToggleButton
    Grid.Column="1"
    Grid.Row="1"
    Stretch="Fill"
    Width="40"
    Height="35"
    NormalStateImageSource="/Assets/Images/RedButton_Idle.png"
    HoverStateImageSource="/Assets/Images/RedButton_Hover.png"
    PressedStateImageSource="/Assets/Images/RedButton_Pressed.png"
    DisabledStateImageSource="/Assets/Images/RedButton_Disabled.png"
    CheckedStateImageSource="/Assets/Images/GreenButton_Idle.png"
    CheckedHoverStateImageSource="/Assets/Images/GreenButton_Hover.png"
    CheckedPressedStateImageSource="/Assets/Images/GreenButton_Pressed.png"
    CheckedDisabledStateImageSource="/Assets/Images/GreenButton_Disabled.png"
    IsEnabled="{Binding IsChecked, ElementName=cbIsEnabled}" />

InputDialog

  • 和WP差不多,都是基于Popup的控件

    XAML定义:
    <controls:InputDialog
    x:Name="ContentControlHostedDialog" /> ContentControlHostedDialog.ShowAsync(
    "ContentControl-hosted InputDialog",
    "This dialog is defined as Content of a ContentControl",
    "OK"); ==================================================== C# 定义:
    var dialog = new InputDialog();
    var result = await dialog.ShowAsync("This is the title", "This is the content/message", "Option 1", "Option 2", "Option 3");
    var content =
    string.Format(
    "Text: {0}, Button: {1}",
    dialog.InputText ?? "",
    result ?? "");
    await new MessageDialog(content, "Result").ShowAsync();

LayoutTransformControl

  • LayoutTransformControlAnimatingContainer类似。前者用的时候Transform后者使用的时Animation。但是如果LayoutTransformControl像Sample里面,不断调用Transform,效果看起来就和Animation差不多,但是性能估计就不太好。

    定义:
    <controls:LayoutTransformControl
    x:Name="transformControl">
    <controls:LayoutTransformControl.Transform>
    <RotateTransform
    x:Name="rotateTransform" />
    </controls:LayoutTransformControl.Transform>
    <TextBlock
    Style="{StaticResource SubheaderTextStyle}"
    Text="Hello LayoutTransformControl" />
    </controls:LayoutTransformControl> 调用:
    private async void PlayAnimation()
    {
    double angle = 0; while (_isOn)
    {
    angle += 3;
    await Task.Delay(30);
    rotateTransform.Angle = angle;
    }
    }

NumericUpDown

  • 一个数字选择控件,可以设置的属性如图,没什么好解释的。

    定义:
    <controls:NumericUpDown
    Margin="0,10,0,0"
    Grid.Column="2"
    Grid.Row="2"
    Width="200"
    Value="30"
    Minimum="-100"
    Maximum="100"
    IsReadOnly="True"
    SmallChange="0.1"
    LargeChange="10" />

PieSlice / RingSlice

  • 功能和Silder是对应的,但是它们是圆形的而已
  • 不过PieSlice / RingSlice不能操作,因为它们是继承Path的,也没有写操作的事件,只能用于展示

    定义:
    <controls:RingSlice
    Fill="{StaticResource AccentBrush}"
    Stroke="{StaticResource ShapeForeground}"
    StrokeThickness="2"
    Grid.Column="1"
    Grid.Row="2"
    InnerRadius="{Binding Value, ElementName=InnerRadiusSlider}"
    Radius="{Binding Value, ElementName=RadiusSlider}"
    StartAngle="{Binding Value, ElementName=StartAngleSlider}"
    EndAngle="{Binding Value, ElementName=EndAngleSlider}" />

未完待续

TreeView



UniformGrid



WatermarkPasswordBox / WatermarkTextBox

WebBrowser

WrapPane

WinRT Toolkit 介绍--Control篇的更多相关文章

  1. Coolite Toolkit介绍

    Coolite Toolkit非常棒的控件   Coolite Toolkit介绍 Coolite Toolkit 是一个支持ASP.NET AJAX的Web控件. Coolite Toolkit是基 ...

  2. Java中常用的七个阻塞队列介绍第一篇

    Java中常用的七个阻塞队列介绍第一篇 在上一篇我们对Java中的队列分类做了简单的介绍.本文咱们主要来聊聊阻塞队列中的七个常用子类.这七个阻塞队列的学习步骤:先看源码,分析完源码之后,我们再来对每个 ...

  3. 版本管理工具介绍—Git篇

    前篇 如题,提起版本管理工具相信做C#开发 还是对Git比较陌生  我们可能更熟悉vss.svn 记录此文的目的 更是为以后的前段学习做基础  现在的技术比如nodeJs  angularJs ==都 ...

  4. Xcode9新特性介绍-中文篇

    背景: Xcode 9 新特性介绍: 1.官方原文介绍链接 2.Xcode9 be ta 2 官方下载链接 本文为官方介绍翻译而来,布局排版等都是按照官方布局来的. 与原文相比,排版上基本还是熟悉的配 ...

  5. (转) OpenLayers3基础教程——OL3 介绍control

    http://blog.csdn.net/gisshixisheng/article/details/46761535 概述: 本文讲述的是Ol3中的control的介绍和应用. OL2和OL3 co ...

  6. OpenLayers3基础教程——OL3 介绍control

    概述: 本文讲述的是Ol3中的control的介绍和应用. OL2和OL3 control比較: 相比較Ol2的control,OL3显得特别少,下图分别为Ol2和Ol3的control: Ol2的c ...

  7. (转)版本管理工具介绍——SVN篇(二)

    http://blog.csdn.net/yerenyuan_pku/article/details/72620498 上一篇文章我介绍了一下SVN,以及SVN服务器的安装,相信大家都安装了,接下来我 ...

  8. 测试工具( Burp Suite)介绍了解篇

    Mac 安装 Burp Suite破解版,参考链接: https://www.jianshu.com/p/3224c2308ffa 建议:目前官网的最新版为2.1.4.建议使用1.7.36版本,有破解 ...

  9. redis基本介绍搭建篇

    1.redis基本介绍 1.1 redis介绍 Redis属于非关系型数据库和Memcached类似,redis也是一个key-value型存储系统. 但redis支持的存储value类型相对更多,包 ...

随机推荐

  1. 百度editor调用【图片上传阿里云】

    百度editor调用简单,但是图片和文件上传阿里云就有点难度了.下面我详细说一下. 百度富文本编辑器下载地址:http://ueditor.baidu.com/website/download.htm ...

  2. Django web开发【5】 实现标签功能

    标签tag在很多web2.0应用中都很常见,标签其实就是关联某些信息的一个关键字.打标签实际上就是给内容分配标签的过程,它通常由作者或者用户实现.标签之所有这么流行是因为它允许用户对自己创建的博客.图 ...

  3. 本地搭建php环境

    AppServ 是 PHP 网页架站工具组合包,所包含的软件有:Apache[.Apache Monitor.PHP.MySQL.phpMyAdmin等,如果您的本地机器没有安装过php.mysql等 ...

  4. Oracle数据库时间修改

    http://blog.csdn.net/tianlesoftware/article/details/6163859

  5. WinAPI: GetVolumeInformation - 读取文件系统信息

    //声明: GetVolumeInformation(   lpRootPathName: PChar;              {磁盘驱动器代码字符串}   lpVolumeNameBuffer: ...

  6. GitHub Android 最火开源项目Top20 GitHub 上的开源项目不胜枚举,越来越多的开源项目正在迁移到GitHub平台上。基于不要重复造轮子的原则,了解当下比较流行的Android与iOS开源项目很是必要。利用这些项目,有时能够让你达到事半功倍的效果。

    1. ActionBarSherlock(推荐) ActionBarSherlock应该算得上是GitHub上最火的Android开源项目了,它是一个独立的库,通过一个API和主题,开发者就可以很方便 ...

  7. Apple Catching(dp)

    Apple Catching Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9831   Accepted: 4779 De ...

  8. distributor之Interrupt Set/Clear-Active Registers, GICD_IS/CACTIVERn

    set active寄存器.顾名思义就是把一个中断置为active状态,clear active寄存器就是清除active状态,在这里我们有必要说明一下中断状态的一些概念: active状态:假设此时 ...

  9. Javascript对象的声明

    JavaScript 对象 对象由花括号分隔.在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义.属性由逗号分隔: var person={firstname:" ...

  10. BAE初试

    BAE是百度的应用开发托管平台.  支持python nodejs java php 这几个环境~ 我在BAE上面搭建了1个wordpress. 记录下开启一个app的过程. 下面是所需工具 ---版 ...