💄🐛 Add Snowflake Effect to the WPF UI Gallery (#1266)

- 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.

Co-authored-by: keeleycenc <844123814qq.com>
Co-authored-by: pomian <[email protected]>

Author: keeleycenc

src/Wpf.Ui.Gallery/Controls/GalleryNavigationPresenter.xaml

@@ -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}"
@@ -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>

src/Wpf.Ui.Gallery/Effects/Snowflake.cs

@@ -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;
+    }
+}