2

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

2 Answers 2

0

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.

1
0

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">
    <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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.