鼠标悬停时隐藏组合框边框

Posted 2023-04-01

【中文标题】鼠标悬停时隐藏组合框边框

【英文标题】：Hide Combo Box Border on Mouse Over

【发布时间】：2021-10-08 16:51:29

【问题描述】：

我有一个 DataGrid，其中一个 DataGridColumns 定义为：

<DataGridTemplateColumn Width=".2*">
      <DataGridTemplateColumn.CellTemplate>
          <DataTemplate>
               <Grid Name="MyDMGrid">
                    <ComboBox Name="VersionCB1"  ItemsSource="Binding cbValues" SelectedItem="Binding cbSelectedItem"  IsHitTestVisible="True"
                                    Style="StaticResource ResourceKey=VersionCB" SelectionChanged="VersionChange" MinWidth="20" MaxWidth="150" 
                                          HorizontalAlignment="Right" Margin="0,0,40,0" Foreground="Black" VerticalAlignment="Center" MouseEnter="VersionCB1_MouseEnter"  />
                                    
               </Grid>
          </DataTemplate>
      </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

VersionCB 资源在 app.xaml 中定义为：

<Style x:Key="VersionCB" TargetType="x:Type ComboBox">
    <Setter Property="SnapsToDevicePixels" Value="true" />
    <Setter Property="OverridesDefaultStyle" Value="true" />
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
    <Setter Property="ScrollViewer.CanContentScroll" Value="true" />
    <Setter Property="MinWidth" Value="120" />
    <Setter Property="MinHeight" Value="20" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="x:Type ComboBox">
                <Grid>
                    <ToggleButton x:Name="ToggleButton"
                        Template="StaticResource ComboBoxToggleButton"
                        Grid.Column="2"
                        Focusable="false"
                        ClickMode="Press"
                        IsChecked="Binding IsDropDownOpen, Mode=TwoWay, 
                        RelativeSource=RelativeSource TemplatedParent"/>
                    <ContentPresenter x:Name="ContentSite"
                        IsHitTestVisible="False"
                        Content="TemplateBinding SelectionBoxItem"
                        ContentTemplate="TemplateBinding SelectionBoxItemTemplate"
                        ContentTemplateSelector="TemplateBinding ItemTemplateSelector"
                        TextElement.Foreground="#FFF3F3F3"
                        TextElement.FontFamily="SegoeUI"              
                        TextElement.FontSize="14"  
                        Margin="3,3,23,3"
                        VerticalAlignment="Stretch"
                        HorizontalAlignment="Left">
                    </ContentPresenter>
                    <TextBox x:Name="PART_EditableTextBox"
                       Style="x:Null"
                       Template="StaticResource ComboBoxTextBox"
                       HorizontalAlignment="Left"
                       VerticalAlignment="Bottom"
                             BorderBrush="Transparent"
                             BorderThickness="0"
                       Margin="3,3,23,3"
                       Focusable="True"
                       Background="Transparent"
                       Visibility="Hidden"
                       IsReadOnly="TemplateBinding IsReadOnly" />
                    <Popup x:Name="Popup"
                         Placement="Bottom"
                         IsOpen="TemplateBinding IsDropDownOpen"
                         AllowsTransparency="True"
                         Focusable="False"
                         PopupAnimation="Slide">
                        <Grid x:Name="DropDown" SnapsToDevicePixels="True" MinWidth="TemplateBinding ActualWidth"
                            MaxHeight="TemplateBinding MaxDropDownHeight">
                            <Border x:Name="DropDownBorder" BorderThickness="1">
                                <Border.BorderBrush>
                                    <SolidColorBrush Color="Transparent" />
                                </Border.BorderBrush>
                                <Border.Background>
                                    <SolidColorBrush Color="#FFEBEBEB" />
                                </Border.Background>
                            </Border>
                            <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
                                <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
                            </ScrollViewer>
                        </Grid>
                    </Popup>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="HasItems" Value="false">
                        <Setter TargetName="DropDownBorder" Property="MinHeight" Value="95" />
                    </Trigger>
                    <Trigger Property="IsGrouping" Value="true">
                        <Setter Property="ScrollViewer.CanContentScroll" Value="false" />
                    </Trigger>
                    <Trigger SourceName="Popup" Property="AllowsTransparency" Value="true">
                        <Setter TargetName="DropDownBorder" Property="CornerRadius" Value="0" />
                        <Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我看到鼠标悬停在组合框上的边框，如下所示：

我已尝试跟随以摆脱边界。在 VersionCB1_MouseEnter 我写了以下内容：

ComboBox cmb = e.OriginalSource as ComboBox;
cmb.BorderThickness = new Thickness(0, 0, 0, 0);
cmb.BorderBrush =System.Windows.Media.Brushes.Transparent;

但这不起作用？如何摆脱鼠标悬停的组合框边框？

【参考方案1】：

我认为您看到的边框来自ComboBoxToggleButton 模板。我将您的代码放入组合框中，看看是否可以重新创建问题并且我没有看到任何边框，但我不得不删除两个引用 ComboBoxTextBox 和 ComboBoxToggleButton 因为我没有它们。

您可以将鼠标悬停触发器添加到切换按钮控件模板中，以查看它是否控制该边框。我很确定确实如此。我能够通过添加触发器来控制鼠标在边框上。我做了一个简单的模板来估计你有什么。我能够产生所需的行为。

         <ControlTemplate
            x:Key="ComboBoxToggleButton"
            TargetType="x:Type ToggleButton">
            <Border
                x:Name="border"
                Background="TemplateBinding Background"
                BorderBrush="TemplateBinding BorderBrush"
                BorderThickness="TemplateBinding BorderThickness"
                SnapsToDevicePixels="true">
                <ContentPresenter
                    x:Name="contentPresenter"
                    Margin="TemplateBinding Padding"
                    HorizontalAlignment="TemplateBinding HorizontalContentAlignment"
                    VerticalAlignment="TemplateBinding VerticalContentAlignment"
                    Focusable="False"
                    RecognizesAccessKey="True"
                    SnapsToDevicePixels="TemplateBinding SnapsToDevicePixels" />
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="Button.IsDefaulted" Value="true">
                    <Setter TargetName="border" Property="BorderBrush" Value="DynamicResource x:Static SystemColors.HighlightBrushKey" />
                </Trigger>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter TargetName="border" Property="BorderBrush" Value="Transparent" />
                </Trigger>
                <Trigger Property="IsMouseOver" Value="False">
                    <Setter TargetName="border" Property="BorderBrush" Value="Black" />
                </Trigger>
                <Trigger Property="IsPressed" Value="true">
                    <Setter TargetName="border" Property="BorderBrush" Value="Black" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>