处理 GridItems 点击

Question

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

这是我的数据模板：

    <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。我相信我可以使用 VisualStates 和 Storyboards 来做到这一点，但我过去一直无法让它工作（我会让你避免我在 xaml 中尝试的混乱）。

不用说，我已尝试使用 Blend 遵循详细的步骤 here，但 Grid.Background 属性似乎不是特定于状态的。如果我尝试在 Pressed 或 Selected 状态下更改背景画笔，它也会更改为 Normal 状态。

由于我想获取所选项目的数据上下文并从列表中添加/删除它，我是否应该在 OnTap 事件处理程序中一起处理所有这些？我希望将这些问题分开，但我会做我需要做的......

谢谢！

Answer 1

一种干净的方法是使用选择方法（Tap），使其仅对其项目进行操作，并且项目本身具有实现 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，你仍然可以通过不在代码中直接设置背景图片的资源来分离你的关注点在后面。 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>