Cvičení: Přidání chování na stránku XAML

10 min

Dříve jste aplikaci Poznámky upravili tak, aby se rozložení uživatelského rozhraní přesunulo z kódu jazyka C# do XAML. Teď jste připraveni na stránku přidat následující funkce:

Podpora přizpůsobení barvy písma popisku a barvy pozadí, tlačítek a ovládacího prvku editoru Tímto způsobem je snadné upravit aplikaci, aby byla přístupnější pro uživatele, kteří vyžadují vysoce kontrastní uživatelské rozhraní.
Upravte výšku ovládacího prvku Editor v Androidu a iOSu. Při spuštění ve Windows má tento ovládací prvek dostatečnou šířku, aby uživatel mohl zadat přiměřené množství textu před posouváním. Na telefonu s Androidem nebo na iPhonu má užší šířka za následek rychlejší posouvání, takže je výhodné poskytnout větší svislý prostor.

Použití statického prostředku v XAML

Vytvoříte statickou třídu, která bude obsahovat barvy písma aplikace a hodnoty barvy pozadí. Pak pomocí x:Static rozšíření značek načtete tyto hodnoty z třídy a použijete je na kód XAML pro ovládací prvky na stránce.

V sadě Visual Studio se vraťte do aplikace Poznámky, kterou jste upravili v předchozím cvičení.

Poznámka:

Funkční kopie aplikace je k dispozici ve složce cvičení2 v úložišti cvičení, které jste naklonovali na začátku předchozího cvičení.
V okně Průzkumník řešení klikněte pravým tlačítkem na projekt Poznámky, vyberte Přidat a pak vyberte Třída.
V dialogovém okně Přidat novou položku se ujistěte, že je vybraná šablona třídy . Pojmenujte nový soubor třídy SharedResources.cs a pak vyberte Přidat:
V souboru SharedResources.cs nahraďte using direktivy následujícím kódem a označte třídu SharedResources jako static:
```
namespace Notes;

static class SharedResources
{

}
```
static readonly Přidejte pole FontColor do třídy SharedResources. Toto pole v současné době poskytuje hodnotu, která odpovídá modré, ale můžete ji upravit pomocí libovolné platné kombinace hodnot RGB:
```
static class SharedResources
{
    public static readonly Color FontColor = Color.FromRgb(0, 0, 0xFF);
}
```

Přidejte druhé static readonly pole s názvem BackgroundColor a nastavte ho na barvu podle vašeho výběru:

static class SharedResources
{
    ...
    public static readonly Color BackgroundColor = Color.FromRgb(0xFF, 0xF0, 0xAD);
}

Otevřete soubor MainPage.xaml.
Před atribut přidejte následující deklaraci oboru názvů XML do ContentPage elementu x:Class . Tato deklarace přináší třídy v oboru názvů poznámek jazyka C#na stránce XAML:
```
<ContentPage ...
         xmlns:notes="clr-namespace:Notes"
         x:Class="Notes.MainPage"
         ...>
```
TextColor Do ovládacího prvku přidejte atribut zobrazený v následujícím kóduLabel. Tento kód používá x:Static rozšíření značek k načtení hodnot uložených static v polích ve třídě SharedResources :
```
<Label Text="Notes"
    HorizontalOptions="Center"
    FontAttributes="Bold" 
    TextColor="{x:Static Member=notes:SharedResources.FontColor}" />
```

x:Static Rozšíření mark-up slouží k nastavení TextColor a BackgroundColor atributů pro ovládací Editor prvky a Button ovládací prvky. Dokončené revize souboru MainPage.xaml by měly vypadat takto:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:notes="clr-namespace:Notes"
         x:Class="Notes.MainPage">

    <VerticalStackLayout Padding="30,60,30,30">
        <Label Text="Notes"
            HorizontalOptions="Center"
            FontAttributes="Bold" 
            TextColor="{x:Static Member=notes:SharedResources.FontColor}" />

        <Editor x:Name="editor"
                Placeholder="Enter your note"
                HeightRequest="100" 
                TextColor="{x:Static Member=notes:SharedResources.FontColor}"/>

        <Grid Grid.Row="2" ColumnDefinitions="Auto,30,Auto">

            <Button Grid.Column="0"
                    Text="Save" 
                    WidthRequest="100"
                    TextColor="{x:Static Member=notes:SharedResources.FontColor}"
                    BackgroundColor="{x:Static Member=notes:SharedResources.BackgroundColor}"
                    Clicked="OnSaveButtonClicked" />

            <Button Grid.Column="2"
                    Text="Delete" 
                    WidthRequest="100"
                    TextColor="{x:Static Member=notes:SharedResources.FontColor}"
                    BackgroundColor="{x:Static Member=notes:SharedResources.BackgroundColor}"
                    Clicked="OnDeleteButtonClicked" />
        </Grid>
    </VerticalStackLayout>

</ContentPage>

Poznámka:

Tento kód XAML obsahuje opakování revizí, která nastavuje TextColor a BackgroundColor vlastnosti. XAML umožňuje definovat prostředky, které se dají použít globálně v aplikaci pomocí slovníku prostředků v souboru App.xaml . Tuto techniku popisujeme v pozdějším modulu.

Znovu sestavte aplikaci a spusťte ji pomocí Windows. Ověřte, že barvy odpovídají těm, které jste zadali ve třídě SharedResources . Pokud máte čas, zkuste aplikaci spustit také pomocí emulátoru Androidu:
Až budete hotovi, vraťte se do sady Visual Studio.

Přidání přizpůsobení specifické pro platformu

Otevřete soubor MainPage.xaml v sadě Visual Studio.
Vyhledejte definici Editor ovládacího prvku a upravte hodnotu vlastnosti HeightRequest , jak je znázorněno v následujícím příkladu:
```
<Editor x:Name="editor"
        ...
        HeightRequest="{OnPlatform 100, Android=500, iOS=500}" 
        .../>
```
Tento kód nastaví výchozí výšku ovládacího prvku na 100 jednotek, ale v Androidu ji zvýší na 500.
Znovu sestavte aplikaci a spusťte ji pomocí Windows a potom Android. Aplikace by měla na každé platformě vypadat takto:

Cvičení: Přidání chování na stránku XAML

Použití statického prostředku v XAML

Přidání přizpůsobení specifické pro platformu

Váš názor