禁用/启用按钮,具体取决于xaml中的文本框

时间:2018-08-08 06:57:46

标签: c# xaml uwp uwp-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不为空,则启用按钮。

4 个答案:

答案 0 :(得分:2)

您可以应用一个文本更改事件,该事件在每次更改时都会检查输入。

<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 中常见的做法。

网上有很多不错的教程。

答案 1 :(得分:0)

如何使用绑定+转换器? 我想这个概念也适用于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方法,根据返回值可以完全禁用或启用您的按钮。请参见互联网或here中的示例。

答案 2 :(得分:0)

为IsEnabled使用绑定。

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

您也可以使用数据触发器,但以上操作最简单。不需要转换器。

答案 3 :(得分:0)

我使用 Xamarin形式(XAML)的转换器来实现这一点,这对于您的情况应该是相同/相似的。通常是IsEnabledOpacity的组合,因为我想使禁用按钮更加透明。

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

第一个转换器将确定文本是否为空,当有文本时返回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>

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

button transparent and disabled

button enabled and opaque