4

Есть скрытый StackPanel, имитирующий нечто вроде выпадающего списка. Он должен появляться аннимируя свою прозрачность от 0 до 1, ширину от 100 до 264 и высоту от 30 до автоматической. Пишу код:

<StackPanel x:Name="ContractSelect_Panel"
            Width="100"
            Height="30"
            Opacity="0">

    <StackPanel.Resources>
        <Storyboard x:Name="ShowModal">

            <DoubleAnimation Storyboard.TargetName="ContractSelect_Panel"
                             Storyboard.TargetProperty="Opacity"
                             To="1" Duration="0:0:0.15"/>

            <DoubleAnimation Storyboard.TargetName="ContractSelect_Panel"
                             Storyboard.TargetProperty="Width"
                             To="264" Duration="0:0:0.15"/>

            <DoubleAnimation Storyboard.TargetName="ContractSelect_Panel"
                             Storyboard.TargetProperty="Height"
                             To="Auto" Duration="0:0:0.15"/>
        </Storyboard>
    </StackPanel.Resources>
</StackPanel>

Проблема в том, что прозрачность анимируется нормально, а вот ширина как была 100 так и остается. Значение "Auto" для параметра Height вообще выдает исключение XamlParseException.

UPD. Код немного исправлен, в частности StackPanel обернут в Border для границы и скругления углов. Анимация перенесена на Border. Grid - это подложка под всплывающее окно. Теперь он выглядит так:

    <Grid x:Name="ModalLayout"
          Tapped="ModalLayout_Tapped"
          Grid.Row="0"
          Grid.RowSpan="3"
          Background="#00FFFFFF"
          Visibility="Collapsed">

        <Border x:Name="ContractSelect_Border"
                Background="#FFF4F4F4"
                Opacity="0"
                Width="100"
                MinHeight="30"
                VerticalAlignment="Top"
                Margin="0 75 0 0"
                CornerRadius="8"
                BorderBrush="#C9CED3"
                BorderThickness="1">
            <Border.Resources>
                <Storyboard x:Name="ShowModal">
                <DoubleAnimation Storyboard.TargetName="ContractSelect_Border"
                                    Storyboard.TargetProperty="Opacity"
                                    To="1" Duration="0:0:0.15"/>
                <DoubleAnimation Storyboard.TargetName="ContractSelect_Border"
                                    Storyboard.TargetProperty="Width"
                                    To="264" Duration="0:0:0.15"/>
                </Storyboard>

                <Storyboard x:Name="CloseModal">
                <DoubleAnimation Storyboard.TargetName="ContractSelect_Border"
                                    Storyboard.TargetProperty="Opacity"
                                    To="0" Duration="0:0:0.15"/>
                </Storyboard>
            </Border.Resources>

            <StackPanel x:Name="ContractSelect_Panel"/>
        </Border>
    </Grid>
15
  • 1
    А Auto и не должно работать. Auto по сути есть NaN, а как вы предлагаете анимировать double-величину к NaN?
    – VladD
    8 фев 2016 в 11:35
  • В таком случае не могли бы вы подсказать, как сделать правильно, если заранее не известно значение высоты? Может как-то From="0" To="{this.ActualHeight}"? К сожалению пока плохо дается синтаксис расширений.
    – user200141
    8 фев 2016 в 11:40
  • 1
    Вот: pastebin.com/GhTYWJhH, срабатывает по клику в зелёный прямоугольник.
    – VladD
    9 фев 2016 в 12:42
  • 1
    Ну, можно хитростями заставить поделить пополам (в Grid выделить две колонки размера *, например). Но это скорее всего слишком окольный путь, проще сделать конвертер: pastebin.com/wRTAGfxE. Используется так: {Binding ActualWidth, ElementName=Arena, Converter={StaticResource Scaler}, ConverterParameter={src:Double 0.5}}.
    – VladD
    11 фев 2016 в 12:48
  • 1
    Или так :) Обычно тенденция такая, что весь layout management выносят в XAML, так что подход с конвертером не так уж и плох. Но если вы вычисляете координаты в коде, уж проще это делать там. Преимущество связки Binding+конвертер в том, что когда исходная ширина изменяется, привязанная к ней, даже через конвертер, автоматически подхватывает изменения. Ловить в коде изменения ширины обычно не очень удобно.
    – VladD
    12 фев 2016 в 9:02

2 ответа 2

5

У вас Storyboard.TargetName="ContractSelect_Panel" отличается от <StackPanel x:Name="Select_Panel"

5
  • Ой, ошибка закралась в процессе перепечатывания, сама разработка на другой машине. На самом деле в самом коде имена идентичны, сейчас поправлю вопрос.
    – user200141
    8 фев 2016 в 11:37
  • @Олег Не уверен получится или нет, но попробуйте найти высоту родителя StackPanel 8 фев 2016 в 12:43
  • Не получилось. Какой задан элементу начальный Height, с тем и показывается
    – user200141
    9 фев 2016 в 6:19
  • выложите код всей страницы, если ли вокруг stackpanel grid или еще чтото? 9 фев 2016 в 10:54
  • Код всей страницы очень длинный, выложил ту часть, где подложка на весь экран и собственно само модальное окно в нем. Сам код претерпел некоторые изменения, в частности StackPanel теперь обернут в Border и вся анимация на нем теперь, проблема сохраняется. Прозрачность работает как надо, ширина и высота не хотят
    – user200141
    9 фев 2016 в 12:27
4

Проблема решилась добавлением к анимации EnableDependentAnimation="True".

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.