在XAML中根据文本框禁用/启用按钮

Question

我有一个文本框。

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

有没有一种简单的解决方案来通过文本框启用/禁用按钮？

例如，如果文本框为空，则按钮被禁用。如果文本框不为空，则按钮被启用。

- axbeit

Answer 1

你可以应用文本更改事件，在每次输入更改时检查输入内容。

<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的实践。

在网络上有许多很好的教程。

- Faenrig

---

在WPF中，应该避免使用事件处理程序。 - Code Name Jack

除非问题说明使用了设计模式，如MVVM，否则我无法遵守。否则，我会同意你的看法，因为我自己也不太喜欢代码后台。问题要求一个简单的方法，我认为我的方法相当简单。 - Faenrig

当你编写WPF时，MVVM应该是默认的思路，特别是样式和UI相关的内容应该在XAML中处理，只要可持续。你的答案完全正确，只是鼓励新程序员养成正确的行为习惯。 - Code Name Jack

这对我来说是一个模糊的话题。程序员应该始终尝试保持简单，并自己尝试一些东西。因此，如果某些东西很丑陋，但它能够正常工作，那么对于程序员的解决方案来说就没问题了。这至少是学习程序如何工作的非常好的方法。不过，我可以编辑我的答案，按照您的要求鼓励新开发人员学习WPF的广泛接受的设计模式。 - Faenrig

Answer 2

使用绑定+转换器怎么样？ 我想这个概念在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();
    }
}

另一种方法是使用命令模式来处理按钮。 ICommand 接口具有 CanExecute 方法，该方法将根据返回值实际禁用或启用您的按钮。 在互联网上查看示例或此处。

- Andrew K

Answer 3

使用绑定来控制 IsEnabled 属性。

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

你也可以使用数据触发器，但上述方法最简单。不需要使用转换器。

- Code Name Jack

Answer 4

我在（XAML）中使用转换器来实现这一点，对于您的情况应该是相同/类似的。通常会结合IsEnabled和Opacity，因为我喜欢使禁用的按钮更透明。

例如，您可以创建两个转换器来解释字符串（输入字段中的文本）。

第一个转换器将确定文本是否为空，并在有文本时返回true。

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>

观察当在输入框中输入文本时，按钮将自动变为可用并不透明，而当文本被删除时则会被禁用并变为透明。

- diegosasw