Xamarin.Forms – Content View

Witam. Dzisiejszy post będzie poświęcony Xamarin.Forms. Przedstawię o co chodzi z ContentView na podstawie przykładu z wyświetlaniem imienia.

Content View

Xamarin.Forms umożliwia tworzenie ContentView, własnych kontrolek z których później można korzystać. Dodatkowo te kontrolki można rozszerzać o właściwości, tzw. Bindable Properties. Dla przykładu stwórzmy ContentView który będzie wyświetlać Hello imię. Zawartość kontrolki czyli Content może zawierać tylko jeden „widok”, element który dziedziczy po klasie View. W naszym przykładzie chcemy wyświetlić tylko Hello imię więc potrzebujemy Label który dziedziczy po View. Jeśli chcielibyśmy mieć dwa Labele, to sprawa się już trochę komplikuje i trzeba to opakować np. w StackLayout. Utwórzmy ContentView z nazwą HelloName.

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ContentViewExample.Controls.HelloName">
    <ContentView.Content>
        <Label Text="{Binding Name, StringFormat='Hello {0}'}" />
    </ContentView.Content>
</ContentView>

Powyżej zawartość pliku XAML która jest nam potrzebna do wyświetlenia tekstu. Korzystamy tutaj z bindingu który oferuje XAML oraz StringFormat żeby sformatować żądany tekst.

Przejdźmy do kodu. Żeby zrobić elastyczną kontrolkę do której możemy przekazać np. imię potrzebujemy utworzyć BindableProperty. Jest to statyczne pole w klasie które korzysta z właściwości którą również musimy utworzyć.

public static readonly BindableProperty NameProperty =
     BindableProperty.Create(nameof(Name), typeof(string), typeof(HelloName), null);

public string Name
{
    get { return (string)GetValue(NameProperty); }
    set { SetValue(NameProperty, value); }
}

Parametry funkcji Create które nas interesują:

• Nazwa właściwości – korzystamy tutaj z nameof
• Typ właściwości – Name jest typu string.
• Typ obiektu który posiada właściwość – W tym wypadku będzie to typ naszego ContentView

Na końcu jeszcze trzeba ustawić, w konstruktorze, BindingContext naszej kontrolki na nią samą. Wtedy w XAML będziemy mogli korzystać z naszych właściwości.

public HelloName()
{
    InitializeComponent();
    BindingContext = this;
}

Po utworzeniu kontrolki możemy z niej korzystać na naszych widokach. Ja akurat utworzyłem ContentView w katalogu Controls dlatego namespace różni się od namespace’u mojego widoku. Jedyne co to trzeba zaimportować ten namespace i można korzystać z nowej kontrolki.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:ContentViewExample.Controls"
             x:Class="ContentViewExample.MainPage">

    <StackLayout>
        <controls:HelloName Name="Jakub"></controls:HelloName>
    </StackLayout>

</ContentPage>

Działający kod z przykładu można znaleźć pod tym linkiem

Daj znać jak się podobało!