Отключить / включить кнопку в зависимости от текстового поля в xaml

У меня есть текстовое поле

<TextBox x:Name = "searchTextBox" Width = "200" Height = "30" HorizontalAlignment = "Left"/>

и две кнопки

<Button x:Name = "previous" Style = "{StaticResource AppBarButtonStyle}" Tapped = "OnOptionItemTapped" IsEnabled = "False">
    <Image Source = "/Assets/images/left_arrow.png"/>
</Button>
    <Button x:Name = "next" Style = "{StaticResource AppBarButtonStyle}"  Tapped = "OnOptionItemTapped" IsEnabled = "False">
    <Image Source = "/Assets/images/right_arrow.png"/>
</Button>

Есть ли простое решение для включения / отключения кнопок через TextBox?

Например, если TextBox пуст, кнопки отключены. И если TextBox не пуст, кнопки включены.

Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
0
2 869
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Ответ принят как подходящий

Вы можете применить событие изменения текста, которое проверяет ввод каждый раз, когда он изменяется.

<TextBox x:Name = "searchTextBox" Width = "200" Height = "30" HorizontalAlignment = "Left" TextChanged = "TextBox_TextChanged" />

Если текст такой, какой вам нужен, вы можете включить / выключить кнопку.

public void TextBox_TextChanged(object sender, TextChangedEventArgs e)
{
    if (searchTextBox.Text == result)
        next.IsEnabled = false;
}

Обновлено: Помимо кода, стоящего за этим подходом, вы можете узнать о шаблоне проектирования MVVM. В других ответах частично использовались практики, распространенные в MVVM.

В Интернете есть множество хороших руководств по этому поводу.

В WPF не рекомендуется использовать обработчики событий.

Code Name Jack 08.08.2018 13:20

Я не могу согласиться с этим, если только в вопросе не указано, что использовался шаблон проектирования, такой как MVVM. В противном случае я бы согласился с вами, поскольку я сам не очень люблю код. Был задан простой подход, и я считаю, что мой был довольно простым.

Faenrig 08.08.2018 13:46

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

Code Name Jack 08.08.2018 14:17

Для меня это неоднозначная тема. Программист всегда должен стараться быть простым и пробовать что-то сам. Так что если что-то некрасиво, но работает, то для решения программиста это нормально. По крайней мере, это очень хороший способ узнать, как работает программа. Я могу отредактировать свой ответ, чтобы сделать, как вы говорите, побудить новых разработчиков изучить широко распространенный шаблон проектирования для WPF.

Faenrig 08.08.2018 14:53

Как насчет использования привязки + конвертера? Думаю, эта концепция применима и для UWP.

Например. у вас есть модель представления со свойством SearchText, которое привязано к тексту в TextBox. Тогда вы можете сделать следующее:

<Window.Resources>
    <local:StringToBoolConverter x:Key = "StringToBoolConverter" />
</Window.Resources>

...

<TextBox x:Name = "searchTextBox" Width = "200" Height = "30" HorizontalAlignment = "Left" Text = "{Binding SearchText}"/>
<Button x:Name = "previous" IsEnabled = "{Binding SearchText, Converter = {StaticResource StringToBoolConverter}}"/>

А код конвертера был бы довольно простым:

public class StringToBoolConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return !string.IsNullOrEmpty(value?.ToString());
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Другой способ - использовать шаблон Command для кнопок. Интерфейс ICommand имеет метод CanExecute, который может отключать или включать ваши кнопки в зависимости от возвращаемого значения. Смотрите примеры в интернете или здесь.

Используйте привязку для IsEnabled.

<Button x:Name = "previous" Style = "{StaticResource AppBarButtonStyle}" 
 Tapped = "OnOptionItemTapped" IsEnabled = "{Binding ElementName=searchTextBox, 
Path=Text.Length, Mode=OneWay}"></Button>

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

Для этого я использую конвертеры в Формы Xamarin (XAML), которые должны быть такими же / похожими для вашего сценария. Обычно это комбинация IsEnabled и Opacity, потому что мне нравится делать отключенную кнопку более прозрачной.

Например, вы можете создать два конвертера, которые будут интерпретировать строку (текст в поле ввода).

Первый преобразователь определит, пуст текст или нет, и вернет истину, если текст есть.

public class StringToBoolConverter
    : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return !string.IsNullOrEmpty(value?.ToString());
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Второй конвертер будет определять уровень непрозрачности, возвращая 100% (например: 1.0), если есть текст, и 0.3, когда поле пусто.

public class StringToFloatConverter
    : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return !string.IsNullOrEmpty(value?.ToString())? 1.0 : 0.3;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Теперь я помечаю оба конвертера более значимым именем в App.xaml следующим образом:

<?xml version = "1.0" encoding = "utf-8" ?>
<Application xmlns = "http://xamarin.com/schemas/2014/forms"
             xmlns:x = "http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d = "http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:converters = "clr-namespace:Sasw.EasyQr.Converters;assembly=Sasw.EasyQr"
             mc:Ignorable = "d"
             x:Class = "Sasw.EasyQr.App">
    <Application.Resources>
        <ResourceDictionary>
            <converters:StringToBoolConverter x:Key = "EnabledWhenFilledConverter"></converters:StringToBoolConverter>
            <converters:StringToFloatConverter x:Key = "OpaqueWhenFilledConverter"></converters:StringToFloatConverter>
        </ResourceDictionary>
    </Application.Resources>
</Application>

и теперь я могу обращаться к этим конвертерам с любого кнопочного элемента управления, например:

<Entry
    Text = "{Binding Text}"
    Placeholder = "{x:Static resources:AppResources.PlaceholderEnterText}"
    HorizontalOptions = "FillAndExpand"
    VerticalTextAlignment = "Center"
    VerticalOptions = "End"></Entry>
<ImageButton 
    Command = "{Binding TapClear}"
    IsEnabled = "{Binding Text, Converter = {StaticResource EnabledWhenFilledConverter}}"
    Source  = "backspace.png" 
    WidthRequest = "30"
    Opacity = "{Binding Text, Converter = {StaticResource OpaqueWhenFilledConverter}}"
    BackgroundColor = "Transparent"
    HorizontalOptions = "End"
    VerticalOptions = "CenterAndExpand"></ImageButton>

и посмотрите, как кнопка автоматически активируется и становится непрозрачной, как только текст вводится в Entry, и отключается и становится прозрачной при удалении текста.

button transparent and disabled

button enabled and opaque

Другие вопросы по теме