WPF项目控制 - 逐项弹出"悬停"影响

时间:2016-05-25 11:07:13

标签: wpf xaml

我有一个ItemsControl,当鼠标在控件周围移动时,我想在每个项目旁边显示一个弹出窗口。这是我到目前为止所处的地方: -

<Page.Resources>
    <DataTemplate x:Key="ItemTemplate">
        <Border x:Name="border" Background="AliceBlue">
            <Grid>
                <TextBlock Text="X" />

                <Popup x:Name="ElementPopup"
                       StaysOpen="False"
                       Placement="Right"
                       PlacementTarget="{Binding ElementName=border}"
                       SnapsToDevicePixels="True">
                    <Border Background="Orange" Width="50" Height="50">
                        <TextBlock Text="Popup!" />
                    </Border>
                </Popup>
            </Grid>
        </Border>
        <DataTemplate.Triggers>
            <Trigger Property="IsMouseOver"
                     Value="True">
                <Setter TargetName="border"
                        Property="Background"
                        Value="Yellow" />
                <Setter TargetName="ElementPopup"
                        Property="IsOpen"
                        Value="true" />
            </Trigger>
        </DataTemplate.Triggers>
    </DataTemplate>
</Page.Resources>

<ItemsControl ItemTemplate="{StaticResource ItemTemplate}" Width="100">  
   <sys:String>X</sys:String>
   <sys:String>X</sys:String>
   <sys:String>X</sys:String>
</ItemsControl>

就目前而言,当我第一次将鼠标悬停在某个项目上时会弹出该弹出窗口,但随后它仍然存在,我必须在弹出窗口外单击才能删除它。

我需要它更像工具提示,当鼠标移动到不同的项目时,弹出窗口会出现并消失。我是否与上述XAML一致,或者我应该采用不同的方法,例如使用工具提示? (请记住,真正的弹出窗口将包含一些用户可以与之交互的控件)。

1 个答案:

答案 0 :(得分:1)

我稍微调整了你的代码并且它有效(虽然方法并不好):

<Window.Resources>
    <DataTemplate x:Key="ItemTemplate">
        <Border x:Name="border" Background="AliceBlue">
            <Grid>
                <TextBlock Text="{Binding }" />

                <Popup x:Name="ElementPopup" IsOpen="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},Path=IsMouseOver,Mode=OneWay}"
                   StaysOpen="True"
                   Placement="Right"
                   PlacementTarget="{x:Null}"  Focusable="False"
                   SnapsToDevicePixels="True">
                    <Border Background="Orange" Width="50" Height="50">
                        <TextBlock Text="{Binding }" Focusable="False" />
                    </Border>
                </Popup>
            </Grid>
        </Border>
        <DataTemplate.Triggers>
            <Trigger Property="IsMouseOver"
                 Value="True">
                <Setter TargetName="border"
                    Property="Background"
                    Value="Yellow" />                   
            </Trigger>
        </DataTemplate.Triggers>
    </DataTemplate>
</Window.Resources>    
<ItemsControl ItemTemplate="{StaticResource ItemTemplate}" Width="100">
    <sys:String>X</sys:String>
    <sys:String>Y</sys:String>
    <sys:String>Z</sys:String>
</ItemsControl>

<强> 输出:

img1

img2