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

发布于 2024-09-25 09:22:15 字数 2962 浏览 5 评论 0原文

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>

原文

Photosuru has a neat effect - when you mouseover the thumbnail image a popup opens showing the image enlarged. I am trying to get this to work on a listbox, similar to a tooltip, I need to mouseover an item and have the popup open. The problem, the popup only shows the item selected in the listbox. I tried looking through Photosuru code for the answer, but found it too advanced for me. Note: I can't use tooltip as it is needed for something else.

Here's the 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>

The code behind:

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

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

Hope this isn't overkill, but here's the 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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦行七里 2024-10-02 09:22:15

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

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

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

First, thanks for your excellent sample code to reproduce your issue. The problem is that the data context of the popup is never set so it gets it from it parent, the grid which you set to currently selected item. In the code behind you can set the correct data contect of the popup.

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

Also, you can't set the placement target like you do in xaml, it is not possible to just reference a control in a data template. The code behind fix will set placement target but hide your regular tooltip unless you add an offset to one of them. Personally I don't think its a good idea to have two popups on mouse over.

回复收藏 0 原文

來不及說愛妳 2024-10-02 09:22:15

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

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

Some code I found that completes this using simple Javascript. You could definitely incorporate this into .NET using your custom controls pretty easily. This shows how the functionality of the popup should be setup though.

回复收藏 0 原文

~没有更多了~