Clearer - 一款由手势驱动的Windows 8待办事项应用

• `BoolToVisibility` 和 `ColorToBrush` 转换器需要进行一些小的更改，Windows 8 中值转换器的参数略有不同（第四个参数是 `string` 而不是 `CultureInfo` 实例）。
• Windows Phone 版本中的 `ScrollViewer` 设置了 `ManipulationMode` 为 `ManipulationMode.Control`。这确保了滚动查看器位置的更新在 UI 线程而不是滚动查看器线程上处理（这在 Mango 版本中添加，以提高滚动性能）。Windows Phone 应用程序需要 `ManipulationMode.Control` 来支持下拉添加新交互。Windows 8 处理滚动的方式截然不同，我们稍后会看到！ 

Windows 8 UI 如下所示： 

为更大的屏幕和分屏视图量身定制

正如你在上面的屏幕截图中看到的，简单地将小手机屏幕的界面复制并缩放到较大的平板电脑外形尺寸并不一定有效。为了利用更大的屏幕，我将界面分成了两半：右侧渲染列表，左侧渲染每个项目的详细信息。

我还添加了一个背景图像，为界面增加了一些“纹理”。 

为了支持屏幕左侧的“详细信息”视图，我在视图模型中添加了一个 `SelectedItem`。

/// <summary>
/// A collection of todo items
/// </summary>
public class ToDoListViewModel : INotifyPropertyChanged
{  
  private ToDoItem _selectedItem;
  …
  public ToDoItem SelectedItem
  {
    get
    {
      return _selectedItem;
    }
    set
    {
      _selectedItem = value;
      PropertyChanged(this, new PropertyChangedEventArgs("SelectedItem"));
    }
  }

  public ObservableCollectionEx<ToDoItem> Items
  {
    …
  }
} 

然后，我用 `ListBox` 替换了渲染项目列表的 `ItemsControl`，并相应地绑定了 `ItemsSource` 和 `SelectedItem` 属性。

<ListBox ItemsSource="{Binding Items}"
         SelectedItem="{Binding Path=SelectedItem, Mode=TwoWay}"
         x:Name="todoList">
  ...
</ListBox> 

然后，屏幕左侧“详细信息”区域的根元素 `Grid` 的 `DataContext` 绑定到视图模型的 `SelectedItem` 属性。然后，“详细信息”区域内的子元素可以直接绑定到选定的待办事项的属性： 

<Grid x:Name="itemDetailGrid"
      DataContext="{Binding SelectedItem}">
  <Image Source="Assets/StoreLogo.png"
          Width="50" Height="50"
          HorizontalAlignment="Left"/>
  <TextBlock Text="Clearer" FontSize="55"
            Margin="60 20 0 20"
            VerticalAlignment="Center"/>
  <TextBox Text="{Binding Text, Mode=TwoWay}"
            Grid.Row="1" FontSize="25"/>
  <TextBox Text="{Binding Description, Mode=TwoWay}"
           Grid.Row="2"
           TextWrapping="Wrap" FontSize="25" Foreground="White"  
           AcceptsReturn="True/>
</Grid> 

我非常喜欢这种绑定方式，即通过“切换”`DataContext` 来创建 UI 中与不同对象绑定的“孤岛”。

通过将 `ItemsControl` 切换为 `ListBox`，列表现在具有指示焦点和选择的标准高亮显示。默认的浅蓝色框与此应用程序的 UI 并不匹配，因此我模板化了 `ItemsControl`，在突出显示的项旁边添加了一个简单的“点”。我能够去除模板的大部分通用绑定，但仍然剩下相当大的 XAML 代码块。

<ControlTemplate TargetType="ListBoxItem" x:Key="listBoxItemTemplate">
  <Border x:Name="LayoutRoot">
    <VisualStateManager.VisualStateGroups>
      <VisualStateGroup x:Name="CommonStates">
        <VisualState x:Name="Normal"/>
        <VisualState x:Name="MouseOver"/>
      </VisualStateGroup>
      <VisualStateGroup x:Name="SelectionStates">
        <VisualState x:Name="Unselected">
          <Storyboard>
            <DoubleAnimation Duration="0" To="0"
                              Storyboard.TargetProperty="(UIElement.Opacity)"
                              Storyboard.TargetName="selectedDot" d:IsOptimized="True"/>
          </Storyboard>
        </VisualState>
        <VisualState x:Name="Selected">
          <Storyboard>
            <DoubleAnimation Duration="0" To="1"
                              Storyboard.TargetProperty="(UIElement.Opacity)"
                              Storyboard.TargetName="selectedDot" d:IsOptimized="True"/>
          </Storyboard>
        </VisualState>
        <VisualState x:Name="SelectedUnfocused">
          <Storyboard>
            <DoubleAnimation Duration="0" To="1"
                              Storyboard.TargetProperty="(UIElement.Opacity)"
                              Storyboard.TargetName="selectedDot" d:IsOptimized="True"/>
          </Storyboard>
        </VisualState>
      </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Grid>
      <!-- the 'dot' that indicates selection -->
      <Ellipse Width="15" Height="15"
                VerticalAlignment="Center" HorizontalAlignment="Left"
                Fill="White" x:Name="selectedDot"
                Opacity="0"/>
      <!-- the content for this item -->
      <ContentControl x:Name="ContentContainer"
                      ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"
                      HorizontalContentAlignment="Stretch"
                      Foreground="#FF1BA1E2" Margin="20 0 0 0"/>
    </Grid>
  </Border>
</ControlTemplate> 

视觉状态仅根据选择状态显示/隐藏点。

Windows 8 应用程序可以处于两种状态：全屏或分屏。如果您没有触摸屏，可以通过按 `“Windows 键” + “.”` 进入分屏模式。 

待办事项应用程序的 UI 使用了一个 `Grid`，其中包含两个“星形”宽度的列，将屏幕分为左右两个窗格。当应用程序分屏时，这可以很好地缩放，但最终结果并不太好看。

对于此应用程序，最好在分屏时定制界面。这可能适用于大多数 Windows 8 应用程序！

当应用程序分屏时，不要求它必须提供与全屏运行时相同的所有功能。与其尝试重新排列或缩小您的界面，不如考虑用户为何要分屏使用您的应用程序以及他们将执行哪些任务？ 

对于这个待办事项列表应用程序，我可以设想用户可能希望将项目列表分屏显示在侧面，同时使用占据屏幕大部分空间的另一个应用程序来完成列出的任务。因此，我认为分屏视图仅渲染列表是完全可以的，这样他们就可以将项目标记为完成或删除（我们稍后会添加此功能），但强制他们全屏才能添加或编辑项目。

查看 VS2012 附带的示例或网络上的示例，您可以看到当应用程序分屏时，页面的视觉状态会发生变化。 

因此，我继续添加了一些视觉状态，当应用程序分屏时显示/隐藏各种元素。我选择创建第二个列表来渲染分屏视图中的项目，以便我可以更轻松地控制 `ItemTemplate` 和其他属性。

然而，令我非常困惑的是，这并没有奏效！

在更详细地研究了示例后，我发现框架不会设置应用程序页面的视觉状态。框架提供了一个静态属性 `ApplicationView.ApplicationViewState`，它反映了当前的方向和分屏状态。您会发现 Windows 8 SDK 附带的许多示例都包含一个名为 `LayoutAwarePage` 的类，该类将此属性映射到视觉状态。

不管怎样，我该下我的讲台了。

我将 `LayoutAwarePage` 添加到我的项目中，并将 `MainPage` 修改为以它作为超类，瞧，我的分屏视图奏效了！这是分屏显示的列表，旁边是 Bing 应用程序提供的美丽乡村风光图片。

添加交互 

到目前为止，视图模型已经移植，应用程序 UI 也已经为 Windows 8 定制。是时候开始移植使这个应用程序最初如此有趣的待办事项列表的手势了。

我在上一篇文章中描述的 Windows Phone 应用程序使用了 `IInteraction` 接口定义的交互概念，该接口将事件处理程序附加到列表中的每个项目。`InteractionManager` 协调各种交互，以确保一次只有一个交互处于活动状态。这些概念可以很好地移植到该应用程序的 Windows 8 版本。

我采取了与处理视图模型相同的方法，将 Windows Phone 类添加到 Windows 8 项目，然后开始解决编译问题。这次移植代码所需更改要多得多。

1. 大量命名空间更改！ 
2. 操纵事件参数不同 `ManipulationCompletedEventArgs` => `ManipulationCompletedRoutedEventArgs`（对于 Started、Delta 和其他事件也一样）。
3. 事件参数不同 `e.TotalManipulation` => `e.Cumulative`
4. 缺少 `e.FinalVelocities` 属性，这使得很难创建管理自己的惯性/动量的交互。
5. `e.DeltaManipulation` => `e.Delta` 
6. 动画缓动属性的类型更改，`IEasingFunction` => `EasingFunctionBase`。
7. Storyboard 目标属性是字符串类型，而不是 `PropertyPath` 实例。
8. `LayoutUpdated` 事件是 `EventHandler