超炫酷的WPF实现Loading控件效果

下面是超炫酷的WPF实现Loading控件效果的完整攻略：

一、前置知识

在开始实现之前，需要掌握以下知识：

WPF布局和控件的使用
WPF动画和装饰器的使用

如果您对以上知识不熟悉，建议先学习WPF相关的基础知识。

二、实现思路

实现一个Loading控件的思路如下：

布局：使用Grid布局，在其中添加一个Canvas控件作为Loading控件容器。
动画：通过一个画笔实现动画效果，将画笔的起始点、终止点逐渐改变，形成“圆形进度条”。
样式：通过控制画笔颜色和宽度、字体等来实现Loading控件的样式。
附加：通过绑定附加属性来控制Loading控件的显示和隐藏等操作。

三、实现步骤

1. 布局

在窗口或页面中使用Grid布局，并设置好行、列的大小。然后添加一个Canvas控件，并将其放置在Grid中心，如下所示：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Canvas Grid.Row="0" Grid.Column="0" Width="100" Height="100" HorizontalAlignment="Center" VerticalAlignment="Center" Name="LoadingCanvas">
    </Canvas>

</Grid>

2. 动画

使用Canvas和DrawingContext对象，通过画笔实现动画效果。具体代码如下：

private void DrawLoading(Canvas canvas)
{
    canvas.Children.Clear();
    double radius = Math.Min(canvas.ActualWidth, canvas.ActualHeight) / 2.0 * 0.8; // 计算出半径
    SolidColorBrush brush = new SolidColorBrush(Colors.Green); // 创建画刷
    double thickness = radius * 0.2; // 计算线宽
    Pen pen = new Pen(brush, thickness); // 创建画笔
    double scale = 1;
    canvas.RenderTransformOrigin = new Point(0.5, 0.5);
    canvas.RenderTransform = new ScaleTransform(scale, scale);
    var tc = new TransformGroup();
    var translateTransform = new TranslateTransform(0, -radius * 0.8);
    tc.Children.Add(translateTransform);
    tc.Children.Add(new RotateTransform(0));
    canvas.RenderTransform = tc;

    const int segments = 40;
    const double angle = 2 * Math.PI / segments;
    double delta = 0.015;
    double progress = 0;
    var geometry = new StreamGeometry();
    using (var sgc = geometry.Open())
    {
        Point pt;
        pt.X = canvas.ActualWidth / 2 +
        radius * Math.Sin(progress * Math.PI * 2);
        pt.Y = canvas.ActualHeight / 2 -
        radius * Math.Cos(progress * Math.PI * 2);
        sgc.BeginFigure(pt, true, true);
        for (int i = 0; i < segments; ++i)
        {
            progress += delta;
            pt.X = canvas.ActualWidth / 2 +
            radius * Math.Sin(progress * Math.PI * 2);
            pt.Y = canvas.ActualHeight / 2 -
            radius * Math.Cos(progress * Math.PI * 2);
            sgc.LineTo(pt, true, true);
        }
    }

    canvas.Children.Add(new Path
    {
        Stroke = brush,
        StrokeThickness = thickness,
        Data = geometry,
        SnapsToDevicePixels = true
    });
}

3. 样式

通过控制画笔颜色和宽度、字体等来实现Loading控件的样式。

private void DrawLoading(Canvas canvas)
{
    // ...

    SolidColorBrush brush = new SolidColorBrush(Colors.Green); // 创建画刷
    double thickness = radius * 0.2; // 计算线宽
    Pen pen = new Pen(brush, thickness); // 创建画笔

    // ...

    canvas.Children.Add(new Path
    {
        Stroke = brush,
        StrokeThickness = thickness,
        Data = geometry,
        SnapsToDevicePixels = true
    });

    canvas.Children.Add(new TextBlock
    {
        Text = "正在加载...",
        FontSize = 16,
        Foreground = Brushes.White,
        Margin = new Thickness(0, radius * 0.8 + 20, 0, 0),
        HorizontalAlignment = HorizontalAlignment.Center,
        VerticalAlignment = VerticalAlignment.Center
    });
}

4. 附加

通过绑定附加属性来控制Loading控件的显示和隐藏等操作。

public static readonly DependencyProperty IsLoadingProperty =
DependencyProperty.RegisterAttached("IsLoading", typeof(bool), typeof(Loading), new UIPropertyMetadata(false, IsLoadingChanged));

public static bool GetIsLoading(DependencyObject obj)
{
    return (bool)obj.GetValue(IsLoadingProperty);
}

public static void SetIsLoading(DependencyObject obj, bool value)
{
    obj.SetValue(IsLoadingProperty, value);
}

private static void IsLoadingChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
    var canvas = (Canvas)d;
    if ((bool)e.NewValue)
    {
        DrawLoading(canvas);
        canvas.Visibility = Visibility.Visible;
    }
    else
    {
        canvas.Children.Clear();
        canvas.Visibility = Visibility.Collapsed;
    }
}

四、示例

1. 在窗口中使用Loading控件

<Window>
    <Window.Resources>
        <Style BasedOn="{StaticResource {x:Type Window}}" TargetType="Window">
            <Setter Property="Background" Value="#EAEAEA" />
        </Style>
    </Window.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Button Grid.Row="0" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" Content="点击加载" Click="OnButtonClick" />

        <Canvas Grid.Row="0" Grid.Column="0" Width="100" Height="100" HorizontalAlignment="Center" VerticalAlignment="Center" local:Loading.IsLoading="{Binding IsLoading}">
        </Canvas>

    </Grid>
</Window>

public partial class MainWindow : Window
{
    private bool isLoading = false;
    public bool IsLoading
    {
        get { return isLoading; }
        set
        {
            isLoading = value;
            OnPropertyChanged("IsLoading");
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string name)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(name));
        }
    }

    private void OnButtonClick(object sender, RoutedEventArgs e)
    {
        IsLoading = true;
    }
}

2. 在页面中使用Loading控件

<Page>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Button Grid.Row="0" Grid.Column="0" Content="点击加载" HorizontalAlignment="Center" VerticalAlignment="Center" Click="OnButtonClick" />

        <Canvas Grid.Row="0" Grid.Column="0" Width="100" Height="100" HorizontalAlignment="Center" VerticalAlignment="Center" local:Loading.IsLoading="{Binding IsLoading}">
        </Canvas>

    </Grid>
</Page>

public partial class MyPage : Page
{
    private bool isLoading = false;
    public bool IsLoading
    {
        get { return isLoading; }
        set
        {
            isLoading = value;
            OnPropertyChanged("IsLoading");
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string name)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(name));
        }
    }

    private void OnButtonClick(object sender, RoutedEventArgs e)
    {
        IsLoading = true;
    }
}

以上是实现Loading控件的完整攻略，希望对您有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：超炫酷的WPF实现Loading控件效果 - Python技术站