Datagrid鼠标悬停标题图像重叠答案

【问题标题】：Datagrid mouseover header image overlappingDatagrid鼠标悬停标题图像重叠
【发布时间】：2012-05-01 13:04:02
【问题描述】：

当我将鼠标悬停在列标题上时，我有图像要显示。但重要的是它应该显示在列标题区域下方。

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

这是我的代码：

    <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>

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

请帮我解决。谢谢深

【问题讨论】：

也许问题在于您将 Adorner 装饰器定义为 ColumnHeaderControlTemplate 的一部分。您是否尝试过从 ControlTemplate 中删除 AdornerDecorator 并将 DataGrid 元素放在一个 AdornerDecorator 中？

标签： wpf image mouseover overlapping columnheader

【解决方案1】：

表头高度为26

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

您希望它如何显示高度 > 26 的图像？

【讨论】：

我不想增加标题的高度，但我想采用占位符之类的东西，它应该是透明的并且高度 > 26。我的行标题关闭按钮如何使用类似的代码。我将行标题的图像附加到我的问题中。

【解决方案2】：

为了在另一个控件之上显示您的“关闭”按钮，您必须添加“弹出”控件并将“关闭”按钮添加为其子控件。您最多可以定义一个子元素，它可以是任何 UIElement。您应该为 DatagridColumnHeader 的鼠标悬停事件定义事件触发器，并设置弹出控件的“IsOpen = true”。例如

<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"

【讨论】：