如何用wrappanel處理選擇事件

Question

我目前在C＃WPF項目，我在顯示幾行圖像（藍色頭）

的問題是，我不能選擇任何這些項目，我使用的MVVM模式，所以後面的代碼必須儘可能輕，我必須做的事情，我可以在XAML文件。

所以我希望能夠通過點擊選擇圖像，我試圖使用像「IsMouseOver」這樣的事件，但我只能夠改變整個wrappanel而不是單個項目。

這裏是我使用的代碼：

<Grid Grid.Row="1" Height="Auto"> 
     <Grid.Background> 
      <LinearGradientBrush> 
       <LinearGradientBrush.GradientStops> 
        <GradientStop Color="#252525" /> 
       </LinearGradientBrush.GradientStops> 
      </LinearGradientBrush> 
     </Grid.Background> 
     <ItemsControl Background="Transparent" Foreground="AntiqueWhite" BorderBrush="Transparent" 
       HorizontalContentAlignment="Stretch" ItemsSource="{Binding Source={x:Static Context:Session.CurrentSession}, Path=CurrentProject.Models}"> 
      <ItemsControl.ContextMenu> 
       <ContextMenu> 
        <MenuItem Header="Delete" Command="{Binding DeleteModel3DCommand}" CommandParameter="{Binding RelativeSource={RelativeSource AncestorType=ContextMenu}, Path=PlacementTarget.SelectedItem}"/> 
       </ContextMenu>      
      </ItemsControl.ContextMenu> 
      <i:Interaction.Triggers> 
       <i:EventTrigger EventName="SelectionChanged"> 
        <i:InvokeCommandAction Command="{Binding SelectModel3DCommand}" CommandParameter="{Binding Path=SelectedItem, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ListBox}}"/> 
       </i:EventTrigger> 
      </i:Interaction.Triggers> 
      <ItemsControl.ItemTemplate> 
       <DataTemplate> 
        <Image Source="/McKineap;component/Resources/Images/logo-mckineap.png" Height="100"/> 
       </DataTemplate> 
      </ItemsControl.ItemTemplate> 
      <ItemsControl.ItemsPanel> 
       <ItemsPanelTemplate> 
        <WrapPanel/> 
       </ItemsPanelTemplate> 
      </ItemsControl.ItemsPanel> 
     </ItemsControl> 
    </Grid> 

我將帶您可能有關於適當的方式在我wrappanel定義選擇事件的任何建議，感謝您的時間！

Answer 1

我嘗試做同樣的方式，但與ListBox而不是ListView，它適用於我。

<Grid Grid.Row="1" Height="Auto"> 
     <Grid.Background> 
      <LinearGradientBrush> 
       <LinearGradientBrush.GradientStops> 
        <GradientStop Color="#252525" /> 
       </LinearGradientBrush.GradientStops> 
      </LinearGradientBrush> 
     </Grid.Background> 
     <ListBox Name="ModelsListBox" Background="Transparent" Foreground="AntiqueWhite" BorderBrush="Transparent" ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
       HorizontalContentAlignment="Stretch" ItemsSource="{Binding Source={x:Static Context:Session.CurrentSession}, Path=CurrentProject.Models}"> 
      <ListBox.ContextMenu> 
       <ContextMenu> 
        <MenuItem Header="Delete" Command="{Binding DeleteModel3DCommand}" CommandParameter="{Binding RelativeSource={RelativeSource AncestorType=ContextMenu}, Path=PlacementTarget.SelectedItem}"/> 
        <MenuItem Header="Rename"/> 
       </ContextMenu> 
      </ListBox.ContextMenu> 
      <i:Interaction.Triggers> 
       <i:EventTrigger EventName="SelectionChanged"> 
        <i:InvokeCommandAction Command="{Binding SelectModel3DCommand}" CommandParameter="{Binding Path=SelectedItem, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ListBox}}"/> 
       </i:EventTrigger> 
      </i:Interaction.Triggers> 

      <ListBox.ItemTemplate> 
       <DataTemplate> 
        <Grid Margin="0,0,5,0" HorizontalAlignment="Left"> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="Auto" /> 
          <ColumnDefinition Width="Auto" /> 
         </Grid.ColumnDefinitions> 
         <Image Source="/McKineap;component/Resources/Images/logo-mckineap.png" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Bottom" Height="55" Width="50"/> 
         <ListBoxItem Grid.Column="1" Content="{Binding NameWithoutExtension}" HorizontalAlignment="Stretch" /> 
        </Grid> 
       </DataTemplate> 
      </ListBox.ItemTemplate> 
      <ListBox.ItemsPanel> 
       <ItemsPanelTemplate> 
        <WrapPanel/> 
       </ItemsPanelTemplate> 
      </ListBox.ItemsPanel> 
     </ListBox> 
    </Grid> 

Answer 2

ItemsControl項目並不意味着可以進行選擇，這就是爲什麼選擇事件和選擇功能缺失，更具體ItemsControl不從Selector類允許，在另一方面ListBox和做繼承。

更改ItemsControl到ListView，你應該能夠實現的選擇：

<ListView SelectionMode="Single" Background="Transparent" Foreground="AntiqueWhite" BorderBrush="Transparent" 
      HorizontalContentAlignment="Stretch" ItemsSource="{Binding Items}"> 

編輯 不要忘記禁用Horizo​​ntalScrollBar在ListView有序的WrapPanel工作

<Grid Grid.Row="1" Height="Auto"> 
    <Grid.Background> 
     <LinearGradientBrush> 
      <LinearGradientBrush.GradientStops> 
       <GradientStop Color="#252525" /> 
      </LinearGradientBrush.GradientStops> 
     </LinearGradientBrush> 
    </Grid.Background> 
    <ListView SelectionMode="Single" ScrollViewer.HorizontalScrollBarVisibility="Disabled" Background="Transparent" Foreground="AntiqueWhite" BorderBrush="Transparent" 
      HorizontalContentAlignment="Stretch" ItemsSource="{Binding Items}"> 
     <ListView.ContextMenu> 
      <ContextMenu> 
       <MenuItem Header="Delete" Command="{Binding DeleteModel3DCommand}" CommandParameter="{Binding RelativeSource={RelativeSource AncestorType=ContextMenu}, Path=PlacementTarget.SelectedItem}"/> 
      </ContextMenu> 
     </ListView.ContextMenu> 
     <i:Interaction.Triggers> 
      <i:EventTrigger EventName="SelectionChanged"> 
       <i:InvokeCommandAction Command="{Binding SelectModel3DCommand}" CommandParameter="{Binding Path=SelectedItem, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ListBox}}"/> 
      </i:EventTrigger> 
     </i:Interaction.Triggers> 
     <ListView.ItemTemplate> 
      <DataTemplate> 
       <Image Source="refresh.png" Height="100"/> 
      </DataTemplate> 
     </ListView.ItemTemplate> 
     <ListView.ItemsPanel> 
      <ItemsPanelTemplate> 
       <WrapPanel/> 
      </ItemsPanelTemplate> 
     </ListView.ItemsPanel> 
    </ListView> 
</Grid>