Как обрабатывать события выбора с WrapPanel

Question

Я в настоящее время в проекте C# WPF и я отображать изображения в несколько рядов (синие головы)

Проблема заключается в том, что я не могу выбрать любой из этих элементов, я использую шаблон MVVM, поэтому код должен быть как можно более легким, и я должен делать все, что могу, в файле xaml.

Поэтому я хотел был бы иметь возможность выбрать изображения, щелкнув на них, я попытался использовать событие, подобное «IsMouseOver», но я смог изменить всю оболочку, а не отдельные элементы.

Вот код, я использую:

<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 и ListView делать.

Изменение ItemsControl к ListView, и вы должны быть в состоянии осуществить выбор:

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

Редактировать не забудьте отключить HorizontalScrollBar в 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>