0

我有一个ItemsControl带有数据的模板,当用户将鼠标悬停在项目的某些部分上时,我希望出现一个阴影。但是,投影被ItemsControl.

XAML:

<Window x:Class="DropShadowTest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:po        ="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options" 
    Title="MainWindow" 
    Height="350" Width="525" 
    Loaded="Window_Loaded" 
    UseLayoutRounding="True" 
    SnapsToDevicePixels="True">
<Window.Resources>
    <DropShadowEffect   po:Freeze="true"    x:Key="BuyOrderFlagShadow"  Color="#FF000000" Direction="0" ShadowDepth="0" BlurRadius="15" RenderingBias ="Quality"    Opacity =".65"/>
</Window.Resources>
<Grid>
    <ItemsControl Name="itemsControl" Margin="25">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <Grid Name="borderLeft" Grid.Column="0" Background="LightGray" >
                        <Border BorderBrush="Black" BorderThickness="0">
                            <TextBlock Text="{Binding Name}" Margin="5"/>                           
                        </Border>
                    </Grid>
                    <Grid Name="borderCenter" Grid.Column="1" Background="LightGray" >
                        <Border BorderBrush="Black" BorderThickness="0">
                            <TextBlock Text="{Binding City}" Margin="5"/>
                        </Border>
                    </Grid>
                    <Grid Name="borderRight" Grid.Column="2" Background="LightGray" >
                        <Border BorderBrush="Black" BorderThickness="0">
                            <TextBlock Text="{Binding State}" Margin="5"/>
                        </Border>
                    </Grid>
                </Grid>
                <DataTemplate.Triggers>
                    <Trigger Property="IsMouseOver" SourceName="borderLeft" Value="true">
                        <Setter Property="Effect" Value="{StaticResource BuyOrderFlagShadow}" TargetName="borderLeft"/>
                        <Setter Property="ZIndex" Value="1000" TargetName="borderLeft"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" SourceName="borderRight" Value="true">
                        <Setter Property="Effect" Value="{StaticResource BuyOrderFlagShadow}" TargetName="borderRight"/>
                        <Setter Property="ZIndex" Value="1000" TargetName="borderRight"/>
                    </Trigger>
                </DataTemplate.Triggers>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>
</Window>

当我将鼠标悬停在一个项目上时,会发生以下情况: 在此处输入图像描述

我将该ZIndex属性添加到触发器中以尝试解决该问题。在此之前,阴影仅出现在网格的左侧和顶部。任何帮助表示赞赏。

4

1 回答 1

0

感谢 user2760623,我调查了整个项目的 ZIndex。使用这个问题,我想出了以下解决方案ItemContainerStyle

<Window x:Class="DropShadowTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:po        ="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options" 
        Title="MainWindow" 
        Height="350" Width="525" 
        Loaded="Window_Loaded" 
        UseLayoutRounding="True" 
        SnapsToDevicePixels="True">
    <Window.Resources>
        <DropShadowEffect   po:Freeze="true"    x:Key="BuyOrderFlagShadow"  Color="#FF000000" Direction="0" ShadowDepth="0" BlurRadius="15" RenderingBias ="Quality"    Opacity =".65"/>
    </Window.Resources>
    <Grid>
        <ItemsControl Name="itemsControl" Margin="25">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <Border Name="borderLeft"       Panel.ZIndex="-1"   Grid.Column="0" Background="LightGray" BorderBrush="Black" BorderThickness="0">
                            <TextBlock Text="{Binding Name}" Margin="5"/>
                        </Border>
                        <Border Name="borderCenter"     Panel.ZIndex="-1"   Grid.Column="1" Background="LightGray" BorderBrush="Black" BorderThickness="0">
                            <TextBlock Text="{Binding City}" Margin="5"/>
                        </Border>
                        <Border Name="borderRight"      Panel.ZIndex="-1"   Grid.Column="2" Background="LightGray" BorderBrush="Black" BorderThickness="0">
                            <TextBlock Text="{Binding State}" Margin="5"/>
                        </Border>
                    </Grid>
                    <DataTemplate.Triggers>
                        <Trigger Property="IsMouseOver" SourceName="borderLeft" Value="true">
                            <Setter Property="Effect"       Value="{StaticResource BuyOrderFlagShadow}" TargetName="borderLeft"/>
                            <Setter Property="Panel.ZIndex" Value="100" TargetName="borderLeft"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" SourceName="borderRight" Value="true">
                            <Setter Property="Effect"       Value="{StaticResource BuyOrderFlagShadow}" TargetName="borderRight"/>
                            <Setter Property="Panel.ZIndex" Value="100" TargetName="borderRight"/>
                        </Trigger>
                    </DataTemplate.Triggers>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemContainerStyle>
                <Style TargetType="{x:Type ContentPresenter}">
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Panel.ZIndex" Value="100"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </ItemsControl.ItemContainerStyle>
        </ItemsControl>
    </Grid>
</Window>

现在我得到了我预期的行为: 在此处输入图像描述

于 2013-10-02T13:46:08.977 回答