locked
Two Popup Controls need to be activated when clicked RRS feed

  • Question

  • I have one main window, in which two labels are provided (Text1, Text2) on clicking of the text1, text2 -> two popup controls are opened, but when one popup (either first or second) is upfront and the other one is down when clicking on the down one it is not showing upfront rather it is behind the other popup (first or second)....for my WPF applications

    I have searched in the net and got the behavior as BringtoFrontBehavior which is exclusively for panels and not for the controls and I dont' know how to add this behavior in my existing project... please help

     

    Thursday, April 15, 2010 11:06 AM

All replies

  • Part of the problem here is that popups are sort of in a visual tree of their own, they don't have a containing panel in which you can easily set the z-order. The best option is probably to close/re-open the popup, which will place it on top.

     

    Here is a simple example:

    <Grid x:Name="LayoutRoot">
    		<Label HorizontalAlignment="Left" Margin="24,26,0,0" VerticalAlignment="Top" Content="Label 1" Width="60.75" MouseLeftButtonUp="Label1Click"/>
    		<Label HorizontalAlignment="Left" Margin="24,55.96,0,0" VerticalAlignment="Top" Width="60.75" Content="Label 2" MouseLeftButtonUp="Label2Click"/>
    		<Popup x:Name="Popup1" Margin="0" Placement="Mouse">
    			<Grid Width="100" Height="100" Background="Red"/>
    		</Popup>
    		<Popup x:Name="Popup2" Margin="2,2,-2,-2" Placement="Mouse">
    			<Grid Width="100" Height="100" Background="#FF57FF2A"/>
    		</Popup>
    	</Grid>
    private void Label1Click(object sender, System.Windows.Input.MouseButtonEventArgs e)
    		{
    			this.Popup1.IsOpen = false;
    			this.Popup1.IsOpen = true;
    		}
    
    		private void Label2Click(object sender, System.Windows.Input.MouseButtonEventArgs e)
    		{
    			this.Popup2.IsOpen = false;
    			this.Popup2.IsOpen = true;
    		}
    Also, that behavior you were trying to use is for Silverlight, so you won't be able to add it to your WPF project.

    Thursday, April 15, 2010 1:17 PM
    Moderator
  • The thing is I am simulating the communicator, on which I have placed the simple expander control and have two labels for the contacts as text1 and text2 if I click text1, it opens up the chat window (as first popup) and the other one the text2 when I click on it, the second chat window (second popup) opens up but again when I click back on the text1, the first popup should be displayed first and then the second popup should go behind but it is not happening.

    The below is my code and is there any specific behavior for WPF to Bring to front and I am also novice to C# programming.

    <Grid DataContext="{Binding Source={StaticResource empsSampleDataSource}}">
      <Grid.RowDefinitions>
       <RowDefinition Height="0.211*"/>
       <RowDefinition Height="0.067*"/>
       <RowDefinition Height="0.722*"/>
      </Grid.RowDefinitions>
      <VisualStateManager.VisualStateGroups>
       <VisualStateGroup x:Name="list_viewONOFF">
        <VisualState x:Name="Off">
         <Storyboard>
          <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="list_view" Storyboard.TargetProperty="(UIElement.Visibility)">
           <DiscreteObjectKeyFrame KeyTime="00:00:00">
            <DiscreteObjectKeyFrame.Value>
             <Visibility>Hidden</Visibility>
            </DiscreteObjectKeyFrame.Value>
           </DiscreteObjectKeyFrame>
          </ObjectAnimationUsingKeyFrames>
          <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="img_click" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
           <SplineDoubleKeyFrame KeyTime="00:00:00" Value="17"/>
          </DoubleAnimationUsingKeyFrames>
          <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="img_click" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
           <SplineDoubleKeyFrame KeyTime="00:00:00" Value="2"/>
          </DoubleAnimationUsingKeyFrames>
         </Storyboard>
        </VisualState>
        <VisualState x:Name="On">
         <Storyboard>
          <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="list_view" Storyboard.TargetProperty="(UIElement.Visibility)">
           <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}"/>
          </ObjectAnimationUsingKeyFrames>
          <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="expander" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
           <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.078"/>
          </DoubleAnimationUsingKeyFrames>
          <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="expander" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
           <SplineDoubleKeyFrame KeyTime="00:00:00" Value="9.5"/>
          </DoubleAnimationUsingKeyFrames>
          <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="img_click" Storyboard.TargetProperty="(UIElement.Opacity)">
           <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
          </DoubleAnimationUsingKeyFrames>
          <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="img_click" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
           <SplineDoubleKeyFrame KeyTime="00:00:00" Value="2"/>
          </DoubleAnimationUsingKeyFrames>
          <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="img_click" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
           <SplineDoubleKeyFrame KeyTime="00:00:00" Value="17"/>
          </DoubleAnimationUsingKeyFrames>
          <ThicknessAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="expander" Storyboard.TargetProperty="(FrameworkElement.Margin)">
           <SplineThicknessKeyFrame KeyTime="00:00:00" Value="8,90,8,26"/>
          </ThicknessAnimationUsingKeyFrames>
          <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="img_click" Storyboard.TargetProperty="(FrameworkElement.Cursor)">
           <DiscreteObjectKeyFrame KeyTime="00:00:00">
            <DiscreteObjectKeyFrame.Value>
             <Cursor>Arrow</Cursor>
            </DiscreteObjectKeyFrame.Value>
           </DiscreteObjectKeyFrame>
          </ObjectAnimationUsingKeyFrames>
         </Storyboard>
        </VisualState>
       </VisualStateGroup>
      </VisualStateManager.VisualStateGroups>
      <VisualStateManager.CustomVisualStateManager>
       <ic:ExtendedVisualStateManager/>
      </VisualStateManager.CustomVisualStateManager>
      <Expander x:Name="expander" Margin="8,-33.162,8,26" Style="{DynamicResource SimpleExpander}" IsExpanded="True" Header="All Contacts" RenderTransformOrigin="0.5,0.5" Grid.Row="1" Grid.RowSpan="2">
       <Expander.RenderTransform>
        <TransformGroup>
         <ScaleTransform/>
         <SkewTransform/>
         <RotateTransform/>
         <TranslateTransform/>
        </TransformGroup>
       </Expander.RenderTransform>
       <Grid>
        <StackPanel Margin="8,8,8,30" Orientation="Vertical">
         <Label x:Name="label1" Style="{DynamicResource SimpleLabel}" Height="18.96" Content="TestA" MouseDoubleClick="label_DblClick"/>
         <Label x:Name="label2" Style="{DynamicResource SimpleLabel}" Height="18.96" Content="TestB" MouseDoubleClick="label1_DblClick"/>
        </StackPanel>
       </Grid>
      </Expander>
      <Popup x:Name="FirstPopup" Placement="Right" StaysOpen="False" AllowsTransparency="True" MouseMove="pop_mousemove" Grid.RowSpan="3">
       <Popup.BindingGroup>
        <BindingGroup/>
       </Popup.BindingGroup>
       <Grid>
        <Grid.ColumnDefinitions>
         <ColumnDefinition/>
         <ColumnDefinition Width="Auto"/>
         <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
         <RowDefinition/>
         <RowDefinition Height="Auto"/>
         <RowDefinition/>
        </Grid.RowDefinitions>
        <Border Margin="8" BorderThickness="1" Grid.Column="1" Grid.Row="1" Width="400" Height="200" CornerRadius="25,25,25,25" Padding="10,10,10,10">
         <Border.BorderBrush>
          <LinearGradientBrush EndPoint="05,1" StartPoint="0.5,0">
           <GradientStop Color="Black" Offset="0.5"/>
           <GradientStop Color="White" Offset="1"/>
          </LinearGradientBrush>
         </Border.BorderBrush>
         <Border.Background>
          <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
           <GradientStop Color="Black" Offset="0"/>
           <GradientStop Color="White" Offset="1"/>
           <GradientStop Color="#CC4895DE" Offset="0.00844"/>
           <GradientStop Color="#FF346592" Offset="0.00393"/>
          </LinearGradientBrush>
         </Border.Background>
         <StackPanel Margin="9,0,12,4">
          <TextBlock HorizontalAlignment="Center" Margin="91,0,86,0" VerticalAlignment="Center" Height="140" Foreground="White" TextAlignment="Center" TextWrapping="Wrap"><Run Text="I'm First Popup"/></TextBlock>
          <Button x:Name="btnClose" Margin="137,0,139,0" Height="27" Content="Close" Click="btn_Close"/>
         </StackPanel>
        </Border>
       </Grid>
      </Popup>
      <Popup x:Name="SecondPopup" Placement="Right" StaysOpen="False" AllowsTransparency="True" MouseMove="pop1_mousemove" Grid.RowSpan="3">
       <Popup.BindingGroup>
        <BindingGroup/>
       </Popup.BindingGroup>
       <Grid>
        <Grid.ColumnDefinitions>
         <ColumnDefinition/>
         <ColumnDefinition Width="Auto"/>
         <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
         <RowDefinition/>
         <RowDefinition Height="Auto"/>
         <RowDefinition/>
        </Grid.RowDefinitions>
        <Border Margin="8" BorderThickness="1" Grid.Column="1" Grid.Row="1" Width="400" Height="200" CornerRadius="25,25,25,25" Padding="10,10,10,10">
         <Border.BorderBrush>
          <LinearGradientBrush EndPoint="05,1" StartPoint="0.5,0">
           <GradientStop Color="Black" Offset="0.5"/>
           <GradientStop Color="White" Offset="1"/>
          </LinearGradientBrush>
         </Border.BorderBrush>
         <Border.Background>
          <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
           <GradientStop Color="Black" Offset="0"/>
           <GradientStop Color="White" Offset="1"/>
           <GradientStop Color="#CC4895DE" Offset="0.00844"/>
           <GradientStop Color="#FF346592" Offset="0.00393"/>
          </LinearGradientBrush>
         </Border.Background>
         <StackPanel Margin="9,0,12,4">
          <TextBlock HorizontalAlignment="Center" Margin="91,0,86,0" VerticalAlignment="Center" Height="140" Foreground="White" TextAlignment="Center" TextWrapping="Wrap"><Run Text="I'm Second Popup"/></TextBlock>
          <Button x:Name="btnClose1" Margin="137,0,139,0" Height="27" Content="Close" Click="btn_Close1"/>
         </StackPanel>
        </Border>
       </Grid>
      </Popup>
      <TextBox x:Name="tbBox" Margin="8,8,8,0" VerticalAlignment="Top" Height="27" BorderBrush="Black" TextWrapping="Wrap" KeyDown="tb_listviewenable">
       <i:Interaction.Triggers>
        <i:EventTrigger EventName="KeyDown">
         <ic:GoToStateAction StateName="On"/>
        </i:EventTrigger>
       </i:Interaction.Triggers>
      </TextBox>
      <ListView x:Name="list_view" Margin="8,-33.162,8,7.94" IsSynchronizedWithCurrentItem="False" ItemsSource="{Binding EmployeeCollection, Mode=Default}" Visibility="Hidden" d:IsLocked="True" Grid.Row="1">
       <ListView.View>
        <GridView>
         <GridViewColumn Header="First Name" DisplayMemberBinding="{Binding Name}"/>
         <GridViewColumn Header="Status" DisplayMemberBinding="{Binding Status}"/>
        </GridView>
       </ListView.View>
      </ListView>
      <Image x:Name="img_click" HorizontalAlignment="Right" Margin="0,14,31,0" VerticalAlignment="Top" Width="7" Height="10" Opacity="0" RenderTransformOrigin="0.5,0.5" Source="crossmark.png" Stretch="Fill" MouseLeftButtonDown="img_onDown">
       <i:Interaction.Triggers>
        <i:EventTrigger EventName="MouseLeftButtonDown">
         <ic:GoToStateAction StateName="Off"/>
        </i:EventTrigger>
       </i:Interaction.Triggers>
       <Image.RenderTransform>
        <TransformGroup>
         <ScaleTransform/>
         <SkewTransform/>
         <RotateTransform/>
         <TranslateTransform/>
        </TransformGroup>
       </Image.RenderTransform>
      </Image>
     </Grid>

    Friday, April 16, 2010 5:38 AM
  • Sorry, I thought when you said popup that you were using the popup control. 

    Here is a simple behavior that will set the zindex based on any trigger you like (you should probably use the same trigger as the one that shows your state, MouseLeftButtonDown on whatever shows the state).  This works by monotonically increasing the zindexes assigned to objects within a group specified on the behavior as groupname.  This is a pretty crude way to do it, but it should serve your purposes I believe :)

    public class BringToFrontAction : TriggerAction<UIElement>
    	{
    		public static readonly DependencyProperty GroupNameProperty = DependencyProperty.Register("GroupName", typeof(string), typeof(BringToFrontAction), new PropertyMetadata("Default"));
    	 
    		public string GroupName
    	  {
    	  get 
    		{ 
    			return GetValue(GroupNameProperty) as string; 
    		}
    	  set 
    		{ 
    			SetValue(GroupNameProperty, value); }
    	  }
    		
    		private static Dictionary<string, int> currentZIndexes = new Dictionary<string, int>();
    
    		public BringToFrontAction()
    		{
    			if(!currentZIndexes.ContainsKey(this.GroupName))
    			{
    				currentZIndexes[this.GroupName] = 1000;
    			}
    		}
    
    		protected override void Invoke(object o)
    		{
    			currentZIndexes[this.GroupName] = currentZIndexes[this.GroupName] + 1;
    			Panel.SetZIndex(this.AssociatedObject, currentZIndexes[this.GroupName]);
    		}
    	}

    Example usage, the rectangle is what I want to have brought to the front, and the button1 is what I click that activates the state that shows the rectangle.

    <Rectangle x:Name="rectangle1" Visibility="Hidden">
    			<i:Interaction.Triggers>
    				<i:EventTrigger SourceName="button1" EventName="Click">
    					<local:BringToFrontAction/>
    				</i:EventTrigger>
    			</i:Interaction.Triggers>
    		</Rectangle>

    Friday, April 16, 2010 4:21 PM
    Moderator
  • Yes, I have two popup controls Initially it made to be staysopen ="false" and then through the code whichever label in the simple expander clicked, the popup will open.

    When two popup controls opened, and one goes behind and the other stays front, whenever I clicked the behind popup control, it doesn't come forward either ways.

     

     

    Monday, April 19, 2010 6:29 AM
  • In that case, my first answer should work fine, just close and re-open the one that you want to be in front, it will come to the front.
    Monday, April 19, 2010 1:18 PM
    Moderator