Datagrid mouseover标题图像重叠

Question

我在列标题上鼠标悬停时显示图像。但重要的是它应该显示在columnheader区域下面。

我能够创建它，但它与下面的单元格重叠。这是图像。

这是我的代码：

    <Style TargetType="{x:Type DataGridColumnHeader}">
            <Setter Property="HorizontalContentAlignment" Value="Center" />
            <Setter Property="Height" Value="26" />
            <Setter Property="Width" Value="126" />
            <Setter Property="Foreground" Value="{DynamicResource ContrastWhiteBrush}" />
            <Setter Property="Background" Value="{DynamicResource ContentToGreyedOutBrush}" />
            <Setter Property="Template" Value="{StaticResource ColumnHeaderControlTemplate}" />
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="{DynamicResource GridHeaderMouseOverBrush}" />
                </Trigger>
                <Trigger Property="prism:DataGridProperties.IsMouseOverGridCellColumnHeader" Value="True">
                    <Setter Property="Background" Value="{DynamicResource GridHeaderMouseOverBrush}" />
                </Trigger>
            </Style.Triggers>

     <ControlTemplate x:Key="ColumnHeaderControlTemplate" TargetType="{x:Type DataGridColumnHeader}" >
    <AdornerDecorator>
        <Grid Background="{TemplateBinding Background}" x:Name="dgColumnHeader" Panel.ZIndex="10001">
            <ad:Interaction.Behaviors>
                <GridColumnHeaderControl:GridAdornerBehavior AdornerTemplate="{StaticResource AdornerDataTemplate}" Panel.ZIndex="19999">
                    <ad:Interaction.Triggers>
                        <ad:EventTrigger SourceName="dgColumnHeader" EventName="MouseEnter">
                            <ad:InvokeCommandAction CommandName="ShowAdornerCommand"/>
                        </ad:EventTrigger>
                        <ad:EventTrigger SourceName="dgColumnHeader" EventName="MouseLeave">
                            <ad:InvokeCommandAction CommandName="HideAdornerCommand"/>
                        </ad:EventTrigger>
                    </ad:Interaction.Triggers>
                </GridColumnHeaderControl:GridAdornerBehavior>
            </ad:Interaction.Behaviors>
            <Border x:Name="border" BorderBrush="Black" BorderThickness="0,0,1,1" Grid.ColumnSpan="1">
                <Rectangle Width="116" Margin="3,3,3,3" HorizontalAlignment="Center" RadiusX="7" RadiusY="7" x:Name="PART_Rectangle" Fill="{DynamicResource ContentOutofFocusBrush}"></Rectangle>
            </Border>
            <ContentPresenter x:Name="content"  HorizontalAlignment="Center"  VerticalAlignment="Center" Content="{TemplateBinding Content}" />
        </Grid>
    </AdornerDecorator>
    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter TargetName="PART_Rectangle" Property="Fill" Value="{DynamicResource ActiveItemBrush}" />
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

    <DataTemplate x:Key="AdornerDataTemplate">
    <Grid HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,13,0,0" Grid.ZIndex="99">
        <Button Content="X" Width="28" Height="26" Panel.ZIndex="10002" Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ctrls:RhinoDataGrid}}, Path=RemoveSelectedColumnCommand}">
            <Button.Style>
                <Style TargetType="{x:Type Button}">
                    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
                    <Setter Property="Foreground" Value="Red"/>
                    <Setter Property="Background" Value="{DynamicResource GridHeaderMouseOverBrush}"/>
                    <Setter Property="HorizontalContentAlignment" Value="Center"/>
                    <Setter Property="VerticalContentAlignment" Value="Center"/>
                    <Setter Property="FontWeight" Value="Heavy"></Setter>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type Button}">
                                <Grid>
                                    <Border Background="{TemplateBinding Background}" CornerRadius="0,0,12,12" BorderThickness="1,0,1,1" BorderBrush="Black">
                                        <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                                          Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
                                    </Border>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Button.Style>
        </Button>
    </Grid>
</DataTemplate>

我的排行器如何工作。我的行标题宽度为36，关闭按钮宽度为28，左边距为26.还有一些图像与单元格没有重叠

请帮我解决。 谢谢 DEE

Answer 1

标题的高度为26

 <Setter Property="Height" Value="26" />

您希望它如何显示高度为＆gt;的图像？ 26？

Answer 2

为了在另一个控件的顶部显示“关闭”按钮，您必须添加“弹出”控件并添加“关闭”按钮作为其子项。您可以定义最多一个子项，可以是任何UIElement。 您应该为DatagridColumnHeader的鼠标悬停事件定义事件触发器，并设置弹出控件的“IsOpen = true”。 e.g。

<Popup Name="myPopup">
  <TextBlock Name="myPopupText" 
             Background="LightBlue" 
             Foreground="Blue">
    Popup Text
  </TextBlock>
</Popup>

您还可以设置以下属性以获得预期结果。

AllowsTransparency="True" 
        Placement="Relative"
            PlacementTarget="{Binding ElementName=Border}" /* your control name */
            HorizontalOffset="0"
            VerticalOffset="60"
            PopupAnimation="Fade"