XAML .NET MAUI:使用MVVM时图形元素的动态行为

dzhpxtsq  于 2022-12-25  发布在  .NET
关注(0)|答案(1)|浏览(172)

对于像进度条这样的UI元素的动画,即使在Microsoft文档中,也总是建议(仅)从代码背后工作,如下所示:

await progressBar.ProgressTo(0.75, 500, Easing.Linear);

我找不到从ViewModel中执行此操作的方法,因为不可能(也不打算)从ViewModel中访问XAML元素。我尝试使用BindableProperty进行数据绑定,但无法使其工作。因此,是我的操作有误,还是不可能?
我创建了一个Drawable类:

public class ProgressArcDrawable : GraphicsView, IDrawable
{

    public double ArcProgress
    {
        get => (double)GetValue(ArcProgressProperty);
        set => SetValue(ArcProgressProperty, value);
    }

    public float Stroke
    {
        get => (float)GetValue(StrokeProperty);
        set => SetValue(StrokeProperty, value);
    }

    public Color ArcColor
    {
        get => (Color)GetValue(ArcColorProperty);
        set => SetValue(ArcColorProperty, value);
    }

    public static readonly BindableProperty ArcProgressProperty =
        BindableProperty.Create(nameof(ArcProgress), typeof(double), typeof(ProgressArcDrawable));

    public static readonly BindableProperty StrokeProperty =
        BindableProperty.Create(nameof(Stroke), typeof(float), typeof(ProgressArcDrawable));

    public static readonly BindableProperty ArcColorProperty =
        BindableProperty.Create(nameof(ArcColor), typeof(Color), typeof(ProgressArcDrawable));

    public void Draw(ICanvas canvas, RectF dirtyRect)
    {
        var endAngle = 90 - (int)Math.Round(ArcProgress * 360, MidpointRounding.AwayFromZero);
        canvas.StrokeColor = ArcColor;
        canvas.StrokeSize = Stroke;
        canvas.DrawArc(Stroke / 2, Stroke / 2, (dirtyRect.Width - Stroke), (dirtyRect.Height - Stroke), 90, endAngle, false, false);
    }
}

当我使用MVVM工具包时,我在视图模型中创建了ObservableProperties,如下所示:

[ObservableProperty]
double arcProgress;

在我看来,我将drawable与数据绑定集成在一起:

<ContentPage.Resources>
    <drawables:ProgressArcDrawable
        x:Key="progressArcDrawable"
        ArcProgress="{Binding ArcProgress}"
        Stroke="20"
        ArcColor="{Binding Scrum.ScrumTheme.AccentColor}" />
</ContentPage.Resources>
...
<Grid>
       <GraphicsView
                Drawable="{StaticResource progressArcDrawable}"
                HeightRequest="350"
                WidthRequest="350" />
</Grid>

唯一有效的绑定是将笔画设置为离散值。AccentColor绑定适用于页面上的其他元素,因此其中有数据,但不适用于可绘制对象。这对于ArcProgress也是一样的,它应该每秒更改一次进度弧。

dsekswqp

dsekswqp1#

尝试将DrawableStaticResource一起使用:

<Grid>
    <GraphicsView
        HeightRequest="350"
        WidthRequest="350">
        <GraphicsView.Drawable>
            <drawables:ProgressArcDrawable
                ArcProgress="{Binding ArcProgress}"
                Stroke="20"
                ArcColor="{Binding Scrum.ScrumTheme.AccentColor}" />
        </GraphicsView.Drawable>
    </GraphicsView>
</Grid>

相关问题