UWP 应用 show/hide 使用绑定的按钮

Question

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

根据 ProjectModel 的一些布尔变量，我需要更改按钮的可见性。我试过这个 Binding a Button's visibility to a bool value in ViewModel 但它似乎不适用于 uwp。
对于某些项目，我需要在禁用该选项时显示不同颜色的图像。所以我需要根据 ProjectModel 的布尔变量更改 ImageBrush 的 ImageSource。为此，我尝试了这个 Change image using trigger 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 类型，所以这就是为什么您不能将它直接绑定到 ViewModel 中的 Boolean 属性。

您需要通过转换器来完成此操作。顾名思义，转换器是一个 class，可帮助您从一种类型转换为另一种类型，以便绑定正常工作。在您的情况下，您需要将 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 中声明您的转换器。在页面或用户控件中，您需要执行以下步骤：

声明转换器命名空间（使用与创建转换器时相同的命名空间 class
```
xmlns:converters="using:YourNamespace"
```
在您的页面/用户控件资源中实例化转换器

<Page.Resources> <converters:BooleanToVisibilityConverter x:Key="bool2vis"/> <converters:BooleanToVisibilityConverter x:Key="bool2visInverse" OnTrue=Collapsed, OnFalse=Visible/> </Page.Resources>
在您的绑定中使用您的转换器：

<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}}">

Answer 2

所以我认为您要做的是修改按钮的模板。

如果您查看 MSDN article on Button Styles and Tempaltes，您将看到默认的按钮样式。

在此默认样式中，您会看到这个

  <VisualState x:Name="Disabled">
     <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
                                       Storyboard.TargetProperty="Background">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                  <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                   Storyboard.TargetProperty="BorderBrush">
                  <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}" />
        </ObjectAnimationUsingKeyFrames>
     </Storyboard>
  </VisualState>

看到哪里写着禁用了吗？这里的所有内容都定义了按钮禁用时的外观。我会研究如何重新模板化一个按钮，然后弄乱这种风格。

从这里开始Xaml Custom Styles in UWP

Answer 3

要隐藏 ui 元素，只需执行以下操作：

this.MyComponent.Visibility = Visibility.Collapsed;

要使其可见，请执行以下操作：

this.MyComponent.Visibility = Visibility.Visible;

这几乎与传递 true、false 相同，而大多数阅读此标题的人实际上会寻找什么。

UWP 应用 show/hide 使用绑定的按钮

UWP app show/hide Button using binding

c#

xaml

button

uwp

uwp-xaml