UWP app表示/非表示バインドを使用するボタン

Question

私は、プロジェクト名と、そのプロジェクトの画像を表示するコメントを追加するような、別のアクションを実行する各プロジェクトのボタンを表示するリストビューを持っています。時にはこれらのボタンのいくつかを無効にする。一部のプロジェクトでは一部のボタンが表示されません。したがって、このコードでデータバインディングを使用して達成したい2つのことがあります。

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プロパティは、あなたが直接あなたのViewModelでBooleanプロパティにバインドすることはできませんなぜそれがですタイプboolではありません。

コンバータを使用する必要があります。名前saisのように、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でコンバーターを宣言する必要があります。ページまたはUserControlでは、あなたがこの手順を実行する必要があります。

1. は（コンバータ名前空間を宣言コンバータクラス

   xmlns:converters="using:YourNamespace"

2. インスタンス化あなたのページでは、コンバータを作成するときに使用したのと同じ名前空間を使用します/ UserControlのリソース

   <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