Question

在我的WP 8.1应用程序中，当我将对象列表绑定到以下列表时，平铺处理的动画是我不想要的。

我正在关注教程here，但在那里静态中心线块是硬编码的，我想绑定动态列表并保持瓦片静态/不动画。有没有办法做到这一点？

<ListBox Grid.Row="0" x:Name="listboxDataBinding" ItemsSource="{Binding}">
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <toolkit:WrapPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <toolkit:HubTile Margin="12,12,0,0"                                             
                             Title="{Binding Title}"
                             Message="{Binding ViewName}"
                             Source="{Binding IconUrl}"
                             GroupTag="StaticHubTile">
                        </toolkit:HubTile>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

Answer 1

摆脱<Style>模板中的所有动画：

文档大纲＆gt;右键单击HubTitle＆gt;编辑模板 - ＆gt;编辑副本

<phone:PhoneApplicationPage.Resources>
    <toolkit:TileSizeToHeightConverter x:Key="HeightConverter"/>
    <toolkit:TileSizeToWidthConverter x:Key="WidthConverter"/>
    <Style x:Key="HubTileStyle1" TargetType="toolkit:HubTile">
        <Setter Property="Height" Value="173"/>
        <Setter Property="Width" Value="173"/>
        <Setter Property="Background" Value="{StaticResource PhoneAccentBrush}"/>
        <Setter Property="Foreground" Value="#FFFFFFFF"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="toolkit:HubTile">
                    <Border x:Name="Container">
                        <Border.Resources>
                            <CubicEase x:Key="HubTileEaseOut" EasingMode="EaseOut"/>
                        </Border.Resources>
                        <Border.Height>
                            <Binding Converter="{StaticResource HeightConverter}" Path="Size" RelativeSource="{RelativeSource TemplatedParent}"/>
                        </Border.Height>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="ImageStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition x:Name="ExpandedToSemiexpanded" From="Expanded">
                                    </VisualTransition>
                                    <VisualTransition x:Name="SemiexpandedToExpanded" From="Semiexpanded">
                                    </VisualTransition>
                                    <VisualTransition x:Name="SemiexpandedToCollapsed" From="Semiexpanded" >
                                    </VisualTransition>
                                    <VisualTransition x:Name="CollapsedToExpanded" From="Collapsed" >
                                    </VisualTransition>
                                    <VisualTransition x:Name="ExpandedToFlipped" From="Expanded" >
                                    </VisualTransition>
                                    <VisualTransition x:Name="FlippedToExpanded" From="Flipped" >
                                    </VisualTransition>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Expanded">
                                </VisualState>
                                <VisualState x:Name="Semiexpanded">
                                </VisualState>
                                <VisualState x:Name="Collapsed"/>
                                <VisualState x:Name="Flipped">
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border.Width>
                            <Binding Converter="{StaticResource WidthConverter}" Path="Size" RelativeSource="{RelativeSource TemplatedParent}"/>
                        </Border.Width>
                        <StackPanel x:Name="Viewport" Height="{Binding Size, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}" Width="{Binding Size, Converter={StaticResource WidthConverter}, RelativeSource={RelativeSource TemplatedParent}}">
                            <StackPanel.Projection>
                                <PlaneProjection x:Name="ViewportProjection" CenterOfRotationY="0.25"/>
                            </StackPanel.Projection>
                            <Grid x:Name="TitlePanel" Height="{Binding Size, ConverterParameter=2, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}" RenderTransformOrigin="0.5,0.5" Width="{Binding Size, Converter={StaticResource WidthConverter}, RelativeSource={RelativeSource TemplatedParent}}">
                                <Grid.RowDefinitions>
                                    <RowDefinition/>
                                    <RowDefinition/>
                                </Grid.RowDefinitions>
                                <Grid.RenderTransform>
                                    <CompositeTransform/>
                                </Grid.RenderTransform>
                                <Border Background="{TemplateBinding Background}" Grid.Row="0">
                                    <TextBlock Foreground="{TemplateBinding Foreground}" FontSize="41" FontFamily="{StaticResource PhoneFontFamilyNormal}" LineStackingStrategy="BlockLineHeight" LineHeight="39" Margin="10,0,0,6" TextWrapping="NoWrap" Text="{TemplateBinding Title}" VerticalAlignment="Bottom"/>
                                </Border>
                                <Grid x:Name="BackPanel" Background="{TemplateBinding Background}" Height="{Binding Size, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}" Grid.Row="1" Visibility="Collapsed" Width="{Binding Size, Converter={StaticResource WidthConverter}, RelativeSource={RelativeSource TemplatedParent}}">
                                    <Grid.Projection>
                                        <PlaneProjection CenterOfRotationY="0.5" RotationX="180"/>
                                    </Grid.Projection>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*"/>
                                        <RowDefinition Height="Auto"/>
                                    </Grid.RowDefinitions>
                                    <TextBlock x:Name="NotificationBlock" Foreground="{TemplateBinding Foreground}" FontSize="{StaticResource PhoneFontSizeLarge}" FontFamily="{StaticResource PhoneFontFamilyNormal}" LineStackingStrategy="BlockLineHeight" LineHeight="32" Margin="8,8,0,6" Grid.Row="0" TextWrapping="NoWrap" Text="{TemplateBinding Notification}"/>
                                    <TextBlock x:Name="MessageBlock" Foreground="{TemplateBinding Foreground}" FontSize="{StaticResource PhoneFontSizeNormal}" FontFamily="{StaticResource PhoneFontFamilyNormal}" LineStackingStrategy="BlockLineHeight" LineHeight="23.333" Margin="10,10,10,6" Grid.Row="0" TextWrapping="Wrap" Text="{TemplateBinding Message}"/>
                                    <TextBlock x:Name="BackTitleBlock" Foreground="{TemplateBinding Foreground}" FontSize="{StaticResource PhoneFontSizeNormal}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" Margin="10,0,0,6" Grid.Row="1" TextWrapping="NoWrap" VerticalAlignment="Bottom"/>
                                </Grid>
                                <Border x:Name="Image" Background="{TemplateBinding Background}" Grid.Row="1">
                                    <Image Height="{Binding Size, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}" Source="{TemplateBinding Source}" Stretch="UniformToFill" Width="{Binding Size, Converter={StaticResource WidthConverter}, RelativeSource={RelativeSource TemplatedParent}}"/>
                                </Border>
                            </Grid>
                        </StackPanel>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</phone:PhoneApplicationPage.Resources>

<toolkit:HubTile Title="Test2" Style="{StaticResource HubTileStyle1}"></toolkit:HubTile>

具有绑定的静态HubTile

1 个答案: