TiltEffect 和 LongListSelector答案

【问题标题】：TiltEffect and LongListSelectorTiltEffect 和 LongListSelector
【发布时间】：2011-02-19 18:36:43
【问题描述】：

我正在尝试在 LongListSelector 中使用 Silverlight 工具包中的 TiltEffect。这是在 XAML 中声明元素的方式：

<controls:PivotItem Header="Pivot Item">

  <controls:PivotItem.Resources>

    <DataTemplate x:Key="LongListSelectorGroupHeaderTemplate">
      <Border Background="{StaticResource PhoneAccentBrush}"
              Margin="10,20,0,0"
              HorizontalAlignment="Left"
              VerticalAlignment="Center"
              Height="{StaticResource PhoneFontSizeExtraExtraLarge}"
              Width="{StaticResource PhoneFontSizeExtraExtraLarge}">
        <TextBlock Text="{Binding Name}"
                   Style="{StaticResource PhoneTextExtraLargeStyle}"
                   Foreground="White"
                   VerticalAlignment="Bottom"
                   HorizontalAlignment="Left" />
      </Border>
    </DataTemplate>

    <DataTemplate x:Key="LongListSelectorGroupItemTemplate">
      <Border Background="{StaticResource PhoneAccentBrush}"
              Margin="10"
              Height="{StaticResource PhoneFontSizeExtraExtraLarge}"
              Width="{StaticResource PhoneFontSizeExtraExtraLarge}">
        <TextBlock Text="{Binding Name}"
                   Style="{StaticResource PhoneTextExtraLargeStyle}"
                   Foreground="White"
                   VerticalAlignment="Bottom"
                   HorizontalAlignment="Left" />
      </Border>
    </DataTemplate>

    <DataTemplate x:Key="LongListSelectorItemTemplate">
      <StackPanel Grid.Column="1"
                  VerticalAlignment="Top"
                  Orientation="Horizontal"
                  toolkit:TiltEffect.IsTiltEnabled="True">

        <toolkit:GestureService.GestureListener>
          <toolkit:GestureListener Tap="OnLongListSelectorTapped" />
        </toolkit:GestureService.GestureListener>

        <Image  Source="{Binding ImageSource}"
                MinHeight="32"
                MinWidth="32"
                MaxHeight="48"
                MaxWidth="48" />

        <TextBlock Text="{Binding Name}"
                   Style="{StaticResource PhoneTextExtraLargeStyle}"
                   Margin="12,10,12,0" />

      </StackPanel>
    </DataTemplate>

  </controls:PivotItem.Resources>

  <toolkit:LongListSelector ItemTemplate="{StaticResource LongListSelectorItemTemplate}"
                            GroupHeaderTemplate="{StaticResource LongListSelectorGroupHeaderTemplate}"
                            GroupItemTemplate="{StaticResource LongListSelectorGroupItemTemplate}">

    <toolkit:LongListSelector.GroupItemsPanel>
      <ItemsPanelTemplate>
        <toolkit:WrapPanel />
      </ItemsPanelTemplate>
    </toolkit:LongListSelector.GroupItemsPanel>

  </toolkit:LongListSelector>

</controls:PivotItem>

很遗憾，这不起作用。点击项目时会触发点击手势，但不会播放动画。我尝试在LongListSelector、PivotItem 和父页面上设置TiltEffect.IsTiltEnabled 属性，但它们都不起作用。

我有另一个PivotItem，其中包含一个简单的ListBox，其中ItemTemplate 与上面的LongListSelectorItemTemplate 非常相似。在其DataTemplate 中将TiltEffect.IsTiltEnabled 属性设置为true 可以正常工作。

在LongListSelector 的情况下我做错了什么？

【问题讨论】：

标签： windows-phone-7 silverlight-toolkit

【解决方案1】：

如果您将 ItemTemplate 包装在 ListBoxItem 中，它将相应地倾斜：

<DataTemplate x:Key="LongListSelectorItemTemplate">
  <ListBoxItem>
    <StackPanel Grid.Column="1"
                VerticalAlignment="Top"
                Orientation="Horizontal"
                toolkit:TiltEffect.IsTiltEnabled="True">

      <toolkit:GestureService.GestureListener>
        <toolkit:GestureListener Tap="OnLongListSelectorTapped" />
      </toolkit:GestureService.GestureListener>

      <Image  Source="{Binding ImageSource}"
              MinHeight="32"
              MinWidth="32"
              MaxHeight="48"
              MaxWidth="48" />

      <TextBlock Text="{Binding Name}"
                 Style="{StaticResource PhoneTextExtraLargeStyle}"
                 Margin="12,10,12,0" />
    </StackPanel>
  </ListBoxItem>
</DataTemplate>

【讨论】：

【解决方案2】：

TiltEffect 的工作方式是包含一个将倾斜的类型列表，默认情况下这些是 Button 和 ListBoxItem。然后，它从您打开它的位置向下钻取可视化树，并将效果添加到这些类的所有实例。所以你的 LongListSelector.ItemTemplate 需要包含一个可倾斜的项目。最简单的方法是使用一个不可见的按钮，这样您就不需要编辑您的 TiltEffect 并且可以直接从工具包中使用它。如果你真的不想要这个按钮，那么你需要一些其他的 ContentControl 来包装你的模板，你可以从中触发倾斜。然后将该类添加到 TiltEffect 列表中。

TiltEffect.TiltableItems.Add(typeof(MyTiltingContentControl))

我在按钮上使用这种样式使其不可见。

<Style x:Key="TiltButtonStyle" TargetType="Button">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="{x:Null}" />
        <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
        <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
        <Setter Property="Padding" Value="0,0,0,0"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Background="Transparent">
                        <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="0,8,0,0">
                            <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

【讨论】：

【解决方案3】：

关于如何使用倾斜效果的分步说明可以在MSDN上找到

【讨论】：

感谢您的链接，如果我将TiltEffect.TiltableItems.Add( typeof( LongListSelector ) ); 添加到页面构造函数，它就会生效，但现在整个 LongListSelector 元素会倾斜，而不仅仅是被点击的项目！如何让单个项目倾斜？

【解决方案4】：

在按钮模板中的“样式”标签之间添加这部分代码正是我想要的。使按钮在“倾斜”时保持其颜色。我已将按钮背景设置为 PhoneAccentBrush，因此用户可以通过其主题设置来决定应用的外观。

<Style x:Key="MetroButton" TargetType="Button">
    <Setter Property="Background" Value="{StaticResource PhoneAccentBrush}"/>
    <Setter Property="Height" Value="200"/>
    <Setter Property="Width" Value="200"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid Background="Transparent">
                    <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="0,8,0,0">
                        <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

【讨论】：

【解决方案5】：

TiltEffect.IsTiltEnabled="True" 在 PhoneApplicationPage 元素上，将您的 ItemTemplate 更改为包含一个按钮，它将起作用。

【讨论】：

TiltEffect 不必应用到整个页面，来自 MSDN You can apply the dependency property globally so that all controls in the visual tree inherit the tilt effect, or you can apply the dependency property to only a single control if desired. 而且我不想在我的 ItemTemplate 中有一个按钮！

【解决方案6】：

创建一个继承stackpanel的新控件

public class TiltStackPanel : StackPanel
    {
        public TiltStackPanel() {}
    }

然后添加这个控件TiltEffect.cs

static TiltEffect()
    {
      // For extra fun, add this to the list: typeof(Microsoft.Phone.Controls.PhoneApplicationPage)
      TiltableItems = new List<Type>() { typeof(ButtonBase), typeof(ListBoxItem), typeof(TiltStackPanel)};
      UseLogarithmicEase = false;
    }

在你的 longlistselector 模板中使用这个 TiltStackPanel

【讨论】：

我尝试这样做，但由于某种原因，TiltableStackPanel 中的各个 StackPanel 都在倾斜，而不是整个事物作为单个实体移动。此外，您无需编辑 TiltEffect 源，只需在代码中添加 TiltEffect.TiltableItems.Add( typeof( TiltableStackPanel ) );。
使用 TiltStackPanel 作为模板的主要包装器，使其成为一个实体。然后在里面，你可以使用常规的stackpanel