Update popup position based on parent position

Question

I want to update my Popup's position when the size of its parent is changing.
The following code works but there's a problem.
As you can see, inside the popup there's a big button (width 300), before the textbox reach this size, it don't update the popup position (try it yourself - write a super big sentence and you will see)

<TabControl>
    <TabControl.ItemContainerStyle>
        <Style TargetType="{x:Type TabItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Grid Height="26" 
                              Background="{TemplateBinding Background}" 
                              x:Name="TabGrid">
                            <Grid.ColumnDefinitions>
                                 <ColumnDefinition Width="Auto" />
                                 <ColumnDefinition Width="Auto" />
                             </Grid.ColumnDefinitions>
                             <ContentPresenter x:Name="tabTitle" Margin="5,0" 
                                               HorizontalAlignment="Left" 
                                               VerticalAlignment="Center" 
                                               ContentSource="Header"/>
                            <StackPanel Grid.Column="1" Height="26" Margin="0,0,1,0" 
                                        HorizontalAlignment="Center" 
                                        VerticalAlignment="Center" 
                                        Orientation="Horizontal">
                                <ToggleButton x:Name="Edit" Width="16" Content="e" 
                                              ToolTip="Edit" />
                                <Popup AllowsTransparency="True" 
                                       IsOpen="{Binding IsChecked, ElementName=Edit}" 
                                        Placement="Right" 
                                        PlacementTarget="{Binding ElementName=TabGrid}"
                                        StaysOpen="False" 
                                        VerticalOffset="30" 
                                        HorizontalOffset="-20">
                                    <Grid x:Name="PopupGrid">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto" />
                                             <RowDefinition Height="*" />
                                         </Grid.RowDefinitions>
                                         <Border Width="16" Height="3" Margin="0,0,20,0" 
                                                 HorizontalAlignment="Right" 
                                                 Panel.ZIndex="1" Background="White" />
                                        <Border Grid.Row="1" Margin="0,-2,0,0" 
                                                Background="White" 
                                                BorderBrush="{Binding TabColor}" 
                                                BorderThickness="2">
                                                <StackPanel>
                                                <TextBox Name="Text" 
                                                         Text="{Binding Content, ElementName=tabTitle, UpdateSourceTrigger=PropertyChanged}" 
                                                         Margin="10"/>
                                                <Button Width="300"/>
                                            </StackPanel>
                                         </Border>
                                     </Grid>
                                </Popup>
                             </StackPanel>
                        </Grid>
                     </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
     </TabControl.ItemContainerStyle>
    <TabItem Header="TabItem">
        <Grid Background="#FFE5E5E5"/>
    </TabItem>
    <TabItem Header="TabItem">
        <Grid Background="#FFE5E5E5"/>
    </TabItem>
</TabControl>

Answer 1

Issue is PopUp needs some notification to update itself. So, as a workaround you can follow these steps to get it updated.

1. Hook TextChanged event for TextBox where you can raise some notification to popUp to update itself.

2. Next challenge would be how to get to popUp instance from TextBox. For that we can store the popUp in Tag of TextBox which we can access from code.

3. One of the property which results in re-calculation of popUp placement is VerticalOffset which we can set manually to force popUp to recalculate position.

---

That being said here is the code (updated XAML code):

<Popup x:Name="popUp" AllowsTransparency="True"
       IsOpen="{Binding IsChecked, ElementName=Edit}" Placement="Right"
       PlacementTarget="{Binding ElementName=TabGrid}" StaysOpen="False"
       VerticalOffset="30" HorizontalOffset="-20">
    <Grid x:Name="PopupGrid">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Border Width="16" Height="3" Margin="0,0,20,0" HorizontalAlignment="Right" 
                Panel.ZIndex="1" Background="White" />
        <Border Grid.Row="1" Margin="0,-2,0,0" Background="White" BorderBrush="Black" 
                BorderThickness="2">
            <StackPanel>
                <TextBox Name="Text" TextChanged="Text_TextChanged"
                         Tag="{Binding ElementName=popUp}"
                         Text="{Binding Content, ElementName=tabTitle, 
                                  UpdateSourceTrigger=PropertyChanged}" Margin="10"/>
                <Button Width="300"/>
            </StackPanel>
        </Border>
    </Grid>
</Popup>

Code behind:

private void Text_TextChanged(object sender, TextChangedEventArgs e)
{
    Popup popup = ((TextBox)sender).Tag as Popup;
    if (popup != null)
    {
        popup.VerticalOffset += 1;
        popup.VerticalOffset -= 1;
    }
}

Answer 2

I created a behavior for your Popup, using the reflection solution from this question. I'm not sure whether that is a right solution to you... I tested the implementation on .NET3.5 without any issues.

Add the PopupBehavior class to your project:

/// <summary>
/// Attaches alignment behavior to a Popup element.
/// </summary>
public class PopupBehavior : Behavior<Popup>
{
    #region Public fields

    public static readonly DependencyProperty HeaderWidthProperty = DependencyProperty.Register("HeaderWidth", typeof(double), typeof(PopupBehavior), new FrameworkPropertyMetadata(0.0, HeaderWidthChanged));
    public static readonly DependencyProperty PopupConnectionOffsetProperty = DependencyProperty.Register("PopupConnectionOffset", typeof(double), typeof(PopupBehavior), new FrameworkPropertyMetadata(0.0));

    #endregion Public fields

    #region Private fields

    private MethodInfo updateMethod;

    #endregion Private fields

    #region Public properties

    /// <summary>
    /// Gets or sets the Width of the control to subscribe for changes.
    /// </summary>
    public double HeaderWidth
    {
        get { return (double)GetValue(HeaderWidthProperty); }
        set { SetValue(HeaderWidthProperty, value); }
    }

    /// <summary>
    /// Gets or sets the offset of the connection visual of the popup.
    /// </summary>
    public double PopupConnectionOffset
    {
        get { return (double)GetValue(PopupConnectionOffsetProperty); }
        set { SetValue(PopupConnectionOffsetProperty, value); }
    }

    #endregion Public properties

    #region Public constructors

    /// <summary>
    /// Creates an instance of the <see cref="PopupBehavior" /> class.
    /// </summary>
    public PopupBehavior()
    {
        updateMethod = typeof(Popup).GetMethod("Reposition", System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.Instance);
    }

    #endregion Public constructors

    #region Protected methods

    /// <summary>
    /// Called after the behavior is attached to an AssociatedObject.
    /// </summary>
    protected override void OnAttached()
    {
        base.OnAttached();
        var pd = DependencyPropertyDescriptor.FromProperty(Popup.IsOpenProperty, typeof(Popup));
        pd.AddValueChanged(this.AssociatedObject, IsOpenChanged);
    }

    #endregion Protected methods

    #region Private methods

    /// <summary>
    /// The HeaderWidth property has changed.
    /// </summary>
    private static void HeaderWidthChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var b = d as PopupBehavior;
        if (b != null)
            b.UpdateHorizontalOffset();
    }

    /// <summary>
    /// Gets the width of the associated popup.
    /// </summary>
    /// <returns>A double value; width of the popup.</returns>
    /// <remarks>
    /// This method gets the width of the popup's child, since the popup itself has a width of 0
    /// when collapsed.
    /// </remarks>
    /// <exception cref="InvalidOperationException">
    /// Occurs when the child of the popup is not derived from FrameworkElement.
    /// </exception>
    private double GetPopupWidth()
    {
        var child = this.AssociatedObject.Child as FrameworkElement;
        if (child != null)
            return child.ActualWidth;
        else
            throw new InvalidOperationException("Child of Popup is not derived from FrameworkElement");
    }

    /// <summary>
    /// The IsOpen property of the popup has changed.
    /// </summary>
    private void IsOpenChanged(object sender, EventArgs e)
    {
        if (this.AssociatedObject.IsOpen)
            UpdateHorizontalOffset();
    }

    /// <summary>
    /// Updates the HorizontalOffset of the popup.
    /// </summary>
    private void UpdateHorizontalOffset()
    {
        if (this.AssociatedObject.IsOpen)
        {
            var offset = (GetPopupWidth() - PopupConnectionOffset) * -1;
            if (this.AssociatedObject.HorizontalOffset == offset)
                updateMethod.Invoke(this.AssociatedObject, null);
            else
                this.AssociatedObject.HorizontalOffset = offset;
        }
    }

    #endregion Private methods
}

Make some changes in your XAML:

1. Change the Placement property to "Bottom".
2. Bind the PlacementTarget to your button (Edit) .
3. Remove the HorizontalOffset and VerticalOffset properties from your Popup.
4. Assign the Behavior.

Your code should look something like this:

...
xmlns:local="clr-namespace:MyProject"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
...

<Popup
    AllowsTransparency="True"
    IsOpen="{Binding IsChecked, ElementName=Edit}"
    Placement="Bottom"
    PlacementTarget="{Binding ElementName=Edit}"
    StaysOpen="False">
    <i:Interaction.Behaviors>
        <local:PopupBehavior
            HeaderWidth="{Binding ActualWidth, ElementName=tabTitle}"
            PopupConnectionOffset="36" />
    </i:Interaction.Behaviors>
    ...
</Popup>

Change the "local" clr-namespace to that of your project. If not already using, you might need to add a reference to the System.Windows.Interactivity assembly, I installed it using NuGet (Blend.Interactivity.Wpf).

The HeaderWidth purely subscribes to the changes of the header width of the TabItem and PopupConnectionOffset defines the offset from the right side of the Popup to the left side of the 'white stripe Border'.

Note that FrameworkElement should be assignable from the Popup's child value. Also, since the Popup is now targetted to the Edit button instead of the TabGrid, it aligns correctly when the TabItems exceed the parent container, preventing situations as these: