Skip to content

Instantly share code, notes, and snippets.

@s-fernandez-v

s-fernandez-v/Main.xaml

Last active July 3, 2023 10:02
Show Gist options
  • Save s-fernandez-v/1125392c5f39e1e223ffd72bd1123789 to your computer and use it in GitHub Desktop.
Save s-fernandez-v/1125392c5f39e1e223ffd72bd1123789 to your computer and use it in GitHub Desktop.
Download ZIP
List animation
Raw
Main.xaml
<Grid
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:noesis="clr-namespace:NoesisGUIExtensions;assembly=Noesis.GUI.Extensions">
<Grid.Resources>
<ControlTemplate x:Key="btnTemplate" TargetType="Button">
<Border x:Name="Root" Background="{TemplateBinding Background}" Height="100">
<StackPanel VerticalAlignment="Center">
<TextBlock x:Name="Header" Text="{TemplateBinding Content}" FontSize="20"
FontWeight="Bold" Foreground="White" noesis:Text.Stroke="#80000000" noesis:Text.StrokeThickness="2.5"
HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<ScaleTransform/>
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock x:Name="SubHeader" Text="{TemplateBinding Tag}" FontSize="20"
Foreground="White" noesis:Text.Stroke="#80000000" noesis:Text.StrokeThickness="2.5"
HorizontalAlignment="Center" Opacity="0" Margin="0,10,0,-40"/>
</StackPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.3" To="300" Storyboard.TargetName="Root" Storyboard.TargetProperty="Height"/>
<DoubleAnimation Duration="0:0:0.3" To="2" Storyboard.TargetName="Header" Storyboard.TargetProperty="RenderTransform.ScaleX"/>
<DoubleAnimation Duration="0:0:0.3" To="2" Storyboard.TargetName="Header" Storyboard.TargetProperty="RenderTransform.ScaleY"/>
<DoubleAnimation Duration="0:0:0.3" To="1" Storyboard.TargetName="SubHeader" Storyboard.TargetProperty="Opacity"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.3" To="100" Storyboard.TargetName="Root" Storyboard.TargetProperty="Height"/>
<DoubleAnimation Duration="0:0:0.3" To="1" Storyboard.TargetName="Header" Storyboard.TargetProperty="RenderTransform.ScaleX"/>
<DoubleAnimation Duration="0:0:0.3" To="1" Storyboard.TargetName="Header" Storyboard.TargetProperty="RenderTransform.ScaleY"/>
<DoubleAnimation Duration="0:0:0.3" To="0" Storyboard.TargetName="SubHeader" Storyboard.TargetProperty="Opacity"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
<Setter Property="Template" Value="{StaticResource btnTemplate}"/>
</Style>
<ImageBrush x:Key="img1" ImageSource="nature1.jpg" Stretch="UniformToFill" AlignmentX="Center" AlignmentY="Center"/>
<ImageBrush x:Key="img2" ImageSource="nature2.jpg" Stretch="UniformToFill" AlignmentX="Center" AlignmentY="Center"/>
<ImageBrush x:Key="img3" ImageSource="nature3.jpg" Stretch="UniformToFill" AlignmentX="Center" AlignmentY="Center"/>
<ImageBrush x:Key="img4" ImageSource="nature4.jpg" Stretch="UniformToFill" AlignmentX="Center" AlignmentY="Center"/>
</Grid.Resources>
<StackPanel Width="400" HorizontalAlignment="Center" VerticalAlignment="Center">
<Button Background="{StaticResource img1}" Content="Possibility" Tag="The Hill"/>
<Button Background="{StaticResource img2}" Content="Finishing" Tag="The Grid"/>
<Button Background="{StaticResource img3}" Content="Craftsmanship" Tag="Metropolitan Center"/>
<Button Background="{StaticResource img4}" Content="Opportunity" Tag="The Hill"/>
</StackPanel>
</Grid>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment