Обработка GridItems Нажмите

Question

Начиная с шаблона страницы сгруппированных элементов, я хочу иметь возможность выполнять задачи по элементам сетки при их нажатии. А именно, я хочу изменить фоновое изображение и добавить/удалить базовый объект в список выбранных элементов.

Вот мой DataTemplate:

<GridView.ItemTemplate> 
     <DataTemplate> 
      <Border BorderBrush="LightGray" BorderThickness="2" Margin="0,0,20,20"> 
       <Grid HorizontalAlignment="Left" Width="390" Height="190"> 
        <Grid.Background> 
         <ImageBrush ImageSource="/Assets/unselected.png" Stretch="None"/> 
        </Grid.Background> 
        <StackPanel Orientation="Horizontal" VerticalAlignment="Top"> 
         <Image VerticalAlignment="Top" Stretch="None" Source="{Binding ImageUrl}" Margin="10,10,0,0"/> 
         <StackPanel MaxWidth="270"> 
          <TextBlock Text="{Binding Summary}"/> 
          <TextBlock Text="{Binding Brand}" /> 
          <TextBlock Text="{Binding Detail}" TextWrapping="Wrap" /> 
         </StackPanel> 
        </StackPanel> 
       </Grid> 
      </Border> 
     </DataTemplate> 
    </GridView.ItemTemplate> 

OnTap, я хочу Togle значение Grid.BackgroundImageSourceот unselected.png к selected.png. Это я считаю, что могу использовать VisualStates и Storyboards, но мне не удалось заставить это работать в прошлом (я пощажу вас хаос моих попыток в xaml).

Излишне говорить, что я попытался выполнить шаги, описанные в файле here, используя Blend, но свойство Grid.Background не похоже на состояние. Если я попробую изменить фоновый кисти в состояниях Pressed или Selected, это также изменится для нормального состояния.

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

спасибо!

Answer 1

Один чистый способ сделать это было бы задействовать метод выбора (TAP) таким образом, чтобы он opperates только на своих элементах, а элементы сами обладают свойствами, которые реализуют интерфейс INotifyPropertyChanged

Вашего вида модели будут есть коллекция пользовательских объектов, которые имеют свойства, которые могут извещать щ

public class MyObject : INotifyPropertyChanged 
{ 
    private string _summary; 
    public string summary 
    { 
      get {return _summary} 
      set 
      { 
       _summary = value; 
       OnPropertyChanged() 
      } 
    } 


    //Other Properties: brand || detail 

    private ImageSource _backgroundImage; 
    public ImageSource backgroundImage 
    { 
      get {return _backgroundImage} 
      set 
      { 
       _backgroundImage = value; 
       OnPropertyChanged() 
      } 
    } 

    private bool _IsSelected; 
    public bool IsSelected 
    { 
      get {return _IsSelected;} 
      set 
      { 
       _IsSelected = value; 
       OnPropertyChanged() 
      } 
    } 

} 

Тогда хотя код позади может быть использован для изменения значения IsSelected или фоновое изображение ... если вы решите пойти с IsSelected , вы все равно можете отделить свои проблемы, не устанавливая напрямую ресурс backgro и изображение в коде. Codebehind будет только перебирать элементы для переключения свойства IsSelected, и вы можете использовать xaml для определения изображения, которое фон должен использовать, создавая собственный конвертер.

public class MyCustomControlOrPage.cs : UserControl //Or ApplicationPage 
    { 

    //.......code 


     protected void HandleTap(object sender, GestureEventArgs e) 
     { 
      foreach(var item in ((Listbox)sender).ItemsSource) 
      { 
       ((MyObject)item.IsSelected = (MyObject)item.Name == (e.NewItems[0] as MyObject).Name? true: false; 
      } 
     } 
    } 

затем преобразователь

public class BackgroundConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
     ImageSource source = value == true ? new BitmapImage(uriForSelected) : new BitmapImage(uriForunselected); 
     return source; 
    } 

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
     BitmapImage thisValue = value as BitmapImage; 
     return thisValue; 
    } 
} 

и, наконец, XAML, где фоновая сетка связывается со свойством IsSelected и позволяет конвертер для преобразования BOOL к ImageSource типа BitmapImage:

//add xmlns:Converters=clr-namesapce:Yournamespace.UpTo.TheNamespaceBackgroundConverterIsIn" to the page or control definition 
<UserControl.Resources> 
<Converters:BackgroundConverter x:key="BgSourceConverter" /> 
</UserControl.Resources> 
<GridView.ItemTemplate> 
     <DataTemplate> 
      <Border BorderBrush="LightGray" BorderThickness="2" Margin="0,0,20,20"> 
       <Grid HorizontalAlignment="Left" Width="390" Height="190"> 
        <Grid.Background> 
         <ImageBrush ImageSource="{Binding Path=IsSelected, Mode=TwoWay, Converter={Binding Source={StaticResource BGSourceConverter}}}" Stretch="None"/> 
        </Grid.Background> 
        <StackPanel Orientation="Horizontal" VerticalAlignment="Top"> 
         <Image VerticalAlignment="Top" Stretch="None" Source="{Binding ImageUrl}" Margin="10,10,0,0"/> 
         <StackPanel MaxWidth="270"> 
          <TextBlock Text="{Binding Summary}"/> 
          <TextBlock Text="{Binding Brand}" /> 
          <TextBlock Text="{Binding Detail}" TextWrapping="Wrap" /> 
         </StackPanel> 
        </StackPanel> 
       </Grid> 
      </Border> 
     </DataTemplate> 
    </GridView.ItemTemplate>