Question

目前我正在研究Xamarin.Forms并想知道是否有可能在输入字段中添加show / hide选项？

Answer 1

我通过在多个输入字段上方使用展开/折叠图标解决了类似的问题。

XAML中的show / hide元素

添加固定大小（20x20）的可点击图像，参考PCL中的嵌入资源：

<Image Source="{Binding ShowHideIcon, Converter={StaticResource StringToResImageSourceConverter}}" WidthRequest="20" HeightRequest="20"">
    <Image.GestureRecognizers>
        <TapGestureRecognizer Command="{Binding ShowHideCommand}" />
    </Image.GestureRecognizers>
</Image>

ViewModel处理命令：

每次触摸图像时切换布尔值。

public bool EntryVisible { get; set; }

public Command ShowHideCommand{
    get {
        return new Command((object o) => {
            EntryVisible = !EntryVisible;
            if (EntryVisible) { 
                ShowHideIcon = "ic_collapse"; 
            } else { 
                ShowHideIcon = "ic_expand"; 
            }
        }
    }
}

XAML中的标签和条目

将Label和Entry的IsVisible属性绑定到ViewModel中的布尔值。

<Label Text="Quantity" IsVisible="{Binding EntryVisible}" />
<Entry Text="{Binding Quantity}" IsVisible="{Binding EntryVisible}" />

为了完整起见，我使用https://developer.xamarin.com/guides/xamarin-forms/working-with/images/#Embedded_Images将图像ic_expand.png和ic_collapse.png存储在PCL Resources文件夹中。

转换器需要转换字符串，例如＆＃34; ic_expand＆＃34;进入XAML可以使用的图像参考。

public class StringToResImageSourceConverter : IValueConverter {
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) {
        var resString = (string)value;
        if (!string.IsNullOrEmpty(resString)) {
            return ImageSource.FromResource("ProjectName.Resources." + resString + ".png");
        }
        return null;
    }

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

Answer 2

Entry entry = new Entry();

// Hide it
entry.IsVisible = false;

Xamarin表单显示/隐藏选项

2 个答案: