Wpf 处理网格项目单击

从分组项目页面模板开始，我希望能够在单击网格项目时对其执行任务。也就是说，我希望更改背景图像，并将基础对象添加/删除到所选项目的列表中

这是我的数据模板：

    <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，我想将

Grid.Background

的

ImageSource

值从unselected.png切换到selected.png。我相信我可以使用VisualState和故事板来实现这一点，但我在过去一直无法实现这一点（我将为您省去我在xaml中尝试的混乱）

不用说，我已经尝试过使用Blend执行详细的步骤，但是Grid.Background属性似乎不是特定于状态的。如果我尝试在按下或选定状态下更改背景笔刷，它也会更改为正常状态

由于我想获取所选项目的数据上下文并将其从列表中添加/删除，我是否应该在

OnTap

事件处理程序中一起处理所有这些？我更愿意把这些问题分开，但我会做我需要做的

---

谢谢

一种干净的方法是使用选择方法（Tap），使其仅对其项进行操作，并且项本身具有实现INotifyPropertyChanged接口的属性

视图模型将有一个自定义对象的集合，这些对象具有可以通知ui的属性

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，您仍然可以通过不直接在代码隐藏中设置背景图像的资源来分离您的关注点。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转换为BitmapImage类型的ImageSource：

//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>

//将xmlns:Converters=clr namesapce:Yournamespace.UpTo.TheNamespaceBackgroundConverterIsIn”添加到页面或控件定义中