Открывать всплывающее окно при наведении курсора на текстовое поле со списком - PullRequest
Новая
       22

Открывать всплывающее окно при наведении курсора на текстовое поле со списком

2 голосов
/ 28 сентября 2010

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>

Ответы [ 2 ]

1 голос
/ 28 сентября 2010

Во-первых, спасибо за отличный пример кода для воспроизведения вашей проблемы.Проблема в том, что контекст данных всплывающего окна никогда не устанавливается, поэтому он получает его от своего родителя, сетки, которую вы установили для выбранного в данный момент элемента.В коде вы можете установить правильный контекст данных всплывающего окна. 

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

Кроме того, вы не можете установить цель размещения, как в xaml, невозможно просто ссылаться на элемент управления вшаблон данных.Код исправления установит цель размещения, но скроет обычную подсказку, если вы не добавите смещение к одному из них.Лично я не считаю хорошей идеей иметь два всплывающих окна при наведении мыши.

0 голосов
/ 28 сентября 2010 
<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, используя ваши собственные элементы управления довольно легко.Это показывает, как должна быть настроена функциональность всплывающего окна.

...