disable/enable 按钮取决于 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>

对于 enable/disable 按钮通过 TextBox 是否有简单的解决方案？

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

Answer 1

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

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

如果文字是您需要的方式，您可以转动按钮enabled/disabled。

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

编辑：除了类似这种方法的代码隐藏之外，您还可以了解 MVVM 设计模式。其他答案部分使用了 MVVM.

中常见的做法

网络上有各种很好的教程。

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 方法，可以根据 return 值禁用或启用您的按钮。请参阅互联网或 here.

中的示例

Answer 3

为 IsEnabled 使用绑定。

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

您也可以使用数据触发器，但上面的是最简单的。不需要转换器。

Answer 4

我在 Xamarin Forms (XAML) 中使用转换器来实现这一点，这应该是您的方案的 same/similar。通常是 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>

看看按钮如何在条目中输入文本后立即自动启用并变为不透明，以及如何在删除文本后自动禁用并变为透明。

disable/enable 按钮取决于 xaml 中的文本框

disable/enable a button depending on textbox in xaml

c#

xaml

uwp

uwp-xaml