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.

What's the problem? You can't select any items from the List? It only selects the first available item? — 123 456 789 0, Jan 27 '14 at 19:09
I am only able to select the first item. Or I should say the selectionchanged event only fires when you select the first item. — jharr100, Jan 27 '14 at 19:09

score 0 · Accepted Answer · edited May 23 '17 at 11:44

0

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.

edited May 23 '17 at 11:44

Community

1
1

answered Jan 27 '14 at 19:30

Rohit Vats

79,502
12
161
185

ah - this is something to add - when using the SelectionChanged event that the selected item of the ListView never changes - however the SelectionChangedEventArgs has the data selected items datacontext in its AddedItem array. – jharr100 Jan 27 '14 at 19:40

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

1 Answers1