none
WPF Popup Styling outside the listview

    Question

  • The WPF application that i'm creating consists of a listview, the structure of whose listviewitem is shown below. I have already created the Listview and done the styling of the Listview Items too.....but what is lacking is the popup on the side. how can i implement the popup panel such that whenever a mouse hovers over it, it should show and always on the side of the hovered over item as shown in the picture. Is it possible to do this ??This is what is required

    Also, I have trid to style my popup attempts such that they look like this google panel shown below (but with the triangle on the side)but am not able to get the triangle on top....can anyone point me in the right direction....the popup will have buttons and more

    Thanks in advance

    Monday, September 10, 2012 2:27 PM

Answers

  • Thank you for the reply.....but i found my solution, it is a variation of the link you provided earlier, so a thank you to you. The code is such : 

     
    <Popup AllowsTransparency="True" Placement="Right" HorizontalOffset="-10"
                                                PlacementTarget="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ListViewItem}}" 
                                                IsOpen="{Binding (ListViewItem.IsMouseOver), RelativeSource={RelativeSource FindAncestor, AncestorType=ListViewItem}, Mode=OneWay}" >
                                            <Canvas Width="230" Height="180" >
                                                <Path x:Name="Container" Canvas.Left="0" Canvas.Top="0" Fill="#FFFFFF" Stroke="#A9A9A9"
                                                            Data="M 230,40 L220,50 220,90 0,90 0,0 220,0 220,30 230,40"/>
                                                <TextBlock Canvas.Left="5" Canvas.Top="5" Width="210" Text="{Binding Completedesc}" TextWrapping="Wrapwithoverflow" />
                                            </Canvas>
                                        </Popup>
    Thanks again....:)
    • Marked as answer by Boni Shah Tuesday, September 11, 2012 9:28 AM
    Tuesday, September 11, 2012 9:28 AM

All replies

  • hi,

    have a look in following URL ,

    http://stevenhollidge.blogspot.de/2012/04/custom-tooltip-and-popup.html

    hope this helps you .


    Sincerely, dhampall Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Proposed as answer by jony feldman Monday, September 10, 2012 3:00 PM
    Monday, September 10, 2012 2:47 PM
  • Thank you, that does look useful, i will try it and let you know if any issues arise....thanks once again...
    Monday, September 10, 2012 2:58 PM
  • hey dhampall, i went through the link and the example is great and am trying to implement the modified code as below : 

    <Popup AllowsTransparency="True" HorizontalOffset="-10" VerticalOffset="-30" Placement="Right"
                                                   IsOpen="{Binding ElementName=lstView, Path=IsMouseOver, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" >
                        <Canvas Width="200" Height="100">
                            <Path x:Name="Container" Canvas.Left="0" Canvas.Top="0" Margin="20" Fill="#FFFFFF" Stroke="#A9A9A9"
                                                            Data="M 0,40 L15,50 15,80 150,80 150,0 15,0 15,30 0,40"/>
                            <TextBlock Canvas.Left="50" Canvas.Top="28" Width="100" Height="65" Text="Popup with text...." TextWrapping="Wrapwithoverflow" />
                        </Canvas>
                    </Popup>
    but this now comes whenever i hover over the listview(bcos Binding element = lstView), how do i bind it to individual listitem ??

    Tuesday, September 11, 2012 7:02 AM
  • hi,

    my suggestion for this would be , you should define the Listboxitem template as follows with mouse enter and mouse leave events.

     <ListBox.ItemTemplate> 
                <DataTemplate> 
                    <Border BorderThickness="2" BorderBrush="Black" Margin="10"> 
    <TextBlock Name="lstbxBlock" Text="" MouseEnter="item_MouseEnter" MouseLeave="item_MouseLeave"  Width="75" FontSize="16" FontWeight="Bold" Padding="5"  /> 
                    </Border> 
                </DataTemplate> 
            </ListBox.ItemTemplate> 

    and then in respective following code .

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


    Sincerely, dhampall Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Tuesday, September 11, 2012 8:08 AM
  • Thank you for the reply.....but i found my solution, it is a variation of the link you provided earlier, so a thank you to you. The code is such : 

     
    <Popup AllowsTransparency="True" Placement="Right" HorizontalOffset="-10"
                                                PlacementTarget="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ListViewItem}}" 
                                                IsOpen="{Binding (ListViewItem.IsMouseOver), RelativeSource={RelativeSource FindAncestor, AncestorType=ListViewItem}, Mode=OneWay}" >
                                            <Canvas Width="230" Height="180" >
                                                <Path x:Name="Container" Canvas.Left="0" Canvas.Top="0" Fill="#FFFFFF" Stroke="#A9A9A9"
                                                            Data="M 230,40 L220,50 220,90 0,90 0,0 220,0 220,30 230,40"/>
                                                <TextBlock Canvas.Left="5" Canvas.Top="5" Width="210" Text="{Binding Completedesc}" TextWrapping="Wrapwithoverflow" />
                                            </Canvas>
                                        </Popup>
    Thanks again....:)
    • Marked as answer by Boni Shah Tuesday, September 11, 2012 9:28 AM
    Tuesday, September 11, 2012 9:28 AM