niedziela, 26 marca 2017

Jak narysować coś w Xamarin.Forms

Hej,
dzisiaj kolejny problem jaki musiałem rozwiązać w formsach. Chciałem narysować ul. W zależności od jego typu, elementów i danych wprowadzonych przez użytkownika rysunek miał się różnić tak aby oddawać jego rzeczywisty stan więc wstawienie gotowego rastra odpadało. Schemat ula musi być więc wygenerowany w kodzie - niestety ograniczenia formsów znowu okazały się zbyt duże. Tak na prawdę musimy poprzestać na samym prostokącie, który możemy zrealizować np poprzez kontrolkę BoxView lub każdą inną, która ma właściwość BackgroundColor. W Adobe AIR sprawa byłaby prosta - większość kontrolek wystawia nam obiekt klasy Graphics, który pozwala na rysowanie wektorowe przeróżnych kształtów. Po, krótkim researchu odnalazłem jej odpowiednik dla Xamarina - po pierwsze NGraphics, które pozwala na obsługe wektorowej grafiki na każdej z platform korzystając z natywnych konrolek, a po drugie - NControl, która to biblioteka opakowuje pierwszą w kontrolkę, dziedziczącą po Xamarin.Forms.View. Sprawa jest o tyle przyjemna, że mając naszą biblioteke rysującą w postaci View - możemy nie naruszając architektury MVVM rysować i bindować do widoku nasz rysunek np poprzez:
<ContentView Content="{Binding BeeHiveDrawing}" />
całkowicie w naszym modelu widoku:
public Xamarin.Forms.View BeeHiveDrawing
{
    get
    {
        return _beeHiveDrawing;
    }
    set
    {
        _beeHiveDrawing = value;
        OnPropertyChanged(nameof(BeeHiveDrawing));
    }
}
Ok, przejdźmy więc dalej. Sama inicjalizacja naszej kontrolki jest standardowa  i opisana pod linkiem podanym powyżej. Jej przykładowe użycie wygląda następująco:
var nc = new NControlView((NGraphics.ICanvas canvas, NGraphics.Rect rect) =>
{
    canvas.DrawPath(new PathOp[] 
    { 
        new MoveTo(0, 0),
        new LineTo(rect.Width, rect.Height) 
    }, 
    new Pen("#ff0000", 3));
});

W konstruktorze NControlView podajemy Action<ICanvas, Rect> gdzie otrzymujemy nasz element - płachtę, po której rysujemy oraz jej finalne wymiary w postaci obiektu NGraphics.Rect. Mamy więc od czego zacząć - w następnym poście zaprezentuje jak poradziłem sobie z zadaniem, opisanym na początku - rysowaniem ula.

0 komentarze: