Xamarin.Forms Samouczek dotyczący przycisku

Artykuł
Developer (Początkujący)
Czas do ukończenia: 7 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.FormsButton w języku XAML.
Odpowiadanie na naciśnięcie obiektu Button.
Zmiana wyglądu obiektu Button.

Użyjesz programu Visual Studio 2019 lub Visual Studio dla komputerów Mac, aby utworzyć prostą aplikację, która pokazuje, jak dostosować element Button. 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 przycisku

Pozostały czas: 6 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 ButtonTutorial.

Ważne

Fragmenty kodu w języku C# i XAML w tym samouczku wymagają, aby rozwiązanie miało nazwę ButtonTutorial. 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 ButtonTutorial 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="ButtonTutorial.MainPage">
   <StackLayout Margin="20,35,20,20">
       <Button Text="Click me" />
   </StackLayout>
</ContentPage>
```
Ten kod deklaratywnie definiuje interfejs użytkownika dla strony, która składa się z obiektu Button w obiekcie StackLayout. Właściwość Button.Text określa tekst wyświetlany w obiekcie Button.
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:

Zwróć uwagę, że domyślnie obiekt Button zwykle zajmuje całe miejsce, które jest dozwolone w jego przypadku — w tej sytuacji jest to pełna szerokość obiektu nadrzędnego (StackLayout).

Zatrzymaj aplikację w programie Visual Studio.

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 ButtonTutorial.

Ważne

Fragmenty kodu w języku C# i XAML w tym samouczku wymagają, aby rozwiązanie miało nazwę ButtonTutorial. 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 ButtonTutorial 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="ButtonTutorial.MainPage">
   <StackLayout Margin="20,35,20,20">
       <Button Text="Click me" />
   </StackLayout>
</ContentPage>
```
Ten kod deklaratywnie definiuje interfejs użytkownika dla strony, która składa się z obiektu Button w obiekcie StackLayout. Właściwość Button.Text określa tekst wyświetlany w obiekcie Button.
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:

Zwróć uwagę, że domyślnie obiekt Button zwykle zajmuje całe miejsce, które jest dozwolone w jego przypadku — w tej sytuacji jest to pełna szerokość obiektu nadrzędnego (StackLayout).

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

Obsługa kliknięć

Pozostały czas: 4 min

Program Visual Studio
Visual Studio dla komputerów Mac

W pliku MainPage.xaml zmodyfikuj deklarację obiektu Button tak, aby określała program obsługi dla zdarzenia Clicked:
```
<Button Text="Click me"
        Clicked="OnButtonClicked" />
```
Ten kod ustawia zdarzenie Clicked na program obsługi zdarzeń o nazwie OnButtonClicked, który zostanie utworzony w następnym kroku.
W Eksploratorze rozwiązań w projekcie ButtonTutorial rozwiń węzeł MainPage.xaml i kliknij dwukrotnie plik MainPage.xaml.cs, aby go otworzyć. Następnie w pliku MainPage.xaml.cs dodaj do klasy program obsługi zdarzeń OnButtonClicked:
```
void OnButtonClicked(object sender, EventArgs e)
{
    (sender as Button).Text = "Click me again!";
}
```
W przypadku naciśnięcia obiektu Button jest wykonywana metoda OnButtonClicked. Argument sender jest obiektem Button odpowiedzialnym za uruchamianie zdarzenia Clicked i może posłużyć do uzyskiwania dostępu do obiektu Button. Ten program obsługi zdarzeń aktualizuje tekst wyświetlany przez obiekt Button.

Uwaga

Oprócz zdarzenia Clicked obiekt Button definiuje zdarzenia Pressed i Released. Aby uzyskać więcej informacji, zobacz Naciśnięcie i zwolnienie przycisku w przewodniku Xamarin.Forms Przycisk .
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. Kliknij obiekt Button i sprawdź, czy wyświetlany tekst ulegnie zmianie:

Aby uzyskać więcej informacji na temat obsługi kliknięć przycisków, zobacz Obsługa kliknięć przycisków w przewodniku Xamarin.Forms Przycisk .

W pliku MainPage.xaml zmodyfikuj deklarację obiektu Button tak, aby określała program obsługi dla zdarzenia Clicked:
```
<Button Text="Click me"
        Clicked="OnButtonClicked" />
```
Ten kod ustawia zdarzenie Clicked na program obsługi zdarzeń o nazwie OnButtonClicked, który zostanie utworzony w następnym kroku.
W okienku rozwiązania w projekcie ButtonTutorial rozwiń węzeł MainPage.xaml i kliknij dwukrotnie plik MainPage.xaml.cs, aby go otworzyć. Następnie w pliku MainPage.xaml.cs dodaj do klasy program obsługi zdarzeń OnButtonClicked:
```
void OnButtonClicked(object sender, EventArgs e)
{
    (sender as Button).Text = "Click me again!";
}
```
W przypadku naciśnięcia obiektu Button jest wykonywana metoda OnButtonClicked. Argument sender jest obiektem Button odpowiedzialnym za uruchamianie zdarzenia Clicked i może posłużyć do uzyskiwania dostępu do obiektu Button. Ten program obsługi zdarzeń aktualizuje tekst wyświetlany przez obiekt Button.

Uwaga

Oprócz zdarzenia Clicked obiekt Button definiuje zdarzenia Pressed i Released. Aby uzyskać więcej informacji, zobacz Naciśnięcie i zwolnienie przycisku w przewodniku Xamarin.Forms Przycisk .
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. Kliknij obiekt Button i sprawdź, czy wyświetlany tekst ulegnie zmianie:

Aby uzyskać więcej informacji na temat obsługi kliknięć przycisków, zobacz Obsługa kliknięć przycisków w przewodniku Xamarin.Forms Przycisk .

Zmienianie wyglądu

Pozostały czas: 2 min

Program Visual Studio
Visual Studio dla komputerów Mac

W pliku MainPage.xaml zmodyfikuj deklarację obiektu Button, aby zmienić jego wygląd:
```
<Button Text="Click me"
        Clicked="OnButtonClicked"
        TextColor="Blue"
        BackgroundColor="Aqua"
        BorderColor="Red"
        BorderWidth="5"
        CornerRadius="5"
        WidthRequest="150"
        HeightRequest="75" />
```
Ten kod ustawia właściwości, które zmieniają wygląd obiektu Button. Właściwość TextColor określa kolor tekstu obiektu Button, a właściwość BackgroundColor ustawia kolor tła tekstu. Właściwość BorderColor określa kolor obszaru otaczającego obiekt Button, a właściwość BorderWidth określa szerokość obramowania. Domyślnie obiekt Button jest prostokątny, ale dzięki ustawieniu odpowiedniej wartości właściwości CornerRadius może uzyskać zaokrąglone narożniki. Ponadto rozmiar obiektu Button można zmienić, ustawiając jego właściwości WidthRequest i HeightRequest.
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. Zwróć uwagę, że wygląd obiektu Button uległ zmianie:

Zatrzymaj aplikację w programie Visual Studio.

Aby uzyskać więcej informacji na temat ustawiania Button wyglądu, zobacz Wygląd przycisku w przewodniku Xamarin.Forms Przycisk .

W pliku MainPage.xaml zmodyfikuj deklarację obiektu Button, aby zmienić jego wygląd:
```
<Button Text="Click me"
        Clicked="OnButtonClicked"
        TextColor="Blue"
        BackgroundColor="Aqua"
        BorderColor="Red"
        BorderWidth="5"
        CornerRadius="5"
        WidthRequest="150"
        HeightRequest="75" />
```
Ten kod ustawia właściwości, które zmieniają wygląd obiektu Button. Właściwość TextColor określa kolor tekstu obiektu Button, a właściwość BackgroundColor ustawia kolor tła tekstu. Właściwość BorderColor określa kolor obszaru otaczającego obiekt Button, a właściwość BorderWidth określa szerokość obramowania. Domyślnie obiekt Button jest prostokątny, ale dzięki ustawieniu odpowiedniej wartości właściwości CornerRadius może uzyskać zaokrąglone narożniki. Ponadto rozmiar obiektu Button można zmienić, ustawiając jego właściwości WidthRequest i HeightRequest.
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. Zwróć uwagę, że wygląd obiektu Button uległ zmianie:

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

Aby uzyskać więcej informacji na temat ustawiania Button wyglądu, zobacz Wygląd przycisku w przewodniku Xamarin.Forms Przycisk .

Udostępnij za pośrednictwem

Xamarin.Forms Samouczek dotyczący przycisku

Tworzenie przycisku

Obsługa kliknięć

Zmienianie wyglądu

Gratulacje!

Następne kroki

Udostępnij za pośrednictwem

Xamarin.Forms Samouczek dotyczący przycisku

Tworzenie przycisku

Obsługa kliknięć

Zmienianie wyglądu

Gratulacje!

Następne kroki

Pokrewne łącza