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

Question

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

1. 根据ProjectModel的一些布尔变量，我需要更改按钮的可见性。我试过这个Binding a Button's visibility to a bool value in ViewModel，但它似乎不适用于uwp。

2. 对于某些项目，当该选项被禁用时，我需要显示不同的彩色图像。所以我需要根据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型的，这就是为什么你不能在你的视图模型直接绑定到Boolean财产。

您需要通过转换器来做到这一点。作为sais的名字，Converter是一个类，可以帮助你从一种类型转换为另一种类型，以便绑定工作。在你的情况下，你需要将布尔值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中声明您的转换器。在页面或用户控件需要执行此步骤：

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

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