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

Question

我想水平显示项目列表，并能够从该项目列表中进行选择-我尝试使用ListView并更改堆栈上某些帖子的项目模板，而我有：

<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} ，它不响应鼠标事件。

您将看到仅在单击图像或模板中存在的任何控件的情况下才选择该项目，但是当单击边框内的空白区域时，由于不响应鼠标事件（特别是MouseClick），因此selectionChange事件不会触发。 将背景设置为“透明”将使其对所有鼠标事件作出响应 。

有关更多详细信息，请参考此内容- {x：Null}与。 透明的 。