處理網格項目單擊

從分組項目頁面模板開始，我希望能夠在單擊網格項目時執行任務。也就是說，我想更改背景圖像，並將基礎對象添加/刪除到選定項目的列表中。處理網格項目單擊

這裏是我的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事件處理程序中一起處理所有這些嗎？我寧願將這些擔憂分開，但我會盡我所需...

謝謝！

來源

2014-01-30 earthling

一個乾淨的方式做這將是這樣搞的選擇方法（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>

來源

2014-01-31 03:28:41

處理網格項目單擊

回答

相關問題