如何选择使用包装面板作为列表视图的项目面板

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

在 ControlTemplate 的最外层边框上将Background 设置为Transparent。

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

默认情况下它是{x:Null}，它不响应鼠标事件。

只有在您点击图片时，您才会看到该项目被选中 或模板中存在的任何控件，但是当您单击空白区域时 在边界内， selectionChange 事件不会触发，因为它是 对鼠标事件没有响应（在您的情况下特别是 MouseClick）。 将背景设置为透明会使其响应所有鼠标事件。

有关详细信息，请参阅此内容 - {x:Null} Vs. Transparent。