在列表框文本块的鼠标悬停期间打开一个弹出窗口答案

【问题标题】：Open a popup during mouseover of listbox textblock在列表框文本块的鼠标悬停期间打开一个弹出窗口
【发布时间】：2011-04-18 07:08:09
【问题描述】：

Photosuru 具有简洁的效果 - 当您将鼠标悬停在缩略图上时，会打开一个显示放大图像的弹出窗口。我试图让它在列表框上工作，类似于工具提示，我需要将鼠标悬停在一个项目上并打开弹出窗口。问题是，弹出窗口只显示在列表框中选择的项目。我尝试通过 Photosuru 代码寻找答案，但发现它对我来说太先进了。注意：我不能使用工具提示，因为它是其他东西所需要的。

这是 xaml：

<Window.Resources>
    <XmlDataProvider x:Key="MyPartsXML"                            
                     Source="F:\ListBoxSync\MyParts.xml"
                     XPath="MyParts"/>
</Window.Resources>

<Grid x:Name="MainGrid" 
      DataContext="{Binding ElementName=PartsList, Path=SelectedItem}" 
      Width="Auto" 
      VerticalAlignment="Stretch">

    <ListBox ItemsSource="{Binding Source={StaticResource MyPartsXML}, 
                           XPath=//MyParts//parts}" 
             IsSynchronizedWithCurrentItem="True" 
             Name="PartsList" 
             HorizontalAlignment="Left">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Border BorderThickness="2" BorderBrush="Black" Margin="10">
                    <TextBlock Name="lstbxBlock" 
                               Text="{Binding XPath=item}" 
                               MouseEnter="item_MouseEnter" 
                               MouseLeave="item_MouseLeave"/>
                </Border>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

    <Popup x:Name="Pops" 
           IsOpen="False" 
           Placement="Right" 
           StaysOpen="False" 
           PlacementTarget="{Binding ElementName=txtBxitem}" 
           HorizontalAlignment="Left">
        <StackPanel>
            <TextBox Text="{Binding XPath=color}"/>
            <TextBox Text="{Binding XPath=size}"/>

        </StackPanel>
    </Popup>

    <TextBox Text="{Binding XPath=color}"/>
    <TextBox Text="{Binding XPath=size}"/>
</Grid>

背后的代码：

    private void item_MouseEnter(object sender, MouseEventArgs e)
    {
        this.Pops.IsOpen = true;
    }

    private void item_MouseLeave(object sender, MouseEventArgs e)
    {
        this.Pops.IsOpen = false;
    }

希望这不是矫枉过正，但这里是 xml：

 <?xml version="1.0" encoding="ISO-8859-1" ?> 

<MyParts>
<parts>
    <item>Part1</item>
    <color>Red</color>
    <size>SM</size>
</parts>
<parts>
    <item>Part2</item>
    <color>Green</color>
    <size>LG</size>
</parts>
<parts>
    <item>Part3</item>
    <color>Blue</color>
    <size>XXL</size>
</parts>
<parts>
    <item>Part4</item>
    <color>Yellow</color>
    <size>LG</size>
</parts>
<parts>
    <item>Part5</item>
    <color>Green</color>
    <size>XL</size>
</parts>

【问题讨论】：

标签： wpf xml listbox popup mouseover

【解决方案1】：

<html>
<title>CodeAve.com(JavaScript: Hover 
Window within Previous Page)</title>
<body bgcolor="#FFFFFF">

<script language="JavaScript">
<!-- 
// This is the function that will open the
// new window when the mouse is moved over the link
function open_new_window() 
{
new_window = open("","hoverwindow","width=300,height=200,left=10,top=10");

// open new document 
new_window.document.open();

// Text of the new document
// Replace your " with ' or \" or your document.write statements will fail
new_window.document.write("<html><title>JavaScript New Window</title>");
new_window.document.write("<body bgcolor=\"#FFFFFF\">");
new_window.document.write("This is a new html document created by JavaScript ");
new_window.document.write("statements contained in the previous document.");
new_window.document.write("<br>");
new_window.document.write("</body></html>");

// close the document
new_window.document.close(); 
}

// This is the function that will close the
// new window when the mouse is moved off the link
function close_window() 
{
new_window.close();
}

// -->
</script>


<a href="#" onMouseOver="open_new_window()" onMouseOut="close_window()">Open Hover Window</a>




</body>
</html>

我发现一些代码可以使用简单的 Javascript 完成此操作。您绝对可以很容易地使用您的自定义控件将其合并到 .NET 中。这显示了应该如何设置弹出窗口的功能。

【讨论】：

Scott，我正在开发 WPF 桌面应用程序。在我看来，您的答案是针对网页的。
糟糕....我的错。看到问题标题，知道我之前看过这个，所以我发布了它，哈哈。

【解决方案2】：

首先，感谢您提供出色的示例代码来重现您的问题。问题是弹出窗口的数据上下文从未设置，因此它从它的父级获取它，即您设置为当前选定项目的网格。在后面的代码中可以设置弹窗的正确数据格式。

private void item_MouseEnter(object sender, MouseEventArgs e)
{
   Pops.DataContext = (sender as FrameworkElement).DataContext;
   Pops.PlacementTarget = (sender as UIElement);
   Pops.IsOpen = true;
}

此外，您不能像在 xaml 中那样设置放置目标，不能只引用数据模板中的控件。修复后的代码将设置放置目标，但隐藏您的常规工具提示，除非您向其中一个添加偏移量。就我个人而言，我认为在鼠标悬停时有两个弹出窗口不是一个好主意。

【讨论】：