DrawingView

, DrawingView dokunma veya fare etkileşimi kullanarak çizgilerin çizılmasına olanak tanıyan bir yüzey sağlar. Bir kullanıcı çiziminin sonucu görüntü olarak kaydedilebilir. Bunun yaygın bir kullanım örneği, bir uygulamada imza kutusu sağlamaktır.

Temel kullanım

DrawingView çizgi rengini, çizgi genişliğini ve çizgi koleksiyonuna bağlamayı sağlar.

XAML

XAML ad alanını dahil edin

Araç setini XAML'de kullanmak için sayfanıza veya görünümünüzde aşağıdakilerin xmlns eklenmesi gerekir:

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

Bu nedenle aşağıdakiler:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

</ContentPage>

aşağıdakiler dahil xmlns edilecek şekilde değiştirilir:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">

</ContentPage>

DrawingView'ı kullanma

<toolkit:DrawingView
            Lines="{Binding MyLines}"
            LineColor="Red"
            LineWidth="5" />

C#

using CommunityToolkit.Maui.Views;

var drawingView = new DrawingView
{
    Lines = new ObservableCollection<IDrawingLine>(),
    LineColor = Colors.Red,
    LineWidth = 5
};

Aşağıdaki ekran görüntüsünde, Android'de elde edilen DrawingView gösterilmektedir:

Çok Satırlı kullanım

Varsayılan olarak DrawingView yalnızca 1 satırı destekler. Etkinleştirmek MultiLine için true olarak ayarlayın IsMultiLineModeEnabled . False olduğundan emin ShouldClearOnFinish olun.

XAML

<views:DrawingView
            Lines="{Binding MyLines}"
            IsMultiLineModeEnabled="true"
            ShouldClearOnFinish="false" />

C#

using CommunityToolkit.Maui.Views;

var gestureImage = new Image();
var drawingView = new DrawingView
{
    Lines = new ObservableCollection<IDrawingLine>(),
    IsMultiLineModeEnabled = true,
    ShouldClearOnFinish = false,
};

Aşağıdaki ekran görüntüsünde, Android'de elde edilen DrawingView gösterilmektedir:

Çizim Çizgisi Tamamlandığında olayı işleme

DrawingView gibi OnDrawingLineCompletedolaylara abone olmayı sağlar. Buna karşılık gelen komut DrawingLineCompletedCommand da kullanılabilir.

XAML

<views:DrawingView
            Lines="{Binding MyLines}"
            DrawingLineCompletedCommand="{Binding DrawingLineCompletedCommand}"
            OnDrawingLineCompleted="OnDrawingLineCompletedEvent" />

C#

using CommunityToolkit.Maui.Views;

var gestureImage = new Image();
var drawingView = new DrawingView
{
    Lines = new ObservableCollection<IDrawingLine>(),
    DrawingLineCompletedCommand = new Command<IDrawingLine>(async (line) =>
    {
        var cts = new CancellationTokenSource(TimeSpan.FromSeconds(5));

        var stream = await line.GetImageStream(gestureImage.Width, gestureImage.Height, Colors.Gray.AsPaint(), cts.Token);
        gestureImage.Source = ImageSource.FromStream(() => stream);
    })
};
drawingView.OnDrawingLineCompleted += async (s, e) =>
{
    var cts = new CancellationTokenSource(TimeSpan.FromSeconds(5));

    var stream = await e.LastDrawingLine.GetImageStream(gestureImage.Width, gestureImage.Height, Colors.Gray.AsPaint(), cts.Token);
    gestureImage.Source = ImageSource.FromStream(() => stream);
};

ScrollView içinde kullanma

bir iç ScrollView kullanırken DrawingView ile ScrollView dokunma etkileşimi bazen iOS üzerinde kesilebilir. Bu durum, özelliği false aşağıdaki örnekte gösterildiği ShouldDelayContentTouches gibi iOS'ta olarak ayarlanarak önlenebilir:

ios:ScrollView.ShouldDelayContentTouches="false" öğesini DrawingView içeren ScrollView'a ekleyerek bu sorunu çözdüm:

<ContentPage
    xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls">

    <ScrollView ios:ScrollView.ShouldDelayContentTouches="false">

        <DrawingView />

    </ScrollView>

</ContentPage>

Daha fazla bilgi için bkz. ScrollView içerik dokunuşları.

Gelişmiş kullanım

Tüm avantajları elde etmek için, DrawingView çizim çizgilerinin görüntü akışını alma yöntemlerini sağlar.

XAML

<toolkit:DrawingView
            x:Name="DrawingViewControl"
            Lines="{Binding MyLines}"
            IsMultiLineModeEnabled="true"
            ShouldClearOnFinish="true"
            DrawingLineCompletedCommand="{Binding DrawingLineCompletedCommand}"
            OnDrawingLineCompleted="OnDrawingLineCompletedEvent"
            LineColor="Red"
            LineWidth="5"
            HorizontalOptions="Fill"
            VerticalOptions="Fill">
            <toolkit:DrawingView.Background>
                    <LinearGradientBrush StartPoint="0,0"
                                         EndPoint="0,1">
                        <GradientStop Color="Blue"
                                      Offset="0"/>
                        <GradientStop Color="Yellow"
                                      Offset="1"/>
                    </LinearGradientBrush>
            </toolkit:DrawingView.Background>
</toolkit:DrawingView>

C#

using CommunityToolkit.Maui.Views;

var gestureImage = new Image();
var drawingView = new DrawingView
{
    Lines = new ObservableCollection<IDrawingLine>(),
    IsMultiLineModeEnabled = true,
    ShouldClearOnFinish = false,
    DrawingLineCompletedCommand = new Command<IDrawingLine>(async (line) =>
    {
        var cts = new CancellationTokenSource(TimeSpan.FromSeconds(5));

        var stream = await line.GetImageStream(gestureImage.Width, gestureImage.Height, Colors.Gray.AsPaint(), cts.Token);
        gestureImage.Source = ImageSource.FromStream(() => stream);
    }),
    LineColor = Colors.Red,
    LineWidth = 5,
    Background = Brush.Red
};
drawingView.OnDrawingLineCompleted += async (s, e) =>
{
    var cts = new CancellationTokenSource(TimeSpan.FromSeconds(5));

    var stream = await e.LastDrawingLine.GetImageStream(gestureImage.Width, gestureImage.Height, Colors.Gray.AsPaint(), cts.Token);
    gestureImage.Source = ImageSource.FromStream(() => stream);
};

// get stream from lines collection
var cts = new CancellationTokenSource(TimeSpan.FromSeconds(5));
var lines = new List<IDrawingLine>();
var stream1 = await DrawingView.GetImageStream(
                lines,
                new Size(gestureImage.Width, gestureImage.Height),
                Colors.Black.
                cts.Token);

// get steam from the current DrawingView
var stream2 = await drawingView.GetImageStream(gestureImage.Width, gestureImage.Height, cts.Token);

Özellikler

Çizim Çizgisi

, DrawingLine noktaların listesini içerir ve her çizgi stilini ayrı ayrı yapılandırmaya olanak tanır.

Özellikler

Özel IDrawingLine

Varsayılanı DrawingLine özel uygulamayla değiştirmek için 2 adım vardır:

1. uygulayan IDrawingLineözel sınıf oluşturma:

   public class MyDrawingLine : IDrawingLine
   {
       public ObservableCollection<PointF> Points { get; } = new();
       ...
   }
   

2. uygulayan IDrawingLineAdapterözel sınıf oluşturun.

   public class MyDrawingLineAdapter : IDrawingLineAdapter
   {
       public IDrawingLine(MauiDrawingLine mauiDrawingLine)
       {
           return new MyDrawingLine
           {
               Points = mauiDrawingLine.Points,
               ...
           }
       }
   }
   

3. içinde IDrawingViewHandlerözel IDrawingLineAdapter olarak ayarlayın:

   var myDrawingLineAdapter = new MyDrawingLineAdapter();
   drawingViewHandler.SetDrawingLineAdapter(myDrawingLineAdapter);
   

DrawingLineStartedEventArgs

Son çizim noktasını içeren olay bağımsız değişkeni.

Özellikler

DrawingLineCompletedEventArgs

Son çizim çizgilerini içeren olay bağımsız değişkeni.

Özellikler

PointDrawnEventArgs

Son çizim noktasını içeren olay bağımsız değişkeni.

Özellikler

Yöntemler

Örnekler

Bu özelliğin bir örneğini .NET MAUI Community Toolkit Örnek Uygulaması'nda çalışır durumda bulabilirsiniz.

API

üzerinde için DrawingView kaynak kodunu .NET MAUI Community Toolkit GitHub deposunda bulabilirsiniz.