Skip to content

Commit

Permalink
💄🐛 Add Snowflake Effect to the WPF UI Gallery
Browse files Browse the repository at this point in the history
- Introduced a new SnowflakeEffect class and associated Snowflake.cs model to create an interactive snow effect on the UI canvas, responding to mouse movements.
- Updated the GalleryNavigationPresenter.xaml and associated pages in the BasicInput, Collections, DateAndTime, DialogsAndFlyouts, Layout, Media, Navigation, OpSystem, StatusAndInfo, and Text directories to integrate and demonstrate the new snow effect.
- Added new files for the snow effect implementation in the Effects directory: Snowflake.cs and SnowflakeEffect.cs.
- Adjusted page designs in BasicInputPage.xaml, DateAndTimePage.xaml, and other modified pages to accommodate the snow effect visuals and ensure seamless integration.
- Fixed text wrapping issue in navigation cards to improve UI readability and layout consistency.
- Updated themes Dark.xaml and Light.xaml to support the visual requirements of the snow effect.

This update brings a visually engaging element to the WPF UI Gallery, enhancing user interaction with dynamic, responsive snowflakes across multiple demo pages.
  • Loading branch information
keeleycenc committed Nov 4, 2024
1 parent 950ade6 commit 9590103
Show file tree
Hide file tree
Showing 26 changed files with 1,445 additions and 78 deletions.
26 changes: 12 additions & 14 deletions src/Wpf.Ui.Gallery/Controls/GalleryNavigationPresenter.xaml
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,18 @@
<Setter.Value>
<ControlTemplate TargetType="{x:Type controls:GalleryNavigationPresenter}">
<ItemsControl ItemsSource="{TemplateBinding ItemsSource}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type models:NavigationCard}">
<ui:CardAction
Width="320"
Height="90"
Margin="4"
HorizontalAlignment="Stretch"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
Command="{Binding TemplateButtonCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=controls:GalleryNavigationPresenter}, Mode=OneWay}"
CommandParameter="{Binding PageType, Mode=OneTime}"
Expand All @@ -31,30 +38,21 @@
</ui:CardAction.Icon>
<StackPanel>
<ui:TextBlock
Margin="0"
FontTypography="BodyStrong"
Foreground="{DynamicResource TextFillColorPrimaryBrush}"
Text="{Binding Name, Mode=OneTime}"
TextWrapping="WrapWithOverflow" />
TextWrapping="Wrap"
FontSize="16"/>
<ui:TextBlock
Appearance="Secondary"
Foreground="{DynamicResource TextFillColorSecondaryBrush}"
Text="{Binding Description, Mode=OneTime}"
TextWrapping="WrapWithOverflow" />
TextWrapping="Wrap"
FontSize="12"/>
</StackPanel>
</ui:CardAction>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<ui:VirtualizingWrapPanel
IsItemsHost="True"
ItemSize="290,80"
Orientation="Vertical"
SpacingMode="Uniform"
StretchItems="True" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ControlTemplate>
</Setter.Value>
Expand Down
113 changes: 113 additions & 0 deletions src/Wpf.Ui.Gallery/Effects/Snowflake.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
// This Source Code Form is subject to the terms of the MIT License.
// If a copy of the MIT was not distributed with this file, You can obtain one at https://opensource.org/licenses/MIT.
// Copyright (C) Leszek Pomianowski and WPF UI Contributors.
// All Rights Reserved.

using System.Windows.Shapes;

namespace Wpf.Ui.Gallery.Effects;

/// <summary>
/// Snowflake data model
/// </summary>
internal class SnowFlake
{
private Ellipse? _shape;
private double _x;
private double _y;
private double _size;
private double _speed;
private double _opacity;
private double _velX;
private double _velY;
private double _stepSize;
private double _step;
private double _angle;
private TranslateTransform? _transform;

/// <summary>
/// Gets or sets shape of the snowflake
/// </summary>
public Ellipse? Shape
{
get => _shape;
set => _shape = value;
}

/// <summary>Gets or sets x position</summary>
public double X
{
get => _x;
set => _x = value;
}

/// <summary>Gets or sets Y position</summary>
public double Y
{
get => _y;
set => _y = value;
}

/// <summary>Gets or sets Size</summary>
public double Size
{
get => _size;
set => _size = value;
}

/// <summary>Gets or sets Falling speed</summary>
public double Speed
{
get => _speed;
set => _speed = value;
}

/// <summary>Gets or sets Opacity</summary>
public double Opacity
{
get => _opacity;
set => _opacity = value;
}

/// <summary>Gets or sets Horizontal velocity</summary>
public double VelX
{
get => _velX;
set => _velX = value;
}

/// <summary>Gets or sets Vertical velocity</summary>
public double VelY
{
get => _velY;
set => _velY = value;
}

/// <summary>Gets or sets Step size</summary>
public double StepSize
{
get => _stepSize;
set => _stepSize = value;
}

/// <summary>Gets or sets Step</summary>
public double Step
{
get => _step;
set => _step = value;
}

/// <summary>Gets or sets Angle</summary>
public double Angle
{
get => _angle;
set => _angle = value;
}

/// <summary>Gets or sets 2D coordinate transformation</summary>
public TranslateTransform? Transform
{
get => _transform;
set => _transform = value;
}
}
Loading

0 comments on commit 9590103

Please sign in to comment.