wpf, 创建一个在点击按钮之后的 loading 动画, 并显示在窗口中央
时间: 2024-02-09 18:11:27 浏览: 209
wpf loading 动画
好的,您可以使用 WPF 动画和布局来创建在点击按钮之后的 loading 动画,并将其显示在窗口中央。以下是一个简单的实现步骤:
1. 首先,在您的 WPF 窗口中添加一个 `Grid` 元素,用于布局您的内容。
2. 在该 `Grid` 中添加一个 `Border` 元素,用于包含您的 loading 动画,并将其设置为不可见。
3. 创建一个 `Storyboard`,用于控制您的 loading 动画。在 `Storyboard` 中,使用 `DoubleAnimation` 控制 `Opacity` 属性,从而实现淡入淡出的效果。
4. 在按钮的 `Click` 事件处理程序中,将 `Border` 元素设置为可见,并启动 `Storyboard`,以显示 loading 动画。
5. 当操作完成后,停止 `Storyboard` 并将 `Border` 元素设置为不可见。
以下是一个简单的示例代码,演示如何实现这个功能:
XAML 代码:
```xml
<Window x:Class="WpfApp1.MainWindow"
...>
<Grid>
<Button Content="Click me" Click="Button_Click"/>
<Border x:Name="LoadingBorder" Visibility="Collapsed" Background="White" Opacity="0">
<TextBlock Text="Loading..." FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</Grid>
</Window>
```
C# 代码:
```csharp
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Media.Animation;
namespace WpfApp1
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private async void Button_Click(object sender, RoutedEventArgs e)
{
// 显示 loading 动画
LoadingBorder.Visibility = Visibility.Visible;
// 创建淡入动画
var fadeInAnimation = new DoubleAnimation
{
From = 0,
To = 1,
Duration = new Duration(TimeSpan.FromSeconds(0.5))
};
// 创建淡出动画
var fadeOutAnimation = new DoubleAnimation
{
From = 1,
To = 0,
Duration = new Duration(TimeSpan.FromSeconds(0.5))
};
// 创建 Storyboard
var storyboard = new Storyboard();
storyboard.Children.Add(fadeInAnimation);
storyboard.Children.Add(fadeOutAnimation);
Storyboard.SetTarget(fadeInAnimation, LoadingBorder);
Storyboard.SetTarget(fadeOutAnimation, LoadingBorder);
Storyboard.SetTargetProperty(fadeInAnimation, new PropertyPath(OpacityProperty));
Storyboard.SetTargetProperty(fadeOutAnimation, new PropertyPath(OpacityProperty));
// 执行操作
await Task.Delay(3000);
// 停止动画并隐藏 loading 动画
storyboard.Stop();
LoadingBorder.Visibility = Visibility.Collapsed;
}
}
}
```
该示例代码中,当用户点击按钮时,首先会显示一个带有文本 “Loading…” 的 `Border` 元素。然后,创建了两个 `DoubleAnimation`,一个用于淡入,另一个用于淡出。这些动画被添加到一个 `Storyboard` 中,并将其目标设置为 `LoadingBorder` 的 `Opacity` 属性。接着,`Storyboard` 启动,控制 `Border` 的 `Opacity` 属性,从而实现 loading 动画的淡入淡出效果。操作完成后,停止动画并将 `Border` 元素设置为不可见。
阅读全文