Как выбрать панель обертывания в качестве панели элементов для списка

Question

Я хочу показать список элементов по горизонтали и иметь возможность выбирать из этого списка элементов. Я попытался использовать список и изменить шаблон элемента на некоторые сообщения в стеке и у меня есть это:

<ListView Height="Auto" HorizontalAlignment="Left" Margin="24,0,0,0" Name="MachinesListView" VerticalAlignment="Top" Width="1455" Background="#FFF0F0F0" ItemsSource="{Binding Machines}" BorderBrush="#FFF0F0F0" Grid.ColumnSpan="2" Grid.Row="2" SelectionChanged="MachinesListView_SelectionChanged"> 
       <ListView.ItemsPanel> 
        <ItemsPanelTemplate> 
         <WrapPanel Width="{Binding (FrameworkElement.ActualWidth), 
        RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}" 
        ItemWidth="{Binding (ListView.View).ItemWidth, 
        RelativeSource={RelativeSource AncestorType=ListView}}" 
        MinWidth="{Binding ItemWidth, RelativeSource={RelativeSource Self}}" 
        ItemHeight="{Binding (ListView.View).ItemHeight, 
        RelativeSource={RelativeSource AncestorType=ListView}}" /> 
        </ItemsPanelTemplate> 
       </ListView.ItemsPanel> 
       <ListView.ItemContainerStyle> 
        <Style TargetType="{x:Type ListViewItem}"> 
         <Setter Property="Height" Value="175"/> 
         <Setter Property="Width" Value="275"/> 
         <Setter Property="Margin" Value="5,5,0,0"/> 
         <Setter Property="Template"> 
          <Setter.Value> 
           <ControlTemplate> 
            <Border BorderBrush="Gray" BorderThickness="2" CornerRadius="10"> 
             <StackPanel Orientation="Vertical"> 
              <TextBlock Text="{Binding Machine.MachineId}" TextAlignment="Center" Width="Auto" Foreground="#FF639A70" FontSize="19"/> 
              <TextBlock Text="{Binding Machine.Name}" TextAlignment="Center" Width="Auto" Foreground="Gray" FontSize="15" /> 
              <Image Source="/URM;component/Images/slot_machine-512.png" Height="60" Width="60" /> 
              <TextBlock Text="{Binding Machine.Description}" TextAlignment="Center" Width="Auto" Foreground="Gray" FontSize="15" Margin="0, 5, 0, 0"/> 
              <TextBlock TextAlignment="Center" Width="Auto" Foreground="Gray" FontSize="15" Margin="0, 5, 0, 0"> 
               <Run Text ="Actual: "/> 
               <Run Text ="{Binding Actual, StringFormat=' {0:c}'}"/> 
              </TextBlock> 
              <TextBlock TextAlignment="Center" Width="Auto" Foreground="Gray" FontSize="15" Margin="0, 5, 0, 0"> 
               <Run Text ="OverShort: "/> 
               <Run Text ="{Binding OverShort, StringFormat=' {0:c}'}"/> 
              </TextBlock> 
             </StackPanel> 
            </Border> 
           </ControlTemplate> 
          </Setter.Value> 
         </Setter> 
        </Style> 
       </ListView.ItemContainerStyle> 
      </ListView> 

Это хорошо работает ... Я получаю общий вид и чувствовать, что я хочу от этого, но только выбора первого элемента вызывает SelectionChanged события огня ...

Я думал о том, чтобы реализовать элементы как кнопки вместо этого, но я думал, что может быть более правильный способ справиться с этим.

Answer 1

Комплект Background до Transparent на внешней самой границе контрольной панели.

<Border BorderBrush="Gray" Background="Transparent" 
     BorderThickness="2" CornerRadius="10"> 

По умолчанию это {x:Null}, который не реагирует на события мыши.

Вы увидите, что элемент получает выбран только в случае, если нажать на картинку или любой контроль, присутствующий в шаблоне, но при нажатии на пустом месте в границах, SelectionChange событие не срабатывает, поскольку она не отвечает на события мыши (в частности, MouseClick в вашем случае). Настройка фона на Прозрачный сделает его отзывчивым ко всем событиям мыши.

См. Это для получения более подробной информации - {x:Null} Vs. Transparent.