How do I prevent a WPF combobox popup from detaching when the combobox is moving?

Question

I've got a textbox stacked on top of a ComboBox. The TextBox gets taller (via animation) when it gets focus, and shrinks back down when it loses focus.

The problems start when the TextBox loses focus to the ComboBox. When this happens, the selection Popup (the part that "drops down") appears just below the ComboBox, as expected, but as the ComboBox starts moving upward (since the TextBox above is now shrinking), the selection Popup does not follow along, and now appears detached from the ComboBox.

Presumably this is because the selection Popup (like all Popups) is not part of the same visual tree as the TextBox and ComboBox, so its layout is not recalculated as the animation progresses.

How can I keep my ComboBox whole?

Below is a snippet you can paste into XamlPad to reproduce this. Any help is much appreciated!

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
  <StackPanel Width="100" Orientation="Vertical">
    <TextBox Height="19">
      <TextBox.Triggers>
        <EventTrigger RoutedEvent="UIElement.GotFocus">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard TargetProperty="Height">
                <DoubleAnimation From="19" To="100" Duration="0:0:0.2"/>
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>
        <EventTrigger RoutedEvent="UIElement.LostFocus">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard TargetProperty="Height">
                <DoubleAnimation From="100" To="19" Duration="0:0:0.2"/>
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>
      </TextBox.Triggers>
    </TextBox>
    <ComboBox>
      <ComboBoxItem>Item 1</ComboBoxItem>
      <ComboBoxItem>Item 2</ComboBoxItem>
    </ComboBox>
  </StackPanel>
</Page>

This has also been posted as a bug at the Microsoft Connect site:

https://connect.microsoft.com/VisualStudio/feedback/ViewFeedback.aspx?FeedbackID=422254

Answer 1

I don't know that there is a workaround here. However, I would absolutely classify this as a bug, and file it at the Microsoft Connect site.

Answer 2

This is an extremely lame workaround, but you could make the ComboBox's Popup open relative to the TextBox instead of to the ComboBox:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt;
    <StackPanel Width="100" Orientation="Vertical">
        <TextBox x:Name="myTextBox" Height="19">
            <TextBox.Triggers>
                <EventTrigger RoutedEvent="UIElement.GotFocus">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard TargetProperty="Height">
                                <DoubleAnimation Duration="0:0:0.2" From="19" To="100"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <EventTrigger RoutedEvent="UIElement.LostFocus">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard TargetProperty="Height">
                                <DoubleAnimation Duration="0:0:0.2" From="100" To="19"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </TextBox.Triggers>
        </TextBox>
        <ComboBox>
            <ComboBox.Resources>
                <Style TargetType="{x:Type Popup}">
                    <Setter Property="PlacementTarget" Value="{Binding ElementName=myTextBox}"/>
                    <Setter Property="PlacementRectangle" Value="0,39,0,0"/>
                </Style>
            </ComboBox.Resources>
            <ComboBoxItem>Item 1</ComboBoxItem>
            <ComboBoxItem>Item 2</ComboBoxItem>
        </ComboBox>
    </StackPanel>
</Page>