how to select using a wrap panel as the item panel for listview

Question

I want to show a list of items horizontally and be able to select from this list of items - I have tried using a listview and changing the item template per some posts on stack and I have this:

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

This works well...I get the overall look and feel that I want from this but only selecting the first item causes the selectionchanged event to fire...

I thought about implementing the items as buttons instead but I thought there might be a more proper way of dealing with this.

Answer 1

Set Background to Transparent on outer most border of ControlTemplate.

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

By default it's {x:Null} which is not responsive to mouse events.

You will see that item gets selected only in case you click over image or any control present in template but when you click on empty area within border, selectionChange event doesn't fire since it is unresponsive to mouse events (specifically MouseClick in your case). Setting background to Transparent will make it responsive to all mouse events.

Refer to this for more details - {x:Null} Vs. Transparent.