zoukankan      html  css  js  c++  java
  • c# WindowsCommunityToolkit--- Shade Animation

    WindowsCommunityToolkit: 

     https://github.com/CommunityToolkit/WindowsCommunityToolkit

    You can also preview the capabilities of the toolkit by downloading the Windows Community Toolkit Sample App in the Windows Store.

    Feel free to browse the documentation using the table of contents on the left side of this page.

    Open Source

    Windows Community Toolkit Source Code

     Shade Animation code sample:

    <Page
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:ui="using:Microsoft.Toolkit.Uwp.UI"
      xmlns:media="using:Microsoft.Toolkit.Uwp.UI.Media"
      xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
      xmlns:interactions="using:Microsoft.Xaml.Interactions.Core"
      xmlns:ani="using:Microsoft.Toolkit.Uwp.UI.Animations"
      xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Behaviors"
      mc:Ignorable="d">
    
      <Page.Resources>
        <media:AttachedCardShadow x:Key="CommonShadow" Offset="4" CornerRadius="0"/>
    
        <ani:AnimationSet x:Key="ShadowEnterAnimation">
          <ani:OffsetDropShadowAnimation To="12"/>
        </ani:AnimationSet>
    
        <ani:AnimationSet x:Key="ShadowExitAnimation">
          <ani:OffsetDropShadowAnimation To="5"/>
        </ani:AnimationSet>
    
        <ani:AnimationSet x:Key="ShadowPopAnimation" IsSequential="True">
          <ani:TranslationAnimation To="-8" Duration="0:0:1"/>
          <ani:OffsetDropShadowAnimation To="16" Duration="0:0:2" Target="{StaticResource CommonShadow}"/>
          <ani:OffsetDropShadowAnimation To="4" Delay="0:0:0.5" Duration="0:0:2" Target="{StaticResource CommonShadow}"/>
          <ani:TranslationAnimation To="0" Duration="0:0:1"/>
        </ani:AnimationSet>
      </Page.Resources>
    
      <Grid>
        <Grid.RowDefinitions>
          <RowDefinition/>
          <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
          <ColumnDefinition/>
          <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Image ui:Effects.Shadow="{StaticResource CommonShadow}"
               Height="100" Width="100"
               Source="ms-appx:///Assets/Photos/Owl.jpg">
          <interactivity:Interaction.Behaviors>
            <interactions:EventTriggerBehavior EventName="PointerEntered">
              <behaviors:StartAnimationAction Animation="{StaticResource ShadowEnterAnimation}"/>
            </interactions:EventTriggerBehavior>
            <interactions:EventTriggerBehavior EventName="PointerExited">
              <behaviors:StartAnimationAction Animation="{StaticResource ShadowExitAnimation}"/>
            </interactions:EventTriggerBehavior>
          </interactivity:Interaction.Behaviors>
        </Image>
        <Image ui:Effects.Shadow="{StaticResource CommonShadow}"
               Height="200" Width="200"
               Grid.Column="1"
               Source="ms-appx:///Assets/Photos/Owl.jpg">
          <interactivity:Interaction.Behaviors>
            <interactions:EventTriggerBehavior EventName="PointerEntered">
              <behaviors:StartAnimationAction Animation="{StaticResource ShadowEnterAnimation}"/>
            </interactions:EventTriggerBehavior>
            <interactions:EventTriggerBehavior EventName="PointerExited">
              <behaviors:StartAnimationAction Animation="{StaticResource ShadowExitAnimation}"/>
            </interactions:EventTriggerBehavior>
          </interactivity:Interaction.Behaviors>
        </Image>
        <Button Grid.Row="1" Grid.ColumnSpan="2" HorizontalAlignment="Center" VerticalAlignment="Top" Content="Click Me">
          <interactivity:Interaction.Behaviors>
            <interactions:EventTriggerBehavior EventName="Click">
              <behaviors:StartAnimationAction Animation="{StaticResource ShadowPopAnimation}"/>
            </interactions:EventTriggerBehavior>
          </interactivity:Interaction.Behaviors>
        </Button>
      </Grid>
    </Page>
    

      

    很多效果控件,

    如自定义title:

    <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
          xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
          xmlns:local="using:Microsoft.Toolkit.Uwp.SampleApp.SamplePages"
          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
          xmlns:ui="using:Microsoft.Toolkit.Uwp.UI"
          ui:ApplicationViewExtensions.Title="View Extensions"
          ui:TitleBarExtensions.BackgroundColor="CornflowerBlue"
          ui:TitleBarExtensions.ForegroundColor="White"
          ui:TitleBarExtensions.ButtonBackgroundColor="CornflowerBlue"
          ui:TitleBarExtensions.ButtonForegroundColor="White"
          mc:Ignorable="d">
    
      <Grid>
        <TextBlock Margin="16" Text="Modify the XAML to change the Title."/>
      </Grid>
    </Page>
    

      

    fffffffffffffffff
    test red font.
  • 相关阅读:
    线上答题竞赛小程序
    成语答题小程序源码
    lua --- 局部变量
    lua --- 逻辑运算符小结
    Lua --- 输入一个数字,输出阶乘
    lua闭包实现迭代器遍历数组
    lua中的闭包概念的学习笔记
    Unity --- 纹理为什么要设置为2的N次方
    Unity --- 如何降低UI的填充率
    RPG游戏中如何判断敌人是否在玩家的攻击范围之内
  • 原文地址:https://www.cnblogs.com/wgscd/p/15353031.html
Copyright © 2011-2022 走看看