Кнопки UWP внутри элементов списка ListView

Question

Я работаю над своим первым приложением UWP, и хочу создать UI, как этот . Для каждого элемента списка (проекта) будет набор кнопок. Для некоторых элементов списка (проектов) некоторые из этих кнопок будут отключены несколько раз. Поэтому мне нужно отключить и изменить изображение для такой кнопки в этих элементах списка (проектах).

Я попытался реализовать его, используя вид списка, подобный этому. Но я не уверен, как я могу включить/отключить некоторые из этих кнопок в зависимости от условия.

Попытался добавить событие DataContextChanged и попытаться получить доступ к кнопкам. Но не знаю, как я могу получить доступ к этим кнопкам.

Пожалуйста, дайте мне знать, подходит ли следующий подход или есть лучший способ сделать то, что я пытаюсь достичь в приведенном выше изображении.

<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

Ответ в переменной зависит от того, что структура вы прошли с таким образом я собираюсь сделать некоторые предположения и катиться с ним.

Сначала я буду считать ваш ViewModel имеет ObservableCollection называется ProjectList и что это ProjectList состоит из ProjectModel «s

ProjectModel.cs

public class ProjectModel : INotifyPropertyChanged{ 
     private bool _isNcwrEnabled; 
     public bool IsNcwrEnabled{ 
      get{ return _isNcwrEnabled; } 
      set{ _isNcwrEnabled = value; OnPropertyChanged("IsNcwrEnabled"); } 
     } 
     private bool _isCommentEnabled; 
     public bool IsCommentEnabled{ 
      get{ return _isCommentEnabled; } 
      set{ _isCommentEnabled= value; OnPropertyChanged("IsCommentEnabled"); } 
     } 
     private bool _isImageEnabled; 
     public bool IsImageEnabled{ 
      get{ return _isImageEnabled; } 
      set{ _isImageEnabled= value; OnPropertyChanged("IsImageEnabled"); } 
     } 

    public void OnPropertyChanged(String prop) 
    { 
     PropertyChangedEventHandler handler = PropertyChanged; 

     if (handler != null) 
     { 
      PropertyChanged(this, new PropertyChangedEventArgs(prop)); 
     } 
    } 

    public event PropertyChangedEventHandler PropertyChanged; 
} 

В вашей ViewModel вы должны иметь

ObservableCollection<ProjectModel> ProjectList {get; private set; } 

И наконец, в вашем View

<Button IsEnabled="{Binding IsNcwrEnabled}" 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"/> 
     </Button.Background> 
    </Button> 
    <Button IsEnabled="{Binding IsCommentEnabled}" 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"/> 
     </Button.Background> 
    </Button> 
    <Button IsEnabled="{Binding IsImageEnabled}" 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"/> 
     </Button.Background> 
    </Button> 

Сводка изменений

1. моделей в коллекции, что ваш ListView связан с потребностями, чтобы содержать включены свойства для Buttons связываться с
2. В вашем View, связать ваш Buttons Ваши новые объявления