1

Есть верстка в XAML, в которой есть три TextBlock и один ComboBox. Нужно, чтобы при переходе на эту страницу, Opacity у всех элементов, кроме первого TextBox (Title) было 0. А сам Title делал бы отступ 50 вверх от того, места где он сейчас находится и перемещался на своё место (через 3 секунды - отступ вверх=0, анимация перехода). После того, как Title занял своё место (завершил анимацию), у всех элементов Opacity=1.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="0.35*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Grid Grid.Row="0">
        <TextBlock Text="Заголовок страницы" HorizontalAlignment="Center" VerticalAlignment="Top" FontSize="35" Padding="0 10 0 25" FontFamily="Calibri Bold" Name="Title"/>
        <TextBlock Text="Подзаголовок" HorizontalAlignment="Center" VerticalAlignment="Top" FontSize="25" Padding="0 50 0 0" FontFamily="Calibri" Name="SubTitle"/>
    </Grid>

    <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="0.5*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <StackPanel Grid.Row="0" Orientation="Horizontal" Grid.ColumnSpan="4" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="25">
                <TextBlock Text="Варианты: " FontSize="18" Name="Options"/>
            <ComboBox SelectedIndex="1" Padding="2" FontSize="18" SelectionChanged="ComboBox_SelectionChanged" Name="dm">
                <ComboBoxItem>2</ComboBoxItem>
                <ComboBoxItem>3</ComboBoxItem>
                <ComboBoxItem>4</ComboBoxItem>
                <ComboBoxItem>5</ComboBoxItem>
            </ComboBox>
        </StackPanel>
</Grid>

1 ответ 1

2

Ничего сложного нет. Создаем две анимации: одну для заголовка, другую - для Grid содержащий элементы, которые через 3 секунды после загрузки страницы нужно отобразить.

<Storyboard x:Key="titleAnimation" AutoReverse="True">
    <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="Margin">
        <SplineThicknessKeyFrame KeyTime="00:00:01.5" Value="50"/>
    </ThicknessAnimationUsingKeyFrames>
</Storyboard>

<Storyboard x:Key="contentAnimation">
    <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" BeginTime="00:00:03"/>
</Storyboard>

дальее запускаем их по событию Window.Loaded:

<TextBlock Text="Заголовок страницы" HorizontalAlignment="Center" VerticalAlignment="Top" FontSize="35" Padding="0 10 0 25" FontFamily="Calibri Bold" Name="Title"  >
    <TextBlock.Style>
        <Style TargetType="TextBlock">
            <Style.Triggers>
                <EventTrigger RoutedEvent="Window.Loaded">
                    <EventTrigger.Actions>
                        <BeginStoryboard Storyboard="{StaticResource titleAnimation}"/>         
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </TextBlock.Style>
</TextBlock>


<Grid Grid.Row="1" Opacity="0">
    <Grid.Style>
        <Style TargetType="Grid">
            <Style.Triggers>
                <EventTrigger RoutedEvent="Window.Loaded">
                    <EventTrigger.Actions>
                        <BeginStoryboard Storyboard="{StaticResource contentAnimation}"/>     
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Grid.Style>
    ...
</Grid>

готово!


введите сюда описание изображения

5
  • Не могли бы Вы пояснить, за счёт чего двигается надпись?
    – A.Hall
    19 мар 2018 в 13:21
  • @A.Hall засчет анимирования свойства Margin
    – Gardes
    19 мар 2018 в 13:32
  • Не подскажите, как именно их нужно внедрить в код. При попытке добавить Storyboard, у меня показывает ошибку: Значение типа Storyboard не может быть добавлено к коллекции или словарю типа UIElementCollection
    – A.Hall
    19 мар 2018 в 15:51
  • Сами анимации вы расположили в ресурсах? Подключение описано в ответе.
    – Gardes
    19 мар 2018 в 17:28
  • Как расположить анимации в ресурсах?
    – A.Hall
    25 мар 2018 в 13:34

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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