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>