Измените размер WPF UserControl, чтобы все дети не «прыгали»

Question

Есть ли способ изменить размер пользовательского элемента управления WPF таким образом, чтобы дочерние элементы управления не переворачивались?

У меня есть такой раскадровка:

<Storyboard>
    <DoubleAnimation Storyboard.TargetProperty="Height" Storyboard.TargetName="MyUserControl" To="145" From="0" Duration="0:0:1" />
</Storyboard>

Это работаетотличный;он переводит мой элемент управления с высоты ноль на высоту 145 - проблема в том, что при изменении свойства высоты все дочерние элементы управления внутри начинают прыгать, я подозреваю, из-за своих свойств HorizontalAlignment и VerticalAlighment.Есть ли способ, которым я могу отключить это, пока анимация не закончится?

Я пытаюсь создать иллюзию этого UserControl, «скользящего» в поле зрения - так что я открыт для других подходов, если яидет об этом неправильно.

Answer 1

Все «прыгает вокруг», потому что каждый раз, когда Height элемента управления изменяется, все содержащиеся элементы управления перемещаются в соответствии с новым доступным пространством.

Для достижения желаемого эффекта вы должны использовать RenderTransform вместо изменения фактического Height элемента управления.

Вот как вы можете это сделать.Сначала добавьте ScaleTransform в качестве значения RenderTransform свойства вашего элемента управления:

<MyUserControl.RenderTransform>
    <ScaleTransform ScaleY="0" />
</MyUserControl.RenderTransform>

Затем измените целевое свойство вашей анимации, чтобы изменить свойство ScaleY преобразования:

<Storyboard>
    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleY)" Storyboard.TargetName="MyUserControl" To="145" Duration="0:0:1" />
</Storyboard>

Обновление:

Другим способом достижения эффекта «скольжения в поле зрения» является использование TranslateTransform с отрицательным значением Y:

<MyUserControl.RenderTransform>
   <TranslateTransform Y="-1000" />
</MyUserControl.RenderTransform>

А затем анимируйте его свойство Y до 0:

<Storyboard>
    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.(TranslateTransform.Y)" Storyboard.TargetName="MyUserControl" To="0" Duration="0:0:1" />
</Storyboard>

Answer 2

Когда вы анимируете высоту или ширину, UserControl сообщает своим дочерним элементам также перенастроить, так работает система макетов в WPF. «Прыжки вокруг» будут действительно зависеть от типа макета (Grid, StackPanel и т. Д.), Который вы используете.

Но, похоже, для вашего сценария будет лучше использовать анимацию RenderTransform ScaleTransform ScaleY вместо анимации высоты. Rendertransform не помешает вашей компоновке UserControl.

Answer 3

Чтобы добавить к обновленному ответу Павлова, мне пришлось вместо этого использовать пустой CompositeTransform. Возможно, это связано с использованием последнего обновления 1 для Blend для Visual Studio 2012, но это сработало (для Windows Phone 8):

    <MyUserControl.RenderTransform>
        <CompositeTransform />
    </MyUserControl.RenderTransform>