none
How to create CallOut for Popup

    Question

  • Hi,

      How can i create callout for a popup in wpf.iam attaching the code below.

    <UserControl x:Class="WpfApplication1.UserControl1"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
                 mc:Ignorable="d" 
                 d:DesignHeight="104" d:DesignWidth="564">
        <UserControl.Resources>
            <Storyboard x:Name="StatusFader" x:Key="StatusFader"  Completed="StatusFader_Completed">
                <DoubleAnimation Storyboard.TargetName="popupBackground" Storyboard.TargetProperty="Opacity" From="0.7" To="0" BeginTime="0:0:0"  Duration="0:0:4.5">
                    <!--<DoubleAnimation.EasingFunction>
                        <ExponentialEase Exponent="10" EasingMode="EaseIn" />
                    </DoubleAnimation.EasingFunction>-->
                </DoubleAnimation>
            </Storyboard>
        </UserControl.Resources>
        <Grid Height="43" Width="289" AllowDrop="True" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="39*" />
                <ColumnDefinition Width="225*" />
            </Grid.ColumnDefinitions>
            <Popup Name="popup" Placement="Center" PopupAnimation="Fade" AllowsTransparency="True"  Grid.ColumnSpan="2" Height="100">
                <Border BorderBrush="CornflowerBlue"            
                BorderThickness="3,3,3,3"
                CornerRadius="10"
                        
                Background="Beige">
                    <Grid Background="Transparent">
                        <Grid Name="popupBackground" Background="Beige" Grid.Column="0" Grid.Row="0" />
                        <Label  Name="popupLabel" DockPanel.Dock="Bottom" HorizontalAlignment="Center"   VerticalAlignment="Center" Background="Transparent" Grid.Column="0" Grid.Row="0"/>
                    </Grid>
                </Border>
            </Popup>
        </Grid>
    </UserControl>
    
    /////.cs/////
      void StatusFader_Completed(object sender,EventArgs e) {
          popup.IsOpen = false;
        }
        public void ShowDialogBox(string message)
        {
    
          popupLabel.Content = message;
          Storyboard StatusFader = (Storyboard)Resources["StatusFader"];
          popup.IsOpen = true;
         StatusFader.Begin();
        }



    • Edited by sajithtgs Friday, October 19, 2012 12:38 PM
    Friday, October 19, 2012 12:32 PM

Answers

  • Thanks Chris,

          Can you please name the solution You have this Dll. This Microsoft.Expression.Drawing.dll.

    is Free software.

    Regards,

    sajith

    I named it BlendCallOutControls.  You can find a copy of the dll in the Bin folder.  When you follow the link it should be the one that is selected.

    ~Christine

    Here is the original example I provided.. PopupWPF - http://sdrv.ms/PMFIba


    My Gallery


    • Edited by Christine L. _ Monday, October 22, 2012 5:41 PM
    • Marked as answer by sajithtgs Monday, October 29, 2012 11:06 AM
    Monday, October 22, 2012 5:03 PM

All replies

  • Hello sajithtgs.

    I see from your code that you have Expression Blend.  Blend has a Callout Control which is available in Blend 4, I am not sure about 3.  Anyways, it would look like the image you are showing and isn't all that hard to use.

    Here's a sample using your colors...

    <Window
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	xmlns:local="clr-namespace:PopupWPF"
    	xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
    	x:Class="PopupWPF.MainWindow"
    	x:Name="Window"
    	Title="MainWindow"
    	Width="640" Height="480">
    	<Window.Resources>
    		
    		<Style x:Key="CalloutStyle" TargetType="{x:Type ed:Callout}">
    			<Setter Property="Template">
    				<Setter.Value>
    					<ControlTemplate TargetType="{x:Type ed:Callout}">
    						<Grid>
    							<Grid.Effect>
    								<DropShadowEffect Opacity="0.5"/>
    							</Grid.Effect>
    							<Path x:Name="PART_Path" HorizontalAlignment="Stretch" StrokeStartLineCap="{TemplateBinding StrokeStartLineCap}" StrokeDashOffset="{TemplateBinding StrokeDashOffset}" Stretch="Fill" StrokeEndLineCap="{TemplateBinding StrokeEndLineCap}" StrokeDashCap="{TemplateBinding StrokeDashCap}" StrokeMiterLimit="{TemplateBinding StrokeMiterLimit}" StrokeLineJoin="{TemplateBinding StrokeLineJoin}" StrokeDashArray="{TemplateBinding StrokeDashArray}" UseLayoutRounding="False" VerticalAlignment="Stretch" Fill="Beige" Stroke="CornflowerBlue" StrokeThickness="3"/>
    							<ContentPresenter Content="{TemplateBinding InternalContent}" HorizontalAlignment="Center" Margin="{TemplateBinding Padding}" VerticalAlignment="Center"/>
    						</Grid>
    					</ControlTemplate>
    				</Setter.Value>
    			</Setter>
    		</Style>
    		
    	</Window.Resources>
    
    	<Grid x:Name="LayoutRoot" Background="White" RenderTransformOrigin="0,0">
    		<TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Center" Margin="0" MouseEnter="TextBlock_MouseEnter" MouseLeave="TextBlock_MouseLeave"/>
    	</Grid>
    </Window>

    and the code-behind...

    using System.Windows;
    using System.Windows.Controls;
    using Microsoft.Expression.Controls;
    
    namespace PopupWPF
    {
    	public partial class MainWindow : Window
    	{
    		private Callout co = new Callout();
    		
    		public MainWindow()
    		{
    			this.InitializeComponent();
    			co.HorizontalAlignment = HorizontalAlignment.Left;
    			co.VerticalAlignment = VerticalAlignment.Bottom;
    			co.Style = this.TryFindResource("CalloutStyle") as Style;
    		}
    
    		private void TextBlock_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
    		{
    			if (LayoutRoot.Children.Contains(co))
    				LayoutRoot.Children.Remove(co);
    
    			//Sample Content
    			StackPanel sp = new StackPanel();
    			TextBlock tb = new TextBlock();
    			tb.Text = "Hello";
    			TextBlock tb2 = new TextBlock();
    			tb2.Text = "World!";
    			sp.Children.Add(tb);
    			sp.Children.Add(tb2);
    			
    			co.Content = sp;
    			
    			co.Width = 100;
    			co.Height = 50;
    			
    			Point p = e.GetPosition(LayoutRoot);
    			co.Margin = new Thickness(p.X - co.Width/2, 0, 0, p.Y + 40);
    			co.AnchorPoint = new Point(0.51, 1.5);
    			LayoutRoot.Children.Add(co);
    		}
    
    		private void TextBlock_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e)
    		{
                		LayoutRoot.Children.Remove(co);
    		}
    	}
    }

    Hope that helps and have a great weekend.

    ~Christine


    My Gallery


    Friday, October 19, 2012 10:05 PM
  • Thanks Christine,

              Iam not using expression-blend.What you see in my Xaml is the  Default Namespace.Can you mention is there any way  to do callout in wpf popup.

    Monday, October 22, 2012 4:14 AM
  • Hi sajithtgs,

    If you could try to re-template ContextMenu to achieve your goal:

    <Style x:Key="{x:Type ContextMenu}" TargetType="{x:Type ContextMenu}">
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ContextMenu}">
                    <Grid>
                        <Path x:Name="Path" Width="141.444" Height="155.667"
                Stretch="Fill" StrokeLineJoin="Round" 
                Stroke="Khaki" Fill="LightYellow" 
                Data="F1 M 229.778,131.556L 327.556,131.556C 331.974,131.556 335.556,135.137 335.556,139.556L 335.556,156.07L 362.222,168L 335.556,182L 335.556,278.222C 335.556,282.64 331.974,286.222 327.556,286.222L 229.778,286.222C 225.36,286.222 221.778,282.64 221.778,278.222L 221.778,139.556C 221.778,135.137 225.36,131.556 229.778,131.556 Z "/>
                        <StackPanel ClipToBounds="True" IsItemsHost="True"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    Then, you could change the StackPanel to other panel, and layout your control.

    Best regards,


    Sheldon _Xiao[MSFT]
    MSDN Community Support | Feedback to us
    Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Monday, October 22, 2012 7:52 AM
  • I uploaded a WPF projects with the callouts to my Skydrive if you'd like to just grab the dll. 

    http://sdrv.ms/RQmZr8

    Microsoft.Expression.Drawing.dll.

    However, Sheldon's solution probably will meet your needs better.

    ~Christine


    My Gallery

    Monday, October 22, 2012 7:57 AM
  • Thanks Shelden,

                I did not get what do you mean the ContextMenu.Do you have a full sample of this.

    Regards,

    sajith

    Monday, October 22, 2012 10:01 AM
  • Thanks Chris,

          Can you please name the solution You have this Dll. This Microsoft.Expression.Drawing.dll.

    is Free software.

    Regards,

    sajith

    Monday, October 22, 2012 10:06 AM
  • you could create a context menu for your control, and then apply my style, you could see the effect.


    Sheldon _Xiao[MSFT]
    MSDN Community Support | Feedback to us
    Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Monday, October 22, 2012 10:09 AM
  • Thanks a Lot Shelton,

       I tried Your Solution but i need to show the contectMenu by default now it is showing in the mouse click of popup and the callout must be in the bottom.not in the right side.Iam attaching my code can you please correct if iam missing some thing here.

    <UserControl x:Class="WpfApplication1.UserControl3"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
                 mc:Ignorable="d" 
                 d:DesignHeight="300" d:DesignWidth="300">
        <Grid>
            <Grid.Resources>
                <Style x:Key="ContextMenu1" TargetType="{x:Type ContextMenu}">
                    <Setter Property="SnapsToDevicePixels" Value="True"/>
                    <Setter Property="OverridesDefaultStyle" Value="True"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ContextMenu}">
                                <Grid>
                                    <Path x:Name="Path" Width="141.444" Height="155.667"
                Stretch="Fill" StrokeLineJoin="Round" 
                Stroke="Khaki" Fill="LightYellow" 
                Data="F1 M 229.778,131.556L 327.556,131.556C 331.974,131.556 335.556,135.137 335.556,139.556L 335.556,156.07L 362.222,168L 335.556,182L 335.556,278.222C 335.556,282.64 331.974,286.222 327.556,286.222L 229.778,286.222C 225.36,286.222 221.778,282.64 221.778,278.222L 221.778,139.556C 221.778,135.137 225.36,131.556 229.778,131.556 Z "/>
                                    <StackPanel ClipToBounds="True" IsItemsHost="True"/>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Grid.Resources>
            <Popup Name="popup" PopupAnimation="Fade" IsOpen="True" Placement="Left" Height="60" AllowsTransparency="True" >
                <Popup.ContextMenu>
                    <ContextMenu Style="{StaticResource ContextMenu1}" />
                </Popup.ContextMenu>
                <Border   BorderBrush="CornflowerBlue"            
                BorderThickness="3,3,3,3"
                            CornerRadius="10"
                Background="Beige">
                    <DockPanel Background="Transparent">
                        <Grid Name="popupBackground" Background="Beige" Grid.Column="0" Grid.Row="0" />
                        <Label   Name="popupLabel" DockPanel.Dock="Bottom" HorizontalAlignment="Center"   VerticalAlignment="Center" Background="Transparent">
                         </Label>
                        </DockPanel>
                    </Border>
            </Popup>        
                
        </Grid>
    </UserControl>
    

    Monday, October 22, 2012 11:42 AM
  • Thanks Chris,

          Can you please name the solution You have this Dll. This Microsoft.Expression.Drawing.dll.

    is Free software.

    Regards,

    sajith

    I named it BlendCallOutControls.  You can find a copy of the dll in the Bin folder.  When you follow the link it should be the one that is selected.

    ~Christine

    Here is the original example I provided.. PopupWPF - http://sdrv.ms/PMFIba


    My Gallery


    • Edited by Christine L. _ Monday, October 22, 2012 5:41 PM
    • Marked as answer by sajithtgs Monday, October 29, 2012 11:06 AM
    Monday, October 22, 2012 5:03 PM
  • Many thanks Chris,

                      It is really cool.

    Regards,

    sajith

    Tuesday, October 23, 2012 7:48 AM