From dc789c647d3e31db86df41d641b550611d461420 Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Thu, 17 Apr 2025 15:26:56 +0300
Subject: [PATCH 1/3] docs(Window): add animation docs
---
components/window/animation.md | 125 +++++++++++++++++++++++++++++++++
components/window/overview.md | 4 ++
2 files changed, 129 insertions(+)
create mode 100644 components/window/animation.md
diff --git a/components/window/animation.md b/components/window/animation.md
new file mode 100644
index 000000000..795b7a769
--- /dev/null
+++ b/components/window/animation.md
@@ -0,0 +1,125 @@
+---
+title: Animations
+page_title: Animations
+description: Learn about the animation options for the Telerik Window component in Blazor.
+slug: window-animations
+tags: telerik,blazor,window,animations
+published: True
+position: 4
+---
+
+# Blazor Window Animations
+
+The Telerik Window component for Blazor provides an option to control the opening animations to enhance the user experience. You can configure the animation type and duration using the following parameters:
+
+## Parameters
+
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
+
+| Parameter | Type and Default Value | Description |
+|--------------------|------------------------------------|-------------|
+| `AnimationType` | `WindowAnimationType` (`None`) | Specifies the type of animation used when the window opens or closes. Full list of animation types is listed in the section below. |
+| `AnimationDuration`| `int` (`300`) | Defines the duration of the animation in milliseconds. |
+
+## WindowAnimation Types
+
+The `WindowAnimationType` enumeration includes the following options:
+
+* `None` (default) - No animation.
+* `SlideUp` - Slides in from the bottom and slides out to the bottom.
+* `SlideDown` - Slides in from the top and slides out to the top.
+* `SlideRight` - Slides in from the left and slides out to the left.
+* `SlideLeft` - Slides in from the right and slides out to the right.
+* `PushUp` - Pushes in from the bottom and pushes out to the top.
+* `PushDown` - Pushes in from the top and pushes out to the bottom.
+* `PushLeft` - Pushes in from the right and pushes out to the left.
+* `PushRight` - Pushes in from the left and pushes out to the right.
+* `Fade` - Fades in and out.
+* `ZoomIn` - Zooms in from a larger size to its actual size and zooms out by expanding before disappearing.
+* `ZoomOut` - Zooms in from a smaller size to its actual size and zooms out by shrinking to the center.
+
+## Example
+
+````RAZOR
+
+
+
+
+
+
+
+
+
+
+
+
+ @(Visible ? "Hide Window" : "Show Window")
+
+
+
+
+
+ Animations
+
+
+ Current animation type: @Animation
+
+
+
+@code {
+ private bool Visible { get; set; }
+ private int Duration { get; set; } = 300;
+ private string Top { get; set; } = "50%";
+ private string Left { get; set; } = "50%";
+
+ private List? AnimationTypes { get; set; }
+ private WindowAnimationType Animation { get; set; } = WindowAnimationType.ZoomOut;
+
+ private async Task ChangeAnimation(WindowAnimationType animation)
+ {
+ Animation = WindowAnimationType.None;
+ Visible = false;
+ // Artificial delay to reset the animation for demonstration purposes
+ await Task.Delay(500);
+ Animation = animation;
+ Visible = true;
+ }
+
+ protected override async Task OnInitializedAsync()
+ {
+ AnimationTypes = new List();
+
+ // Populate the list of animation types
+ foreach (WindowAnimationType animation in Enum.GetValues(typeof(WindowAnimationType)))
+ {
+ AnimationTypes.Add(animation);
+ }
+
+ // Artificial delay to show the window after initialization for the sake of the example
+ await Task.Delay(500);
+ Visible = true;
+
+ await base.OnInitializedAsync();
+ }
+}
+````
+
+## Limitations
+
+When the Window is set to be inside a container, it may appear outside of it after the animation completes. This occurs because animation classes scale the Window component, causing it to render inside the container initially, but move outside after the transition ends.
+
+## See Also
+
+* [Blazor Window Overview](slug:window-overview)
\ No newline at end of file
diff --git a/components/window/overview.md b/components/window/overview.md
index 79a797697..eae328dca 100644
--- a/components/window/overview.md
+++ b/components/window/overview.md
@@ -64,6 +64,10 @@ Read more about the [Blazor Window position...](slug:components/window/position)
You can maximize, minimize, or close the Window through the action buttons in its titlebar. [Read more about the Blazor Window action buttons...](slug:components/window/actions)
+## Animations
+
+You can set the animation of the Window with the `AnimationType` parameter. Read more about the [Blazor Window animations...](slug:window-animations)
+
## Dragging
You can move the Window on the page by dragging its titlebar. [Read more about the Blazor Window dragging option...](slug:window-draggable)
From 68b78963e8969982fc67cdf140a39c8e43fd405c Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Mon, 28 Apr 2025 16:27:36 +0300
Subject: [PATCH 2/3] chore(Window): change animation type content to table
view
---
components/window/animation.md | 36 +++++++++++++++++++---------------
1 file changed, 20 insertions(+), 16 deletions(-)
diff --git a/components/window/animation.md b/components/window/animation.md
index 795b7a769..491e4f82e 100644
--- a/components/window/animation.md
+++ b/components/window/animation.md
@@ -16,27 +16,31 @@ The Telerik Window component for Blazor provides an option to control the openin
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
-| Parameter | Type and Default Value | Description |
+| Parameter | Type and Default Value| Description |
|--------------------|------------------------------------|-------------|
-| `AnimationType` | `WindowAnimationType` (`None`) | Specifies the type of animation used when the window opens or closes. Full list of animation types is listed in the section below. |
-| `AnimationDuration`| `int` (`300`) | Defines the duration of the animation in milliseconds. |
+| `AnimationType`| `WindowAnimationType` (`None`)| Specifies the type of animation used when the window opens or closes. The full list of animation types is listed in the section below. |
+| `AnimationDuration`| `int` (`300`)| Defines the duration of the animation in milliseconds. |
## WindowAnimation Types
The `WindowAnimationType` enumeration includes the following options:
-* `None` (default) - No animation.
-* `SlideUp` - Slides in from the bottom and slides out to the bottom.
-* `SlideDown` - Slides in from the top and slides out to the top.
-* `SlideRight` - Slides in from the left and slides out to the left.
-* `SlideLeft` - Slides in from the right and slides out to the right.
-* `PushUp` - Pushes in from the bottom and pushes out to the top.
-* `PushDown` - Pushes in from the top and pushes out to the bottom.
-* `PushLeft` - Pushes in from the right and pushes out to the left.
-* `PushRight` - Pushes in from the left and pushes out to the right.
-* `Fade` - Fades in and out.
-* `ZoomIn` - Zooms in from a larger size to its actual size and zooms out by expanding before disappearing.
-* `ZoomOut` - Zooms in from a smaller size to its actual size and zooms out by shrinking to the center.
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
+
+| Animation Type | Description |
+|----------------|-------------------------------------------------------------------------------------------------|
+| `None` (default)| No animation. |
+| `SlideUp` | Slides in from the bottom and slides out to the bottom. |
+| `SlideDown` | Slides in from the top and slides out to the top. |
+| `SlideRight` | Slides in from the left and slides out to the left. |
+| `SlideLeft` | Slides in from the right and slides out to the right. |
+| `PushUp` | Pushes in from the bottom and pushes out to the top. |
+| `PushDown` | Pushes in from the top and pushes out to the bottom. |
+| `PushLeft` | Pushes in from the right and pushes out to the left. |
+| `PushRight` | Pushes in from the left and pushes out to the right. |
+| `Fade` | Fades in and out. |
+| `ZoomIn` | Zooms in from a larger size to its actual size and zooms out by expanding before disappearing. |
+| `ZoomOut` | Zooms in from a smaller size to its actual size and zooms out by shrinking to the center. |
## Example
@@ -101,7 +105,7 @@ The `WindowAnimationType` enumeration includes the following options:
{
AnimationTypes = new List();
- // Populate the list of animation types
+ // Populate the list of animation types.
foreach (WindowAnimationType animation in Enum.GetValues(typeof(WindowAnimationType)))
{
AnimationTypes.Add(animation);
From 6903cf7651e54a52c733ab74b33a98b80a5c3c11 Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Tue, 29 Apr 2025 13:31:16 +0300
Subject: [PATCH 3/3] chore(Window): add note to animation docs
---
components/window/animation.md | 2 ++
1 file changed, 2 insertions(+)
diff --git a/components/window/animation.md b/components/window/animation.md
index 491e4f82e..f4a695c93 100644
--- a/components/window/animation.md
+++ b/components/window/animation.md
@@ -42,6 +42,8 @@ The `WindowAnimationType` enumeration includes the following options:
| `ZoomIn` | Zooms in from a larger size to its actual size and zooms out by expanding before disappearing. |
| `ZoomOut` | Zooms in from a smaller size to its actual size and zooms out by shrinking to the center. |
+> When using animations other than the default (`None`), it is recommended to explicitly set the `Top` and `Left` parameters to control the Window position or center it on the screen. Without these settings, the Window will be positioned to the bottom-left corner of the screen. Explicit positioning ensures the Window appears in the intended location during and after the animation.
+
## Example
````RAZOR