Poprzednie

Następne

Tworzenie interakcyjnego interfejsu użytkownika

Ukończone

W poprzednich lekcjach utworzono prosty interfejs użytkownika formularza z monitem o wprowadzenie nazwy i wyświetlenie powitania za pomocą przycisku. W tej lekcji formularz jest nieco bardziej przyjazny dla użytkownika, wyłączając lub ukrywając przycisk Prześlij do momentu wprowadzenia co najmniej trzech znaków.

Najpierw sprawdźmy dokładnie, kiedy MainPageLogic.UserName wartość jest ustawiana za pomocą powiązania.

1. Umieść punkt przerwania

Otwórz MainPageLogic.cs plik i znajdź wiersz zawierający UserName właściwość .

public string UserName { get; set; }

Ustaw punkt przerwania na ustawieniu, przenosząc daszek wewnątrz set tekstu i naciskając klawisz F9. Można to również osiągnąć, klikając prawym przyciskiem myszy set i wybierając pozycję Punkt przerwania / Wstaw punkt przerwania.

2. Uruchamianie aplikacji w trybie debugowania

Następnie uruchom aplikację w trybie debugowania (F5 lub Debuguj / Rozpocznij debugowanie). Wpisz coś w obiekcie TextBox i zwróć uwagę, że punkt przerwania nie został trafiony. Naciśnięcie klawisza Tab powoduje przeniesienie fokusu danych wejściowych do następnej kontrolki (w naszym przypadku przycisku). Utrata fokusu na aktualizacjach TextBox powiązania, więc punkt przerwania zostanie trafiony.

3. Zmień powiązanie tak, aby było aktualizowane na każdym naciśnięciu klawiszy

Zatrzymaj debugowanie, naciskając klawisze Shift+F5 lub wybierając pozycję Debuguj/Zatrzymaj debugowanie.

Aby przekazać dokładną opinię na temat włączenia przycisku Prześlij , nie możemy poczekać na utratę fokusu na obiekcie TextBox. Na szczęście istnieje sposób zmiany zachowania powiązania. Możesz wymusić zaktualizowanie UserName właściwości (czyli źródła, ponieważ mówimy o TwoWay powiązaniu) za każdym razem, gdy właściwość text ulegnie zmianie. Musimy zmienić UpdateSourceTrigger powiązanie, które jest domyślnie ustawione na LostFocus wartość . UpdateSourceTrigger definiuje okoliczności, które powodują zaktualizowanie źródła.

Otwórz plik MainPage.xaml i znajdź plik TextBox. Następnie zmień powiązanie, dodając element UpdateSourceTrigger=PropertyChanged. Cały TextBox tag powinien teraz wyglądać następująco:

<TextBox Name="tbUserName" 
         Margin="10" 
         Width="150" 
         VerticalAlignment="Center" 
         Text="{x:Bind Logic.UserName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>

Jeśli teraz debugujesz aplikację, możesz zobaczyć, że punkt przerwania zostanie trafiony z każdym naciśnięciem klawiszy i zmianą tekstu. Świetnie!

Możesz pamiętać, że gdy użyto powiązania interfejsu użytkownika do interfejsu użytkownika w celu wyświetlenia powitania, każde naciśnięcie klawiszy zwolniło powiązanie. W takim przypadku powiązanie zostało zdefiniowane na TextBlockobiekcie , a zatem źródło było TextBox.Text właściwością, która zmienia się przy użyciu każdego naciśnięcia klawisza. UpdateSourceTrigger wpływa na przepływ danych w innym kierunku. Przepływa ze źródła powiązania do kontrolki, w której zdefiniowano powiązanie (element docelowy powiązania).

5. Dodaj IsSubmitAllowed właściwość

Następnie należy dodać właściwość logiczną wskazującą, czy przesyłanie formularza jest dozwolone. Otwórz plik MainPageLogic.cs i dodaj nową właściwość do MainPageLogic klasy.

public bool IsSubmitAllowed => UserName?.Trim().Length > 2;

Jest to bardzo prosta walidacja: jeśli wprowadzony tekst, przycięty do znaków wiodących i końcowych białych znaków, zawiera więcej niż dwa znaki, akceptujemy go jako nazwę użytkownika.

6. Przeszacuj IsSubmitAllowed ponownie po każdej zmianie na UserName

Musimy poinformować strukturę interfejsu użytkownika, kiedy należy ponownie sprawdzić tę właściwość i odzwierciedlić ją w interfejsie użytkownika. Najlepszym sposobem wyzwolenia tej ponownej UserName oceny jest wywołanie RaisePropertyChanged metody w ustawieniu właściwości . Aby można było dodać kod do zestawu, należy go przekonwertować na pełną właściwość. Zastąp UserName właściwość następującym kodem:

private string _userName;
public string UserName
{
    get { return _userName; }
    set
    {
        _userName = value;
        RaisePropertyChanged(nameof(IsSubmitAllowed));
    }
}

Nie używamy INotifyPropertyChanged tej właściwości, ponieważ nie mamy jeszcze sytuacji, w której UserName właściwość została zmieniona z kodu. Jednak za każdym razem, gdy tekst zmienia się w TextBoxpliku , musimy poinformować interfejs użytkownika, że IsSubmitAllowed właściwość mogła ulec zmianie i powinna zostać ponownie zwalczona.

7. Powiąż IsSubmitAllowed właściwość z właściwością przycisku IsEnabled

Teraz skończysz z kodem. Wróć do pliku MainPage.xaml i znajdź przycisk Prześlij . IsEnabled Dodaj atrybut, aby kod XAML przycisku wyglądał następująco:

<Button Margin="10" 
        VerticalAlignment="Center" 
        Click="{x:Bind Logic.Submit}" 
        IsEnabled="{x:Bind Logic.IsSubmitAllowed, Mode=OneWay}">Submit</Button>

8. Uruchamianie aplikacji

Jeśli teraz uruchomisz aplikację, zobaczysz, że przycisk Prześlij jest domyślnie wyłączony. Pozostaje on wyłączony, jeśli wpiszesz kilka spacji i zostanie włączony tylko wtedy, gdy wprowadzono co najmniej trzy znaki inne niż białe znaki.

Chociaż ten przykład przeprowadza weryfikację, platforma UWP ma bogaty zestaw funkcji weryfikacji, które zostaną pokazane w późniejszym module.

9. Ukryj przycisk Prześlij

Ty lub Projektant może zdecydować się na przejście o krok dalej, a w rzeczywistości ukryć przycisk Prześlij , dopóki nie będzie można go nacisnąć. Jest to łatwa zmiana, więc zróbmy to teraz. Wystarczy edytować kod XAML i zmienić go IsEnabled na Visibility.

Jeśli jednak wpiszesz kilka znaków, zobaczysz, że cały interfejs użytkownika skacze. Dzieje się tak, ponieważ otoczenie StackPanel jest wyśrodkowane w poziomie (HorizontalAlignment="Center"), a szerokość StackPanel obiektu jest mniejsza, gdy Button element jest zwinięty. Aby rozwiązać ten problem, możesz umieścić Button element w szerokości Border100 jednostek , w następujący sposób.

<Border Width="100">
    <Button Margin="10" 
            VerticalAlignment="Center" 
            Click="{x:Bind Logic.Submit}" 
            Visibility="{x:Bind Logic.IsSubmitAllowed, Mode=OneWay}">Submit</Button>
</Border>

Dzięki temu szerokość StackPanel obiektu nie zmienia się, gdy Button wewnątrz Border pojawi się ponownie.

Podsumowanie

W tej lekcji pokazano, jak można debugować powiązanie. Znasz UpdateSourceTrigger już opcję powiązania i przedstawiono dalsze przykłady powiązania danych. Przedstawiono również przykład sposobu, w jaki wygląd i zachowanie interfejsu użytkownika można zmienić bez dotykania kodu języka C#, jeśli używasz prawidłowego powiązania danych.

W następnej lekcji sprawdzimy, jak można użyć powiązania danych, aby wyświetlić wiele elementów na liście.

W poprzednich lekcjach utworzono prosty interfejs użytkownika formularza z monitem o wprowadzenie nazwy i wyświetlenie powitania za pomocą przycisku. W tej lekcji formularz jest nieco bardziej przyjazny dla użytkownika, wyłączając lub ukrywając przycisk Prześlij do momentu wprowadzenia co najmniej trzech znaków.

Najpierw sprawdźmy dokładnie, kiedy MainWindowDataContext.UserName wartość jest ustawiana za pomocą powiązania.

1. Umieść punkt przerwania

MainWindowDataContext.cs Otwórz plik i znajdź wiersz zawierający UserName właściwość .

public string UserName { get; set; }

Ustaw punkt przerwania na ustawieniu, przenosząc daszek wewnątrz set tekstu i naciskając klawisz F9. Można to również osiągnąć, klikając prawym przyciskiem myszy set, i wybierając pozycję Punkt przerwania / Wstaw punkt przerwania.

2. Uruchamianie aplikacji w trybie debugowania

Następnie uruchom aplikację w trybie debugowania (F5 lub Debuguj / Rozpocznij debugowanie). Wpisz coś w obiekcie TextBox i zwróć uwagę, że punkt przerwania nie zostanie trafiony. Naciśnięcie klawisza Tab powoduje przeniesienie fokusu danych wejściowych do następnej kontrolki (w naszym przypadku przycisku). Utrata fokusu na aktualizacjach TextBox powiązania, więc punkt przerwania zostanie trafiony.

3. Zmień powiązanie tak, aby było aktualizowane na każdym naciśnięciu klawiszy

Zatrzymaj debugowanie, naciskając klawisze Shift+F5 lub wybierając pozycję Debuguj/Zatrzymaj debugowanie.

Aby przekazać dokładną opinię na temat włączenia przycisku Prześlij , nie możemy poczekać na utratę fokusu na obiekcie TextBox. Na szczęście istnieje sposób zmiany zachowania powiązania. Możesz wymusić zaktualizowanie UserName właściwości (czyli źródła, ponieważ mówimy o TwoWay powiązaniu) za każdym razem, gdy właściwość text ulegnie zmianie. Musimy zmienić UpdateSourceTrigger powiązanie, które jest domyślnie ustawione na LostFocus wartość . UpdateSourceTrigger definiuje okoliczności, które powodują zaktualizowanie źródła.

Otwórz plik MainWindow.xamli znajdź plik TextBox. Następnie zmień powiązanie, dodając element UpdateSourceTrigger=PropertyChanged. Cały TextBox tag powinien teraz wyglądać następująco:

<TextBox Name="tbName" 
         Margin="10" 
         Width="150" 
         VerticalAlignment="Center" 
         Text="{Binding UserName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>

Jeśli teraz debugujesz aplikację, możesz zobaczyć, że punkt przerwania zostanie trafiony z każdym naciśnięciem klawiszy i zmianą tekstu. Świetnie!

Możesz pamiętać, że gdy użyto powiązania interfejsu użytkownika do interfejsu użytkownika w celu wyświetlenia powitania, każde naciśnięcie klawiszy wyzwoliło powiązanie. W takim przypadku powiązanie zostało zdefiniowane na TextBlockobiekcie , a zatem źródło było TextBox.Text właściwością, która zmienia się przy użyciu każdego naciśnięcia klawisza. UpdateSourceTrigger wpływa na przepływ danych w innym kierunku. Przepływa ze źródła powiązania do kontrolki, w której zdefiniowano powiązanie (element docelowy powiązania).

5. Dodaj IsSubmitAllowed właściwość

Następnie należy dodać właściwość logiczną wskazującą, czy przesyłanie formularza jest dozwolone. Otwórz MainWindowDataContext.cs i dodaj nową właściwość do MainWindowDataContext klasy.

public bool IsSubmitAllowed => !string.IsNullOrWhiteSpace(UserName);

Ta właściwość wykonuje prostą walidację. Jeśli wprowadzony tekst nie ma wartości null, pustych ani wyłącznie znaków odstępu, akceptujemy go jako nazwę użytkownika.

6. Przeszacuj IsSubmitAllowed ponownie po każdej zmianie na UserName

Musimy poinformować strukturę interfejsu użytkownika, kiedy należy ponownie sprawdzić tę właściwość i odzwierciedlić ją w interfejsie użytkownika. Najlepszym sposobem wyzwolenia tej ponownej UserName oceny jest wywołanie RaisePropertyChanged metody w ustawieniu właściwości . Aby można było dodać kod do zestawu, należy go przekonwertować na pełną właściwość. Zastąp UserName właściwość następującym kodem:

private string? _userName;
public string? UserName
{
    get { return _userName; }
    set
    {
        _userName = value;
        RaisePropertyChanged(nameof(IsSubmitAllowed));
    }
}

Nie używamy INotifyPropertyChanged tej właściwości, ponieważ nie mamy sytuacji, w której UserName właściwość została zmieniona z kodu. Jednak za każdym razem, gdy tekst zmienia się w TextBoxpliku , musimy poinformować interfejs użytkownika, że IsSubmitAllowed właściwość mogła ulec zmianie i powinna zostać ponownie zwalczona.

7. Powiąż IsSubmitAllowed właściwość z właściwością przycisku IsEnabled

Teraz skończysz z kodem. Wróć do MainWindow.xaml strony i znajdź przycisk Prześlij . IsEnabled Dodaj atrybut, aby kod XAML przycisku wyglądał następująco:

<Button Margin="10" 
        VerticalAlignment="Center" 
        Click="OnSubmitClicked"
        IsEnabled="{Binding IsSubmitAllowed}">Submit</Button>

8. Uruchamianie aplikacji

Jeśli teraz uruchomisz aplikację, zobaczysz, że przycisk Prześlij jest domyślnie wyłączony. Zostanie ona włączona, gdy tylko wpiszesz coś w nim.

Chociaż w tym przykładzie wykonasz podstawową walidację, WPF ma bogaty zestaw funkcji weryfikacji, które zostaną przedstawione w kolejnym module.

Podsumowanie

W tej lekcji pokazano, jak można debugować powiązania. Znasz UpdateSourceTrigger już opcję powiązania i przedstawiono dalsze przykłady powiązania danych. Pokazano również przykład tego, jak, jeśli używasz prawidłowego powiązania danych, wygląd i zachowanie interfejsu użytkownika można zmienić bez dotykania kodu języka C#.

W następnej lekcji sprawdzimy, jak można użyć powiązania danych, aby wyświetlić wiele elementów na liście.

Kontynuuj