Xamarin.Forms Samouczek dotyczący obrazu

Artykuł
Developer (Początkujący)
Czas do ukończenia: 10 min

Zanim podejmiesz próbę ukończenia tego samouczka, musisz pomyślnie ukończyć następujące szkolenia:

Skompiluj swój pierwszy Xamarin.Forms przewodnik Szybki start dotyczący aplikacji .
Samouczek dotyczący obiektu StackLayout.

Z tego samouczka dowiesz się, jak wykonywać następujące czynności:

Utwórz element Xamarin.FormsImage w języku XAML.
Dostosowywanie wyglądu obiektu Image.
Wyświetlanie lokalnego pliku obrazu z każdego projektu platformy.

Użyjesz programu Visual Studio 2019 lub Visual Studio dla komputerów Mac, aby utworzyć prostą aplikację, która pokazuje, jak wyświetlić obraz i dostosować jej wygląd. Na poniższych zrzutach ekranu przedstawiono ostateczną wersję aplikacji:

Użyjesz również Przeładowywanie na gorąco XAML, Xamarin.Forms aby zobaczyć zmiany interfejsu użytkownika bez ponownego kompilowania aplikacji.

Tworzenie obrazu

Pozostały czas: 9 min

Program Visual Studio
Visual Studio dla komputerów Mac

Do ukończenia tego samouczka jest potrzebny program Visual Studio 2019 (najnowsza wersja) z zainstalowanym pakietem roboczym Opracowywanie aplikacji mobilnych za pomocą środowiska .NET. Ponadto będzie potrzebny sparowany komputer Mac w celu kompilowania aplikacji samouczka w systemie iOS. Aby uzyskać informacje na temat instalowania platformy Xamarin, zobacz Instalowanie platformy Xamarin. Aby uzyskać informacje na temat łączenia programu Visual Studio 2019 z hostem kompilacji Mac, zobacz Parowanie z komputerem Mac w celu opracowywania aplikacji platformy Xamarin.iOS.

Uruchom program Visual Studio i utwórz nową pustą Xamarin.Forms aplikację o nazwie ImageTutorial.

Ważne

Fragmenty kodu w języku C# i XAML w tym samouczku wymagają, aby rozwiązanie miało nazwę ImageTutorial. Użycie innej nazwy spowoduje błędy kompilacji po skopiowaniu kodu z tego samouczka do rozwiązania.

Aby uzyskać więcej informacji na temat tworzonej biblioteki .NET Standard, zobacz Anatomia Xamarin.Forms aplikacji w przewodnikuXamarin.Forms Szybki start — szczegółowe omówienie.
W Eksploratorze rozwiązań w projekcie ImageTutorial kliknij dwukrotnie plik MainPage.xaml, aby go otworzyć. Następnie w pliku MainPage.xaml usuń cały kod szablonu i zastąp go następującym kodem:
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ImageTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Image Source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
               HeightRequest="300" />
    </StackLayout>
</ContentPage>
```
Ten kod deklaratywnie definiuje interfejs użytkownika dla strony, która składa się z obiektu Image w obiekcie StackLayout. Właściwość Image.Source określa obraz do wyświetlania przy użyciu identyfikatora URI. Właściwość Image.Source jest typu ImageSource, dzięki czemu źródłem obrazów mogą być pliki, identyfikatory URI lub zasoby. Aby uzyskać więcej informacji, zobacz Wyświetlanie obrazów w przewodniku Obrazy Xamarin.Forms .

Właściwość HeightRequest określa wysokość obiektu Image w jednostkach niezależnych od urządzenia.

Uwaga

Ustawienie właściwości WidthRequest w tym przykładzie nie jest konieczne. Jest tak dlatego, że obiekt Image domyślnie zachowuje współczynnik proporcji obrazu.
Na pasku narzędzi programu Visual Studio naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w wybranym zdalnym symulatorze systemu iOS lub emulatorze systemu Android:

Uwaga

Widok Image automatycznie buforuje pobrane obrazy na 24 godziny. Aby uzyskać więcej informacji, zobacz Pobieranie buforowania obrazów w Xamarin.Formsprzewodniku Obrazy.

Do ukończenia tego samouczka jest potrzebny program Visual Studio dla komputerów Mac (najnowsza wersja) z zainstalowaną obsługą platform iOS i Android. Ponadto będzie również potrzebne środowisko Xcode (najnowsza wersja). Aby uzyskać więcej informacji na temat instalowania platformy Xamarin, zobacz Instalowanie platformy Xamarin.

Uruchom Visual Studio dla komputerów Mac i utwórz nową pustą Xamarin.Forms aplikację o nazwie ImageTutorial.

Ważne

Fragmenty kodu w języku C# i XAML w tym samouczku wymagają, aby rozwiązanie miało nazwę ImageTutorial. Użycie innej nazwy spowoduje błędy kompilacji po skopiowaniu kodu z tego samouczka do rozwiązania.

Aby uzyskać więcej informacji na temat tworzonej biblioteki .NET Standard, zobacz Anatomia Xamarin.Forms aplikacji w przewodnikuXamarin.Forms Szybki start — szczegółowe omówienie.
W okienku rozwiązania w projekcie ImageTutorial kliknij dwukrotnie plik MainPage.xaml, aby go otworzyć. Następnie w pliku MainPage.xaml usuń cały kod szablonu i zastąp go następującym kodem:
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ImageTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Image Source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
               HeightRequest="300" />
    </StackLayout>
</ContentPage>
```
Ten kod deklaratywnie definiuje interfejs użytkownika dla strony, która składa się z obiektu Image w obiekcie StackLayout. Właściwość Image.Source określa obraz do wyświetlania przy użyciu identyfikatora URI. Właściwość Image.Source jest typu ImageSource, dzięki czemu źródłem obrazów mogą być pliki, identyfikatory URI lub zasoby. Aby uzyskać więcej informacji, zobacz Wyświetlanie obrazów w przewodniku Obrazy Xamarin.Forms .

Właściwość HeightRequest określa wysokość obiektu Image w jednostkach niezależnych od urządzenia.

Uwaga

Ustawienie właściwości WidthRequest w tym przykładzie nie jest konieczne. Jest tak dlatego, że obiekt Image domyślnie zachowuje współczynnik proporcji obrazu.
Na pasku narzędzi programu Visual Studio dla komputerów Mac naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w wybranym symulatorze systemu iOS lub emulatorze systemu Android:

Uwaga

Widok Image automatycznie buforuje pobrane obrazy na 24 godziny. Aby uzyskać więcej informacji, zobacz Pobieranie buforowania obrazów w Xamarin.Formsprzewodniku Obrazy.

Dostosowywanie wyglądu

Pozostały czas: 6 min

Program Visual Studio
Visual Studio dla komputerów Mac

W pliku MainPage.xaml zmodyfikuj deklarację obiektu Image, aby dostosować jego wygląd:
```
<Image Source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
       Aspect="Fill"
       HeightRequest="{OnPlatform iOS=300, Android=250}"
       WidthRequest="{OnPlatform iOS=300, Android=250}"
       HorizontalOptions="Center" />
```
Ten kod ustawia właściwość Aspect, która definiuje tryb skalowania obrazu, na wartość Fill. Składowa Fill jest zdefiniowana w wyliczeniu Aspect i powoduje rozciągnięcie obrazu w celu całkowitego wypełnienia widoku, niezależnie od zniekształcenia obrazu. Aby uzyskać więcej informacji na temat skalowania obrazów, zobacz Wyświetlanie obrazów w Xamarin.Forms przewodniku Obrazy.

Rozszerzenie znaczników OnPlatform umożliwia dostosowanie wyglądu interfejsu użytkownika dla każdej platformy. W tym przykładzie rozszerzenie znaczników służy do ustawienia właściwości HeightRequest i WidthRequest na 300 jednostek niezależnych od urządzenia w systemie iOS i 250 jednostek niezależnych od urządzenia w systemie Android. Aby uzyskać więcej informacji na temat rozszerzenia znaczników OnPlatform, zobacz Rozszerzenie znaczników OnPlatform w przewodniku Korzystanie z rozszerzeń znaczników języka XAML.

Ponadto właściwość HorizontalOptions określa, czy obraz będzie wyśrodkowany w poziomie.
Jeśli aplikacja nadal działa, zapisz zmiany w pliku, a interfejs użytkownika aplikacji zostanie automatycznie zaktualizowany w symulatorze lub w emulatorze. W przeciwnym razie na pasku narzędzi programu Visual Studio naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w wybranym zdalnym symulatorze systemu iOS lub emulatorze systemu Android:

Zatrzymaj aplikację w programie Visual Studio.

W pliku MainPage.xaml zmodyfikuj deklarację obiektu Image, aby dostosować jego wygląd:
```
<Image Source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
       Aspect="Fill"
       HeightRequest="{OnPlatform iOS=300, Android=250}"
       WidthRequest="{OnPlatform iOS=300, Android=250}"
       HorizontalOptions="Center" />
```
Ten kod ustawia właściwość Aspect, która definiuje tryb skalowania obrazu, na wartość Fill. Składowa Fill jest zdefiniowana w wyliczeniu Aspect i powoduje rozciągnięcie obrazu w celu całkowitego wypełnienia widoku, niezależnie od zniekształcenia obrazu. Aby uzyskać więcej informacji na temat skalowania obrazów, zobacz Wyświetlanie obrazów w Xamarin.Forms przewodniku Obrazy.

Rozszerzenie znaczników OnPlatform umożliwia dostosowanie wyglądu interfejsu użytkownika dla każdej platformy. W tym przykładzie rozszerzenie znaczników służy do ustawienia właściwości HeightRequest i WidthRequest na wartość 300 w systemie iOS i 250 w systemie Android. Aby uzyskać więcej informacji na temat rozszerzenia znaczników OnPlatform, zobacz Rozszerzenie znaczników OnPlatform w przewodniku Korzystanie z rozszerzeń znaczników języka XAML.

Ponadto właściwość HorizontalOptions określa, czy obraz będzie wyśrodkowany w poziomie.
Jeśli aplikacja nadal działa, zapisz zmiany w pliku, a interfejs użytkownika aplikacji zostanie automatycznie zaktualizowany w symulatorze lub w emulatorze. W przeciwnym razie na pasku narzędzi programu Visual Studio dla komputerów Mac naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w wybranym symulatorze systemu iOS lub emulatorze systemu Android:

Zatrzymaj aplikację w programie Visual Studio dla komputerów Mac.

Wyświetlanie obrazu lokalnego

Pozostały czas: 4 min

Pliki obrazów można dodawać do projektów platformy i przywoływanych z Xamarin.Forms udostępnionego kodu. Ta metoda dystrybucji obrazów jest wymagana, gdy obrazy są specyficzne dla platformy, na przykład podczas korzystania z różnych rozdzielczości na różnych platformach lub nieco innych projektów.

W tym ćwiczeniu zmodyfikujesz rozwiązanie ImageTutorial, aby wyświetlić obraz lokalny, a nie obraz pobrany z identyfikatora URI. Lokalny obraz to logo platformy Xamarin, które powinno zostać pobrane po kliknięciu przycisku poniżej.

Pobieranie pliku XamarinLogo.png

Ważne

Aby użyć jednego obrazu na wszystkich platformach, ta sama nazwa pliku musi być używana na każdej platformie i powinna być prawidłową nazwą zasobu systemu Android (czyli dozwolone są tylko małe litery, cyfry, podkreślenia i kropki).

Program Visual Studio
Visual Studio dla komputerów Mac

W Eksploratorze rozwiązań w projekcie ImageTutorial.iOS rozwiń węzeł Katalogi zasobów i kliknij dwukrotnie pozycję Zasoby, aby ją otworzyć. Następnie na karcie Assets.xcassets kliknij przycisk Plus i wybierz pozycję Dodaj zestaw obrazów:
Na karcie Assets.xcassets wybierz nowy zestaw obrazów, a zostanie wyświetlony edytor:
Przeciągnij plik XamarinLogo.png ze swojego systemu plików do pola 1x w kategorii Uniwersalny:
Na karcie Assets.xcassets kliknij prawym przyciskiem myszy nazwę nowego zestawu obrazów i zmień ją na XamarinLogo:

Zapisz i zamknij kartę Assets.xcassets.
W Eksploratorze rozwiązań w projekcie ImageTutorial.Android rozwiń folder Zasoby. Następnie przeciągnij plik XamarinLogo.png z Twojego systemu plików do folderu drawable:

Uwaga

Program Visual Studio automatycznie ustawi akcję kompilacji obrazu do elementu AndroidResource.
W projekcie ImageTutorial w pliku MainPage.xaml zmodyfikuj deklarację klasy Image, aby wyświetlić lokalny plik XamarinLogo:
```
<Image Source="XamarinLogo"
       WidthRequest="{OnPlatform iOS=300, Android=250}"
       HorizontalOptions="Center" />
```
Ten kod ustawia właściwość Source na plik lokalny do wyświetlenia. Właściwość WidthRequest jest ustawiona na 300 jednostek niezależnych od urządzenia w systemie iOS i 250 jednostek niezależnych od urządzenia w systemie Android. Ponadto właściwość HorizontalOptions określa, czy obraz będzie wyśrodkowany w poziomie.

Uwaga

W przypadku obrazów PNG w systemie iOS rozszerzenie png można pominąć w nazwie pliku określonej we właściwości Source. W przypadku innych formatów obrazu rozszerzenie jest wymagane.
Na pasku narzędzi programu Visual Studio naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w wybranym symulatorze systemu iOS lub emulatorze systemu Android:

Zatrzymaj aplikację w programie Visual Studio.

Aby uzyskać więcej informacji na temat obrazów lokalnych, zobacz Obrazy lokalne w Xamarin.Forms przewodniku.

W okienku rozwiązania w projekcie ImageTutorial.iOS kliknij dwukrotnie plik Assets.xcassets, aby go otworzyć. Następnie na liście zasobów kliknij prawym przyciskiem myszy i wybierz pozycję Nowy zestaw obrazów:
Na liście zasobów wybierz nowy zestaw obrazów, a zostanie wyświetlony edytor:
Przeciągnij plik XamarinLogo.png ze swojego systemu plików do pola 1x w kategorii Uniwersalny:
Na liście zasobów kliknij dwukrotnie nazwę nowego zestawu obrazów i zmień ją na XamarinLogo:
W okienku rozwiązania w projekcie ImageTutorial.Android rozwiń folder Zasoby. Następnie przeciągnij plik XamarinLogo.png z Twojego systemu plików do folderu drawable.
W oknie dialogowym Dodawanie pliku do folderu naciśnij przycisk OK.

Uwaga

Program Visual Studio dla komputerów Mac automatycznie ustawi akcję kompilacji obrazu do elementu AndroidResource.
W projekcie ImageTutorial w pliku MainPage.xaml zmodyfikuj deklarację klasy Image, aby wyświetlić lokalny plik XamarinLogo:
```
<Image Source="XamarinLogo"
       WidthRequest="{OnPlatform iOS=300, Android=250}"
       HorizontalOptions="Center" />
```
Ten kod ustawia właściwość Source na plik lokalny do wyświetlenia. Właściwość WidthRequest jest ustawiona na 300 jednostek niezależnych od urządzenia w systemie iOS i 250 jednostek niezależnych od urządzenia w systemie Android. Ponadto właściwość HorizontalOptions określa, czy obraz będzie wyśrodkowany w poziomie.

Uwaga

W przypadku obrazów PNG w systemie iOS rozszerzenie png można pominąć w nazwie pliku określonej we właściwości Source. W przypadku innych formatów obrazu rozszerzenie jest wymagane.
Na pasku narzędzi programu Visual Studio dla komputerów Mac naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w wybranym symulatorze systemu iOS lub emulatorze systemu Android:

Zatrzymaj aplikację w programie Visual Studio dla komputerów Mac.

Aby uzyskać więcej informacji na temat obrazów lokalnych, zobacz Obrazy lokalne w Xamarin.Forms przewodniku.