xaml - Xamarin Forms 显示/隐藏条目选项

Question

目前我正在研究 Xamarin.Forms，想知道是否有可能向输入字段添加显示/隐藏选项？

Answer 1

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

XAML 中的显示/隐藏元素

添加固定大小 (20x20) 的可点击图像，引用 PCL 中的嵌入资源:

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

ViewModel 处理命令:

每次触摸图像时切换 bool 值。

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 属性绑定(bind)到 ViewModel 中的 bool 值。

<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在 PCL Resources 文件夹中存储图像 ic_expand.png 和 ic_collapse.png。

需要转换器来转换字符串，例如“ic_expand”为 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();
    }
}