Question

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>

Answer 1

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

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

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

Answer 2

<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中。这显示了如何设置弹出窗口的功能。

在鼠标悬停列表框文本块期间打开弹出窗口

2 个答案: