使用绑定的 UWP 应用显示/隐藏按钮

Question

我有一个列表视图，它显示项目名称和每个项目的一些按钮，这些按钮执行不同的操作，例如为该项目添加评论查看图像等。根据项目的不同，某些项目有时会禁用其中一些按钮。并且某些按钮在某些项目中将不可见。所以我想在这段代码中使用数据绑定来实现两件事。

1. 根据 ProjectModel 的一些布尔变量，我需要更改按钮的可见性。我尝试将按钮的可见性绑定到 ViewModel 中的 bool 值，但它似乎不适用于 uwp。

2. 对于某些项目，当禁用该选项时，我需要显示不同的彩色图像。所以我需要根据 ProjectModel 的布尔变量更改 ImageBrush 的 ImageSource。为此，我使用触发器 WPF MVVM尝试了此更改图像，但这些样式触发器不适用于 uwp。

请让我知道如何在 UWP 应用中轻松完成这些操作。这是我的第一个 UWP 应用程序，我对这些概念不熟悉。

<ListView x:Name="stepsListView" Margin="10,0,0,0" RequestedTheme="Dark" FontSize="24" Background="{StaticResource procedure_app_white}" Foreground="Black" BorderThickness="1.5" BorderBrush="Transparent" ItemsSource="{Binding projectList}"  HorizontalAlignment="Left">
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            </Style>
        </ListView.ItemContainerStyle>
        <!-- Item -->
        <ListView.ItemTemplate>
            <DataTemplate>
                <Border BorderThickness="0,0,0,1" BorderBrush="#c0c0c0">
                    <Grid Width="auto" HorizontalAlignment="Stretch" DataContextChanged="Grid_DataContextChanged" >
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="50"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="100"/>
                            <ColumnDefinition Width="100"/>
                            <ColumnDefinition Width="100"/>
                            <ColumnDefinition Width="100"/>
                            <ColumnDefinition Width="100"/>
                            <ColumnDefinition Width="100"/>
                        </Grid.ColumnDefinitions>
                        <TextBlock VerticalAlignment="Center" FontSize="30" Grid.Row="0" Grid.ColumnSpan="7" Text="{Binding projectName}" Foreground="{StaticResource procedure_app_orange_text }" />

                        <Button x:Name="warningButton" Width="40" Height="40" Grid.Column="1"  Grid.Row="1" Tag="{Binding projectId}" Click="warningButtonClick" Foreground="{StaticResource procedure_app_orange_text }">
                            <Button.Background>
                                <ImageBrush ImageSource="Asset/step_ncwr.png">
                                </ImageBrush>
                            </Button.Background>
                        </Button>
                        <Button x:Name="commentButton" Width="40" Height="40" Grid.Column="2"   Grid.Row="1"  Tag="{Binding projectId}" Click="CommentButtonClick" Foreground="{StaticResource procedure_app_orange_text }" IsTapEnabled="True">
                        <Button.Background>
                            <ImageBrush ImageSource="Asset/step_comment.png">
                            </ImageBrush>
                        </Button.Background>
                        </Button>
                        <Button x:Name="imageButton" Width="40" Height="40" Grid.Column="3"  Grid.Row="1"  Tag="{Binding projectId}" Click="ImageButtonClick" Foreground="{StaticResource procedure_app_orange_text }">
                            <Button.Background>
                                <ImageBrush ImageSource="Asset/step_image.png">
                                </ImageBrush>
                            </Button.Background>
                        </Button>
                    </Grid>
                </Border>
            </DataTemplate>
        </ListView.ItemTemplate>

Answer 1

该Visibility属性不是类型bool，因此您不能将其Boolean直接绑定到ViewModel 中的属性。

您需要通过转换器这样做。顾名思义，Converter 是一个类，可帮助您从一种类型转换为另一种类型，以便 Bindings 工作。在您的情况下，您需要将布尔值转换true为可见性值Visible。

UWP 中有一个内置转换器，但我将向您展示如何创建一个转换器，因为您将来可能需要编写其他转换器：

using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Data;

namespace YourNamespace
{
    public class BooleanToVisibilityConverter : IValueConverter
    {
        public Visibility OnTrue { get; set; }
        public Visibility OnFalse { get; set; }

        public BooleanToVisibilityConverter()
        {
            OnFalse = Visibility.Collapsed;
            OnTrue = Visibility.Visible;
        }

        public object Convert(object value, Type targetType, object parameter, string language)
        {
            var v = (bool)value;

            return v ? OnTrue : OnFalse;
        }

        public object ConvertBack(object value, Type targetType, object parameter, string language)
        {
            if (value is Visibility == false)
                return DependencyProperty.UnsetValue;

            if ((Visibility)value == OnTrue)
                return true;
            else
                return false;
        }
    }
}

该转换器允许您将布尔值转换为可见值，默认情况下会转换True到Visibility.Visible和False到Visibility.Collapsed的，但它是可配置的，你会看到如下。

接下来，您需要在 XAML 中声明您的转换器。在 Page 或 UserControl 中，您需要执行以下步骤：

1. 声明转换器命名空间（使用您在创建转换器类时使用的相同命名空间

   xmlns:converters="using:YourNamespace"

2. 在您的页面/用户控件资源中实例化转换器

   <Page.Resources> <converters:BooleanToVisibilityConverter x:Key="bool2vis"/> <converters:BooleanToVisibilityConverter x:Key="bool2visInverse" OnTrue=Collapsed, OnFalse=Visible/> </Page.Resources>

3. 在绑定中使用转换器：

   <Button x:Name="warningButton" Width="40" Height="40" Grid.Column="1" Grid.Row="1" Tag="{Binding projectId}" Click="warningButtonClick" Foreground="{StaticResource procedure_app_orange_text }" Visibility="{Binding IsVisible, Converter={StaticResource bool2vis}}">