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

Posted 2023-04-12

【中文标题】如何隐藏 UniformGrid 的悬停和单击事件？

【英文标题】：How to hide hover and click event of 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>

【参考方案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 所述。这将删除（浅蓝色）选择颜色。