WinRT Toolkit 介绍--Control篇

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

• LayoutTransformControl和AnimatingContainer类似。前者用的时候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