处理网格项目单击

问题描述：

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

这里是我的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中，我想从unselected.png到selected.png TOGLE的Grid.Background的ImageSource值。我相信我可以使用VisualStates和Storyboards，但是我一直无法得到它在过去的工作（我会省去我在xaml中的混乱）。不用说，我已经尝试了使用Blend的详细步骤here，但是Grid.Background属性似乎并不是特定于状态的。如果我尝试更改按下或选定状态下的背景画笔，它也会更改为正常状态。

由于我想抓取选定项目的数据上下文，并将其从列表中添加/删除，我应该在OnTap事件处理程序中一起处理所有这些吗？我宁愿将这些担忧分开，但我会尽我所需...

谢谢！

答

一个干净的方式做这将是这样搞的选择方法（TAP），它仅opperates其项目，项目本身具有实现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 ，您仍然可以通过不直接设置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; 
    } 
}

最后其中网格背景结合IsSelected属性，并且允许转换器将布尔变换类型的BitmapImage的ImageSource的所述XAML：

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

处理网格项目单击

相关推荐