繁体   English   中英

Windows应用商店-XAML-动画ListView详细信息(拆分页面)

[英]Windows Store App - XAML - Animate ListView Details (Split Page)

我有使用“拆分页面”模板的页面,并且无论何时在ListView选择其他项目时,我都希望它为细节设置动画

我的XAML

    <!-- Vertical scrolling item list -->
    <ListView
        x:Name="itemListView"
        AutomationProperties.AutomationId="ItemsListView"
        AutomationProperties.Name="Items"
        TabIndex="1"
        Grid.Row="1"
        Margin="0,0,0,0"
        Padding="120,0,0,60"
        ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
        IsSwipeEnabled="False"
        SelectionChanged="ItemListView_SelectionChanged">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid Margin="6">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Image Source="{Binding ImagePathSmall}" Stretch="None" AutomationProperties.Name="{Binding Priority}" />
                    <StackPanel Grid.Column="1" Margin="10,0,0,0">
                        <TextBlock Text="{Binding Category}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap" MaxHeight="40"/>
                        <TextBlock Text="{Binding Patient}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap"/>
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>


    <!-- Details for selected item -->
    <ScrollViewer
        x:Name="itemDetail"
        AutomationProperties.AutomationId="ItemDetailScrollViewer"
        Grid.Column="1"
        Padding="60,0,66,0"
        DataContext="{Binding SelectedItem, ElementName=itemListView}"
        HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto"
        ScrollViewer.HorizontalScrollMode="Disabled" ScrollViewer.VerticalScrollMode="Enabled"
        ScrollViewer.ZoomMode="Disabled" Grid.Row="1">

        <Grid x:Name="itemDetailGrid" Margin="0,60,0,50">
            <Grid.ChildrenTransitions>
                <TransitionCollection>
                    <ContentThemeTransition/>
                </TransitionCollection>
            </Grid.ChildrenTransitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Priority}"  Width="128" Height="128"/>
            <StackPanel x:Name="itemDetailTitlePanel" Grid.Row="1" Grid.Column="1">
                <TextBlock x:Name="itemTitle" Margin="0,-10,0,0" Text="{Binding Category}" Style="{StaticResource SubheaderTextBlockStyle}"/>
                <TextBlock x:Name="itemSubtitle" Margin="0,0,0,20" Text="{Binding Patient}" Style="{StaticResource SubtitleTextBlockStyle}"/>
            </StackPanel>
            <TextBlock Grid.Row="2" Grid.ColumnSpan="2" Margin="0,20,0,0" Text="{Binding TaskDetails}" Style="{StaticResource BodyTextBlockStyle}"/>
        </Grid>
    </ScrollViewer>

通过阅读快速入门:使用库动画(使用C#/ VB / C ++和XAML的Windows Runtime应用程序)对UI进行动画处理,我应该能够通过添加以下内容达到预期的效果

            <Grid.ChildrenTransitions>
                <TransitionCollection>
                    <ContentThemeTransition/>
                </TransitionCollection>
            </Grid.ChildrenTransitions>

虽然没有达到预期的效果。 qnyone可以告诉我为什么以及如何达到预期的效果吗?

将其更改为此具有预期的效果

    <!-- Vertical scrolling item list -->
    <ListView
        x:Name="itemListView"
        AutomationProperties.AutomationId="ItemsListView"
        AutomationProperties.Name="Items"
        TabIndex="1"
        Grid.Row="1"
        Margin="0,0,0,0"
        Padding="120,0,0,60"
        ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
        IsSwipeEnabled="False"
        SelectionChanged="ItemListView_SelectionChanged">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid Margin="6">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Image Source="{Binding ImagePathSmall}" Stretch="None" AutomationProperties.Name="{Binding Priority}" />
                    <StackPanel Grid.Column="1" Margin="10,0,0,0">
                        <TextBlock Text="{Binding Category}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap" MaxHeight="40"/>
                        <TextBlock Text="{Binding Patient}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap"/>
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>


    <!-- Details for selected item -->

    <ContentControl x:Name="itemDetail" Content="{Binding SelectedItem, ElementName=itemListView}" Grid.Row="1" Grid.Column="1"   >
        <ContentControl.ContentTemplate>
            <DataTemplate>
                <Grid x:Name="itemDetailGrid" Margin="0,60,0,50">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>

                    <Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Priority}"  Width="128" Height="128"/>
                    <StackPanel x:Name="itemDetailTitlePanel" Grid.Row="1" Grid.Column="1">
                        <TextBlock x:Name="itemTitle" Margin="0,-10,0,0" Text="{Binding Category}" Style="{StaticResource SubheaderTextBlockStyle}"/>
                        <TextBlock x:Name="itemSubtitle" Margin="0,0,0,20" Text="{Binding Patient}" Style="{StaticResource SubtitleTextBlockStyle}"/>
                    </StackPanel>
                    <TextBlock Grid.Row="2" Grid.ColumnSpan="2" Margin="0,20,0,0" Text="{Binding TaskDetails}" Style="{StaticResource BodyTextBlockStyle}"/>
                </Grid>
            </DataTemplate>
        </ContentControl.ContentTemplate>
        <ContentControl.ContentTransitions>
            <TransitionCollection>
                <ContentThemeTransition HorizontalOffset="100"/>
            </TransitionCollection>
        </ContentControl.ContentTransitions>
    </ContentControl>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM