使用GraphicView进行绑定时遇到的问题

huangapple
go评论177阅读模式
英文:

Problems doing a Binding with a GraphicView

问题

我需要在使用MVVM的GraphicView中使用BindableProperty进行数据绑定，但是它不起作用。我正在使用NET MAUI，并且我正在使用Nuget CommunityToolkit.Mvvm。
我的可绘制类是：

  1. public class DibujarArcoGreenwich : GraphicsView, IDrawable
  2. {
  3.     public float AnguloFin
  4.     {
  5.         get => (float)GetValue(AnguloFinProperty);
  6.         set => SetValue(AnguloFinProperty, value);
  7.     }
  8.     public static readonly BindableProperty AnguloFinProperty =
  9.         BindableProperty.Create(nameof(AnguloFin), typeof(float), typeof(DibujarArcoGreenwich));
  11.     public void Draw(ICanvas canvas, RectF dirtyRect)
  12.     {
  13.         //绘制弧线
  14.         float finalgrados = 360 - AnguloFin;
  15.         canvas.StrokeColor = Color.Red;
  16.         canvas.StrokeSize = 6;
  17.         int xposicion = XPosicionCentro - Radio;
  18.         int yposicion = YPosicionCentro - Radio;
  19.         canvas.DrawArc(10, 10, 90, 90, 0, finalgrados, true, false);
  20.     }
  21. }

我的视图模型是：

  1. public partial class AriesViewModel : ObservableObject, INotifyPropertyChanged
  2. {
  3.     [ObservableProperty]
  4.     float _anguloFin;
  5.     public AriesViewModel()
  6.     {
  7.         AnguloFin = 0;
  8.     }
  9.     [RelayCommand]
  10.     private void CalcularAries()
  11.     {
  12.         AnguloFin = HacerCalculos();
  13.     }
  14. }

我的页面XAML是：

  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  4.              xmlns:local="clr-namespace:NautorStar.MisControles"
  5.              xmlns:viewModels="clr-namespace:NautorStar.ViewModels"
  6.              xmlns:drawables="clr-namespace:NautorStar.ClasesDibujo"
  7.              x:Class="NautorStar.AriesPage"
  8.              Title="Aries">
  9.     <ContentPage.BindingContext>
  10.         <viewModels:AriesViewModel />
  11.     </ContentPage.BindingContext>
  12.     <StackLayout>
  13.         <GraphicsView 
  14.             HorizontalOptions="Center"
  15.             VerticalOptions="Center"
  16.             HeightRequest="250"
  17.             WidthRequest="400">
  18.             <GraphicsView.Drawable>
  19.                 <drawables:DibujarArcoGreenwich           
  20.                     AnguloFin="{Binding AnguloFin, Mode=TwoWay}"/>
  21.             </GraphicsView.Drawable>
  22.         </GraphicsView>
  23.         <Button Text="Calcular"
  24.                 Command="{Binding CalcularAriesCommand}" />
  25.     </StackLayout>
  26. </ContentPage>

但是AnguloFin的值始终为0。如果我将绑定更改为固定值，则可以正常工作。有任何关于为什么绑定不起作用的想法吗？
谢谢

Maria

英文:

I need to do a data binding, using BindableProperty in a GraphicView using MVVM but it does not work. I'm working NET MAUI also I'm using the Nuget CommunityToolkit.Mvvm.
My drawable class is :

  1. public class DibujarArcoGreenwich : GraphicsView, IDrawable
  2.  {
  3.  		public float AnguloFin
  4.         {
  5.             get =&gt; (float)GetValue(AnguloFinProperty);
  6.             set =&gt; SetValue(AnguloFinProperty, value);
  7.         }
  8.         public static readonly BindableProperty AnguloFinProperty =
  9.             BindableProperty.Create(nameof(AnguloFin), typeof(float), typeof(DibujarArcoGreenwich));
  10.             
  11.             public void Draw(ICanvas canvas, RectF dirtyRect)
  12.         {
  13.             //dibujo arco
  14.             float finalgrados = 360 - AnguloFin;
  15.             canvas.StrokeColor = Color.Red;
  16.             canvas.StrokeSize = 6;
  17.             int xposicion = XPosicionCentro - Radio;
  18.             int yposicion = YPosicionCentro - Radio;
  19.             canvas.DrawArc(10, 10,90,90, 0, finalgrados, true, false);
  20.            }
  22. }

My viewmodel is :

  1. public partial class AriesViewModel : ObservableObject, INotifyPropertyChanged
  2.    {
  3.        [ObservableProperty]
  4.        float _anguloFin;
  5.         public AriesViewModel()
  6.        {
  7.            AnguloFin = 0;
  8.        }
  9.        [RelayCommand]
  10.        private void CalcularAries()
  11.        {
  12.        	AnguloFin = HacerCalculos();
  13.        }
  14.     }

My page XAML is :

  1. &lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot; ?&gt;
  2. &lt;ContentPage xmlns=&quot;http://schemas.microsoft.com/dotnet/2021/maui&quot;
  3.             xmlns:x=&quot;http://schemas.microsoft.com/winfx/2009/xaml&quot;
  4.             xmlns:local=&quot;clr-namespace:NautorStar.MisControles&quot;
  5.             xmlns:viewModels=&quot;clr-namespace:NautorStar.ViewModels&quot;
  6.             xmlns:drawables=&quot;clr-namespace:NautorStar.ClasesDibujo&quot;
  7.             x:Class=&quot;NautorStar.AriesPage&quot;
  8.             Title=&quot;Aries&quot;&gt;
  9.    &lt;ContentPage.BindingContext&gt;
  10.        &lt;viewModels:AriesViewModel /&gt;
  11.    &lt;/ContentPage.BindingContext&gt;
  12.     &lt;StackLayout&gt;
  13.                  &lt;GraphicsView 
  14.                            HorizontalOptions=&quot;Center&quot;
  15.                            VerticalOptions=&quot;Center&quot;
  16.                            HeightRequest=&quot;250&quot;
  17.                            WidthRequest=&quot;400&quot;&gt;
  18.                 &lt;GraphicsView.Drawable&gt;
  19.                     &lt;drawables:DibujarArcoGreenwich           
  20.                            AnguloFin=&quot;{Binding AnguloFin, Mode=TwoWay}&quot;/&gt;
  21.                   &lt;/GraphicsView.Drawable&gt;
  22.             &lt;/GraphicsView&gt;
  23.              &lt;Button Text=&quot;Calcular&quot;
  24.                    Command=&quot;{Binding CalcularAriesCommand}&quot; /&gt;
  25.        &lt;/StackLayout&gt;
  26. &lt;/ContentPage&gt;

But always the value of AnguloFin is 0. If I change the binding for a fixed value is OK.
Any idea why the binding doesn't work for me?
Thanks

Maria

答案1

得分: 0

我发现Drawable无法与BindableProperty一起使用。但是你可以通过继承来扩展GraphicsView并向其添加AnguloFin属性。

首先，你需要创建一个继承自GraphicsView的ScoreGraphicsView类，并在其中添加可绑定的AnguloFinProperty属性：

  1. public class ScoreGraphicsView : GraphicsView
  2. {
  3.     public float AnguloFin
  4.     {
  5.         get => (float)GetValue(AnguloFinProperty);
  6.         set => SetValue(AnguloFinProperty, value);
  7.     }
  9.     public static readonly BindableProperty AnguloFinProperty =
  10.         BindableProperty.Create(nameof(AnguloFin), typeof(float), typeof(ScoreGraphicsView), propertyChanged: AnguloFinChanged);
  12.     private static void AnguloFinChanged(BindableObject bindable, object oldValue, object newValue)
  13.     {
  14.         if (bindable is not ScoreGraphicsView { Drawable: DibujarArcoGreenwich drawable } view)
  15.         {
  16.             return;
  17.         }
  19.         drawable.AnguloFin = (float)newValue;
  20.         view.Invalidate();
  21.     }
  22. }

其次，你需要从DibujarArcoGreenwich类中移除BindableProperty，并将AnguloFin属性设置为具有默认getter和setter的普通属性：

  1. public class DibujarArcoGreenwich : IDrawable
  2. {
  3.     public float AnguloFin { get; set; }
  5.     public void Draw(ICanvas canvas, RectF dirtyRect)
  6.     {
  7.         float finalgrados = 360 - AnguloFin;
  8.         canvas.StrokeColor = Colors.Red;
  9.         canvas.StrokeSize = 6;
  10.         canvas.DrawArc(10, 10, 90, 90, 0, finalgrados, true, false);
  11.     }
  12. }

最后，你需要更改页面XAML中的代码，将AnguloFin放入drawables:ScoreGraphicsView中：

  1. <StackLayout>
  2.     <drawables:ScoreGraphicsView
  3.         x:Name="draw"
  4.         AnguloFin="{Binding AnguloFin}"
  5.         HorizontalOptions="Center"
  6.         VerticalOptions="Center"
  7.         HeightRequest="250"
  8.         WidthRequest="400">
  9.         <GraphicsView.Drawable>
  10.             <drawables:DibujarArcoGreenwich />
  11.         </GraphicsView.Drawable>
  12.     </drawables:ScoreGraphicsView>
  13.     <Button Text="Calcular"
  14.             Clicked="Button_Clicked"
  15.             Command="{Binding CalcularAriesCommand}" />
  16. </StackLayout>
英文:

I found that the Drawables cannot be used with BindableProperty. But you can add the AnguloFin property to the GraphicsView by extending it via inheritance.

First, you need to create a ScoreGraphicsView class that inherits from GraphicsView and add the bindable AnguloFinProperty to it:

  1.  public class ScoreGraphicsView : GraphicsView
  2.     {
  3.         public float AnguloFin
  4.         {
  5.             get =&gt; (float)GetValue(AnguloFinProperty);
  6.             set =&gt; SetValue(AnguloFinProperty, value);
  7.         }
  8.         public static readonly BindableProperty AnguloFinProperty =
  9.              BindableProperty.Create(nameof(AnguloFin), typeof(float), typeof(ScoreGraphicsView),  propertyChanged: AnguloFinChanged);
  11.         private static void AnguloFinChanged(BindableObject bindable, object oldValue, object newValue)
  12.         {
  13.             if (bindable is not ScoreGraphicsView { Drawable: DibujarArcoGreenwich drawable } view)
  14.             {
  15.                 return;
  16.             }
  18.             drawable.AnguloFin = (float)newValue;
  19.             view.Invalidate();
  20.         }
  21.     }

Second, You need to remove the BindableProperty from the DibujarArcoGreenwich and set the AnguloFin property into a regular property with default getter and setter:

  1. public class DibujarArcoGreenwich :  IDrawable
  2.     {
  3.         public float AnguloFin { get; set; }
  4.         public void Draw(ICanvas canvas, RectF dirtyRect)
  5.         {
  6.          
  7.             float finalgrados = 360 - AnguloFin;
  8.             canvas.StrokeColor = Colors.Red;
  9.             canvas.StrokeSize = 6;
  10.             canvas.DrawArc(10, 10, 90, 90, 0, finalgrados, true, false);
  11.         }
  13.     }

Last, you need to change the code in the page XAML, put the AnguloFin to the drawables:ScoreGraphicsView:

  1.  &lt;StackLayout&gt;
  2.         &lt;drawables:ScoreGraphicsView
  3.                  x:Name=&quot;draw&quot;
  4.                  AnguloFin=&quot;{Binding AnguloFin }&quot;
  5.                  HorizontalOptions=&quot;Center&quot;
  6.                  VerticalOptions=&quot;Center&quot;
  7.                  HeightRequest=&quot;250&quot;
  8.                  WidthRequest=&quot;400&quot;&gt;
  9.             &lt;GraphicsView.Drawable&gt;
  10.                 &lt;drawables:DibujarArcoGreenwich        
  11.                            /&gt;
  12.             &lt;/GraphicsView.Drawable&gt;
  13.         &lt;/drawables:ScoreGraphicsView&gt;
  14.         &lt;Button Text=&quot;Calcular&quot;
  15.                 Clicked=&quot;Button_Clicked&quot;
  16.                 Command=&quot;{Binding CalcularAriesCommand}&quot; /&gt;
  17.     &lt;/StackLayout&gt;

huangapple
  • 本文由 发表于 2023年8月8日 23:59:13
  • 转载请务必保留本文链接：https://go.coder-hub.com/76861295.html
  • c#
  • maui
  • mvvm
  • xaml
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定