add Gooey Effect Demo

This commit is contained in:
NaBian committed 2020-02-20 22:46:34 +08:00
1 parent a943927a24
commit cd3072f026
22 files changed
+571 -40

No files matched your search

@@ -0,0 +1,11 @@
<UserControl x:Class="HandyControlDemo.UserControl.Login"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:hc="https://handyorg.github.io/handycontrol"
Background="{DynamicResource RegionBrush}">
<Grid Width="320" Height="567" Background="#f2f3f7">
<StackPanel VerticalAlignment="Bottom">
<Button Content="サインアップ" Height="44" Width="166" hc:BorderElement.CornerRadius="22" BorderThickness="0" Background="#41508d" Foreground="#edf0fb"/>
</StackPanel>
</Grid>
</UserControl>
@@ -0,0 +1,10 @@
namespace HandyControlDemo.UserControl
{
public partial class Login
{
public Login()
{
InitializeComponent();
}
}
}
@@ -3,24 +3,97 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:hc="https://handyorg.github.io/handycontrol"
Background="{DynamicResource RegionBrush}">
<UserControl.Resources>
<Storyboard x:Key="StoryboardLoaded" RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(RotateTransform.Angle)" Storyboard.TargetName="TransformRotate1">
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="90">
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(RotateTransform.Angle)" Storyboard.TargetName="TransformRotate2">
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="90">
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(RotateTransform.Angle)" Storyboard.TargetName="TransformRotate3">
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="-90">
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource StoryboardLoaded}"/>
</EventTrigger>
</UserControl.Triggers>
<hc:TransitioningContentControl>
<UniformGrid Margin="16">
<Image Margin="16" Width="120" Height="120" Source="/HandyControlDemo;component/Resources/Img/Album/10.jpg"/>
<Image Width="120" Height="120" Source="/HandyControlDemo;component/Resources/Img/Album/10.jpg">
<Image.Effect>
<hc:ColorComplementEffect/>
</Image.Effect>
</Image>
<Image Width="120" Height="120" Source="/HandyControlDemo;component/Resources/Img/Album/10.jpg">
<Image.Effect>
<hc:GrayScaleEffect/>
</Image.Effect>
</Image>
<Image Width="120" Height="120" Source="/HandyControlDemo;component/Resources/Img/Album/10.jpg">
<Image.Effect>
<hc:GrayScaleEffect Scale=".7"/>
</Image.Effect>
</Image>
</UniformGrid>
<StackPanel Margin="20,0,20,32">
<UniformGrid Margin="16" Columns="3">
<Image Margin="16" Width="120" Height="120" Source="/HandyControlDemo;component/Resources/Img/Album/10.jpg"/>
<Image Width="120" Height="120" Source="/HandyControlDemo;component/Resources/Img/Album/10.jpg">
<Image.Effect>
<hc:ColorComplementEffect/>
</Image.Effect>
</Image>
<Image Width="120" Height="120" Source="/HandyControlDemo;component/Resources/Img/Album/10.jpg">
<Image.Effect>
<hc:GrayScaleEffect/>
</Image.Effect>
</Image>
<Image Width="120" Height="120" Source="/HandyControlDemo;component/Resources/Img/Album/10.jpg">
<Image.Effect>
<hc:GrayScaleEffect Scale=".7"/>
</Image.Effect>
</Image>
<Image Width="120" Height="120" Source="/HandyControlDemo;component/Resources/Img/Album/10.jpg">
<Image.Effect>
<hc:ColorMatrixEffect M11="-1" M22="-1" M33="-1" M41="1" M42="1" M43="1" M44="1" M51="1"/>
</Image.Effect>
</Image>
<Image Width="120" Height="120" Source="/HandyControlDemo;component/Resources/Img/Album/10.jpg">
<Image.Effect>
<hc:ColorMatrixEffect M11="1.5" M21="1.5" M31="1.5" M12="1.5" M22="1.5" M32="1.5" M13="1.5" M23="1.5" M33="1.5" M51="-1" M52="-1" M53="-1"/>
</Image.Effect>
</Image>
</UniformGrid>
<Border>
<Border.Effect>
<hc:ContrastEffect Contrast="20"/>
</Border.Effect>
<Border>
<Border.Effect>
<hc:BrightnessEffect Brightness="1"/>
</Border.Effect>
<Border>
<Border.Effect>
<BlurEffect Radius="30"/>
</Border.Effect>
<StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Border Width="100" Height="100" Background="Red" RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<TransformGroup>
<RotateTransform Angle="0" x:Name="TransformRotate1"/>
</TransformGroup>
</Border.RenderTransform>
</Border>
<Border Margin="30,0,0,0" Width="100" Height="100" Background="Red" RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<TransformGroup>
<RotateTransform Angle="0" x:Name="TransformRotate2"/>
</TransformGroup>
</Border.RenderTransform>
</Border>
</StackPanel>
<Border Width="100" Height="100" Background="Red" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<TransformGroup>
<RotateTransform Angle="0" x:Name="TransformRotate3"/>
</TransformGroup>
</Border.RenderTransform>
</Border>
</StackPanel>
</Border>
</Border>
</Border>
</StackPanel>
</hc:TransitioningContentControl>
</UserControl>