用编程实现Windows 8的磁贴翻转效果

发布时间:2013/12/03 00:12 发布者:roger.wang

返回博客中心

现如今,磁贴(Tiles)已成为每一个应用程序的必备功能之一: 以提供快捷导航和更好的用户界面功能。 C1Tile帮助您达到同样的效果,你可以得到即时更新的滑动和翻转动画的几种不同的磁贴的控制。在默认情况下,磁贴效果是由用户交互或在固定的时间间隔进行翻转动作。

SL_Ctitle 

在这篇博客中,我们将看到如何在代码中根据您的需要翻转C1Tile。

我们将讨论的两个场景的是:

  • 改变瓷砖内容
  • 更新内容模板

磁砖的内容(Tile Content)
你可以很容易地改变瓷砖内容,通过C1Tile的Content属性。在瓷砖未冻结,在改变了Content属性会强制自己动画起来。这样,就没有必要再调用任何其他方法进行动画动作。如果您还需要动画起来,则你可以在更新内容的瓷砖前将IsFrozen属性设置为False,然后将其设置回为True。

代码如下:

  1: private void Tile2_Change(object sender, RoutedEventArgs e)
  2: {
  3:   int age;
  4:   Int32.TryParse(txtAge.Text, out age);
  5:   if (age > 18 )
  6:   {
  7:     tile.Content =
  8:       "You are an Adult !";
  9:   }
 10:   else
 11:   {
 12:   tile.Content =
 13:     "You are still a Kid !";
 14:   }
 15:   //tile.IsFrozen = true;
 16: }
 17: 

 

更新内容模板

有时,你不希望变更内容,而是要更改整个内容的模板。在这种情况下,您可以使用自定义DataTemplateSelector。该模板将如下所示:

  1: <UserControl.Resources>
  2:         <local:ContentTemplateSelector x:Key="contenttemplateSelector">
  3:             <local:ContentTemplateSelector.Resources>
  4:                 <ResourceDictionary>
  5:                     <DataTemplate x:Key="ContentTemplate">
  6:                         <StackPanel >
  7:                             <Image Source="/SL_Tile;component/Images/Desert.jpg" />
  8:                             <TextBlock Text="{Binding}" />
  9:                         </StackPanel>
 10:                     </DataTemplate>
 11:                     <DataTemplate x:Key="BackContentTemplate">
 12:                         <StackPanel Background="Red" Margin="5">
 13:                             <TextBlock Text="Welcome" FontSize="18" />
 14:                         </StackPanel>
 15:                     </DataTemplate>
 16:                 </ResourceDictionary>
 17:             </local:ContentTemplateSelector.Resources>
 18:         </local:ContentTemplateSelector>
 19:     </UserControl.Resources>
 20: 

 

在后台代码中,需要创建一个从C1DataTemplateSelector继承了ContentTemplateSelector的类。下面是类的定义:

  1: public class ContentTemplateSelector : C1.Silverlight.C1DataTemplateSelector
  2: {
  3:  public bool Back { get; set; }
  4:  public override DataTemplate SelectTemplate(object item, DependencyObject contain   er)
  5:  {
  6:   // select different content template depending on condition
  7:   return (Back ? base.Resources["BackContentTemplate"] : base.Resources["ContentTe mplate"]) as DataTemplate;
  8:  }
  9: }
 10: 

 

最后,在单击按钮,您可能会使用如下代码来更新事件方法:

  1: private void FlipTile(object sender, RoutedEventArgs e)
  2: {
  3:  // enable animation
  4:  secondTile.IsFrozen = false;
  5:  // change condition in ContentTemplateSelector
  6:  _templateSelector.Back = !_templateSelector.Back;
  7:  // force animation
  8:  secondTile.UpdateTile();
  9:  // disable animation
 10:  secondTile.IsFrozen = true;
 11:  // if you don't want animations while content is not changed, set tile.IsFrozen to true and only turn on it while you change content
 12:  // tile.IsFrozen = false;
 13: }
 14: 

 

下载代码如下:


关于葡萄城

赋能开发者!葡萄城是专业的集开发工具、商业智能解决方案、低代码开发平台于一身的软件和服务提供商,为超过 75% 的全球财富 500 强企业提供服务。葡萄城专注控件软件领域30年,希望通过模块化的开发控件、灵活的低代码应用开发平台等一系列开发工具、解决方案和服务,帮助开发者快速响应复杂多变的业务需求,最大程度地发挥开发者的才智和潜能,让开发者的 IT 人生更从容更美好。

了解详情,请访问葡萄城官网