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.