如何隐藏 UniformGrid 的悬停和单击事件？答案

【问题标题】：How to hide hover and click event of UniformGrid?如何隐藏 UniformGrid 的悬停和单击事件？
【发布时间】：2022-01-07 01:05:31
【问题描述】：

我尝试使用ListBox 和UniformGrid 创建一个包含两列的按钮列表。在我遇到以下问题之前，一切似乎都很好。当我单击它或将鼠标悬停在它上面时，按钮的边距空间显示为浅蓝色。如何消除这种影响？

这是我的代码：

<ListBox Width="1000" Grid.Row="1" VerticalAlignment="Top" VerticalContentAlignment="Top" Name="uniformGrid1" Margin="50" ItemsSource="{Binding SomeItemsList}">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="2" Background="Transparent"   Name="uniformGrid1"></UniformGrid>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Button Margin="50" Height="70" Click="keyword_Click" Width="250"
         Foreground="Black" FontSize="16" FontFamily="Helvetica Neue" FontWeight="Bold"
        BorderBrush="SlateGray" Content="{Binding Name}">
                <Button.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="White" Offset="0.073" />
                        <GradientStop Color="White" Offset="1" />
                        <GradientStop Color="#FFE9E9F9" Offset="0.571" />
                        <GradientStop Color="#FFD7D7EC" Offset="0.243" />
                    </LinearGradientBrush>
                </Button.Background>
            </Button>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

【问题讨论】：

标签： c# wpf xaml data-binding listboxitem

【解决方案1】：

ItemsSource 中的每个项目都包含在ListBox 内的ListBoxItem 中。 ListBox 是从Selector 派生的控件，Selector 是允许选择项的项控件的基本类型。

表示允许用户从其子元素中选择项目的控件。

您指定为DataTemplate 的内容将在运行时放置在ListBoxItem 中，这是内容的容器。这个容器有一个default style and control template，它定义了它的外观和视觉状态。您看到的是 MouseOver 状态和 Selected 状态。您可以通过 extracting the default style 将其更改为 ListBoxItem 并对其进行调整或编写自己的代码。

How to create a template for a control (WPF.NET)

但是，您的意图似乎不同。您可能想要的只是根据绑定集合在UniformGrid 中显示按钮，而无需任何选择。您可以改用ItemsControl 来实现此目的。它不提供任何选择功能，但允许您将集合与 UniformGrid 绑定为项目面板。

<ItemsControl Width="1000" Grid.Row="1" VerticalAlignment="Top" VerticalContentAlignment="Top" Margin="50" ItemsSource="{Binding SomeItemsList}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="2" Background="Transparent" Name="uniformGrid1"></UniformGrid>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Button Margin="50" Height="70" Click="keyword_Click" Width="250"
         Foreground="Black" FontSize="16" FontFamily="Helvetica Neue" FontWeight="Bold"
        BorderBrush="SlateGray" Content="{Binding Name}">
                <Button.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="White" Offset="0.073" />
                        <GradientStop Color="White" Offset="1" />
                        <GradientStop Color="#FFE9E9F9" Offset="0.571" />
                        <GradientStop Color="#FFD7D7EC" Offset="0.243" />
                    </LinearGradientBrush>
                </Button.Background>
            </Button>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

请注意，我删除了两个Name="uniformGrid1" 之一，因为重复的名称会导致编译错误。如果您的内容超出视口并且您需要滚动条，则必须添加ScrollViewer，因为这是内置在ListBox 中，而不是ItemsControl。

<ScrollViewer HorizontalScrollBarVisibility="Auto"
              VerticalScrollBarVisibility="Auto">
   <ItemsControl  Width="1000" Grid.Row="1" VerticalAlignment="Top" VerticalContentAlignment="Top" Margin="50" ItemsSource="{Binding SomeItemsList}">
      <!-- ...other code. -->
   </ItemsControl>
</ScrollViewer>

【讨论】：

【解决方案2】：

这里的问题是ListBox 有一个选择，并且选定的项目会突出显示。您需要禁用此突出显示以获得所需的结果，例如通过设置ListBox.ItemContainerStyle，如in this answer 所述。这将删除（浅蓝色）选择颜色。

【讨论】：