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