Предыдущий

Следующая

Создание интерактивного пользовательского интерфейса

Завершено

В предыдущих уроках вы создали простой пользовательский интерфейс формы, предлагая пользователю ввести имя и, нажав кнопку, отобразится приветствие. На этом занятии вы сделаете форму более удобной для пользователя, отключив или скрывая кнопку "Отправить ", пока не будет введено не менее трех символов.

Сначала давайте рассмотрим, когда именно значение MainPageLogic.UserName устанавливается через привязку.

1. Размещение точки останова

Откройте MainPageLogic.cs файл и найдите строку, содержащую UserName свойство.

public string UserName { get; set; }

Задайте точку останова в наборе, переместив курсор внутри set текста и нажав клавишу F9. Это также можно сделать, щелкнув setправой кнопкой мыши и выбрав точку останова или вставить точку останова.

2. Запуск приложения в режиме отладки

Затем запустите приложение в режиме отладки (F5 или Отладка/Начать отладку). Введите что-то в поле TextBox и обратите внимание, что точка останова не попала. При нажатии клавиши TAB фокус ввода перемещается к следующему элементу управления (в нашем случае кнопка). Потеря фокуса на обновлении TextBox привязки, поэтому точка останова достигается.

3. Измените привязку так, чтобы она обновляла все нажатия клавиш

Остановите отладку, нажав клавиши SHIFT+F5 или выбрав Отладка/Начать отладку.

Чтобы обеспечить точную обратную связь о нажатии кнопки Submit (Отправить), необходимо убрать фокус с элемента TextBox. К счастью, есть способ изменить поведение привязки. Вы можете заставить ее обновлять свойство UserName (которое является источником, так как мы говорим о привязке типа TwoWay) всякий раз, когда изменяется свойство Text. Нам нужно изменить свойство UpdateSourceTrigger привязки, для которого по умолчанию установлено значение LostFocus. UpdateSourceTrigger определяет обстоятельство, которое вызывает обновление источника.

Откройте файл MainPage.xaml и найдите элемент TextBox. Затем измените привязку, добавив UpdateSourceTrigger=PropertyChanged. Теперь весь TextBox тег должен выглядеть следующим образом:

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

Если отладить приложение сейчас, можно увидеть, что точка останова срабатывает при каждом нажатии клавиши и изменении текста. Отлично!

Вы можете вспомнить, что когда мы использовали привязку "интерфейс — интерфейс" для отображения приветствия, каждое нажатие клавиши запускало привязку. В этом случае привязка была определена в элементе TextBlock, поэтому источником было свойство TextBox.Text, которое меняется при каждом нажатии клавиши. UpdateSourceTrigger влияет на поток данных в другом направлении. Он передается из источника привязки в элемент управления, для которого определена привязка (целевой объект привязки).

5. Добавление IsSubmitAllowed свойства

Затем вы добавите логическое свойство, указывающее, разрешена ли отправка формы. Откройте файл MainPageLogic.cs и добавьте новое свойство в класс MainPageLogic.

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

Это очень простая проверка: если введенный текст с удаленными начальными и конечными пробелами содержит более двух символов, мы принимаем его как имя пользователя.

6. Повторное вычисление IsSubmitAllowed после каждого изменения UserName

Мы должны сообщить платформе пользовательского интерфейса, когда нужно повторно оценить это свойство и отразить его на пользовательском интерфейсе. Лучшим способом активации этой повторной UserName оценки является вызов RaisePropertyChanged в методе задания свойства. Чтобы добавить код в метод задания, его необходимо преобразовать в полное свойство. Замените UserName свойство следующим кодом:

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

Мы не используем INotifyPropertyChanged для этого свойства, так как у нас еще нет ситуации, когда UserName свойство изменяется из кода. Однако каждый раз, когда текст изменяется, TextBoxнеобходимо сообщить пользовательскому интерфейсу, что IsSubmitAllowed свойство могло измениться и должно быть переоценены.

7. Привязка IsSubmitAllowed свойства к свойству кнопки IsEnabled

Теперь код готов. Вернитесь к файлу MainPage.xaml и найдите кнопку Submit (Отправить). IsEnabled Добавьте атрибут, чтобы XAML кнопки выглядел следующим образом:

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

8. Запуск приложения

Если вы запустите приложение сейчас, вы увидите, что кнопка Submit (Отправить) по умолчанию отключена. Он остается отключенным, если вы вводите несколько пробелов, и включается только в том случае, если введено не менее трех символов, отличных от пробелов.

Хотя в этом примере выполняется некоторая проверка, UWP имеет широкий набор функций проверки, которые будут показаны в следующем модуле.

9. Скрыть кнопку "Отправить"

Вы или ваш разработчик можете дополнительно скрыть кнопку Отправить, пока она не будет нажата. Это простое изменение, так что давайте сделаем это сейчас. Просто отредактируйте XAML и укажите для свойства IsEnabled значение Visibility.

Однако если ввести несколько символов, можно увидеть, что весь пользовательский интерфейс смещается. Это происходит потому, что окружающий элемент управления StackPanel размещен по центру (HorizontalAlignment="Center"), а ширина StackPanel меньше, когда элемент Button свернут. Чтобы устранить эту проблему, можно поместить Button в ширину 100 единиц Border, как это.

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

При этом ширина StackPanel не изменяется, когда Button снова появляется внутри рамки (Border).

Итоги

На этом занятии вы видели, как можно отлаживать привязку. Вы узнали о параметре привязки UpdateSourceTrigger и увидели дополнительные примеры привязки данных. Вы также видели пример того, как внешний вид и поведение пользовательского интерфейса можно изменить без касания кода C#, если вы используете привязку данных правильно.

В следующем уроке мы рассмотрим, как вы можете использовать привязку данных для отображения нескольких элементов в списке.

В предыдущих уроках вы создали простой пользовательский интерфейс формы, предлагая пользователю ввести имя и, нажав кнопку, отобразится приветствие. На этом занятии вы сделаете форму более удобной для пользователя, отключив или скрывая кнопку "Отправить ", пока не будет введено не менее трех символов.

Сначала давайте рассмотрим, когда именно значение MainWindowDataContext.UserName устанавливается через привязку.

1. Размещение точки останова

MainWindowDataContext.cs Откройте файл и найдите строку, содержащую UserName свойство.

public string UserName { get; set; }

Установите точку останова в методе задания, переместив курсор в текст set и нажав клавишу F9. Это также можно сделать, щелкнув setправой кнопкой мыши и выбрав точку останова или вставить точку останова.

2. Запуск приложения в режиме отладки

Затем запустите приложение в режиме отладки (F5 или Отладка/Начать отладку). Введите что-то в поле TextBox и обратите внимание, что точка останова не получает попадания. При нажатии клавиши TAB фокус ввода перемещается к следующему элементу управления (в нашем случае кнопка). Потеря фокуса на обновлении TextBox привязки, поэтому точка останова достигается.

3. Измените привязку так, чтобы она обновляла все нажатия клавиш

Остановите отладку, нажав клавиши SHIFT+F5 или выбрав Отладка/Начать отладку.

Чтобы обеспечить точную обратную связь о нажатии кнопки Submit (Отправить), необходимо убрать фокус с элемента TextBox. К счастью, есть способ изменить поведение привязки. Вы можете заставить ее обновлять свойство UserName (которое является источником, так как мы говорим о привязке типа TwoWay) всякий раз, когда изменяется свойство Text. Нам нужно изменить свойство UpdateSourceTrigger привязки, для которого по умолчанию установлено значение LostFocus. UpdateSourceTrigger определяет обстоятельство, которое вызывает обновление источника.

Откройте MainWindow.xamlи найдите TextBox. Затем измените привязку, добавив UpdateSourceTrigger=PropertyChanged. Теперь весь TextBox тег должен выглядеть следующим образом:

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

Если отладить приложение сейчас, можно увидеть, что точка останова срабатывает при каждом нажатии клавиши и изменении текста. Отлично!

Вы можете вспомнить, что при использовании привязки пользовательского интерфейса к пользовательскому интерфейсу для отображения приветствия все нажатия клавиш активировали привязку. В этом случае привязка была определена в элементе TextBlock, поэтому источником было свойство TextBox.Text, которое меняется при каждом нажатии клавиши. UpdateSourceTrigger влияет на поток данных в другом направлении. Он передается из источника привязки в элемент управления, для которого определена привязка (целевой объект привязки).

5. Добавление IsSubmitAllowed свойства

Затем вы добавите логическое свойство, указывающее, разрешена ли отправка формы. Откройте MainWindowDataContext.cs и добавьте новое свойство в MainWindowDataContext класс.

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

Это свойство выполняет простую проверку. Если введенный текст не является пустым, пустым или единственным пробелом символов, мы принимаем его в качестве имени пользователя.

6. Повторное вычисление IsSubmitAllowed после каждого изменения UserName

Мы должны посоветовать платформу пользовательского интерфейса при повторном вычислении этого свойства и отразить его на пользовательском интерфейсе. Лучшим способом активации этой повторной UserName оценки является вызов RaisePropertyChanged в методе задания свойства. Чтобы добавить код в метод задания, его необходимо преобразовать в полное свойство. Замените UserName свойство следующим кодом:

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

Мы не используем INotifyPropertyChanged для этого свойства, так как у нас нет ситуации, когда UserName свойство изменяется из кода. Однако каждый раз, когда текст изменяется, TextBoxнеобходимо сообщить пользовательскому интерфейсу, что IsSubmitAllowed свойство могло измениться и должно быть переоценены.

7. Привязка IsSubmitAllowed свойства к свойству кнопки IsEnabled

Теперь код готов. Вернитесь к MainWindow.xaml кнопке "Отправить" и найдите кнопку "Отправить ". IsEnabled Добавьте атрибут, чтобы XAML кнопки выглядел следующим образом:

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

8. Запуск приложения

Если вы запустите приложение сейчас, вы увидите, что кнопка Submit (Отправить) по умолчанию отключена. Он включается, как только вы вводите в него что-то.

Хотя в этом примере выполняется некоторая базовая проверка, WPF имеет широкий набор функций проверки, которые будут показаны в следующем модуле.

Итоги

На этом занятии вы видели, как можно отлаживать привязки. Вы узнали о параметре привязки UpdateSourceTrigger и увидели дополнительные примеры привязки данных. Вы также видели пример того, как, если вы используете привязку данных правильно, внешний вид и поведение пользовательского интерфейса можно изменить без касания кода C#.

В следующем уроке мы рассмотрим, как вы можете использовать привязку данных для отображения нескольких элементов в списке.

Продолжить