Windows phone 7 倾斜效应与长列表选择器

我正在尝试在

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.istilEnabled

属性，但均无效

我还有另一个

数据透视项

，它包含一个简单的

列表框

，带有一个

项目模板

，与上面的

LongListSelectorItemTemplate

非常相似。在其

DataTemplate

中，将

TiltEffect.istilEnabled

属性设置为

true

，可以根据需要工作

---

在使用长列表选择器的情况下，我做错了什么？

有关如何使用倾斜效果的逐步说明可在

TiltEffect上找到。在PhoneApplicationPage元素上，istilEnabled=“True”出现，将ItemTemplate更改为包含一个按钮，它就会工作。

TiltEffect的工作方式是，它包含一个将倾斜的类型列表，按deafult的说法，这些类型是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>

---

如果将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>

---

创建新控件继承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;
    }

静态倾斜效果（）
{
//要获得更多乐趣，请将其添加到列表中：typeof（Microsoft.Phone.Controls.PhoneApplicationPage）
TiltableItems=新列表（）{typeof（ButtonBase）、typeof（ListBoxItem）、typeof（TiltStackPanel）}；
UseIcease=false；
}

---

在longlistselector的模板中使用这个TiltStackPanel，在按钮模板的“Style”标记之间添加这部分代码正是我想要的。使按钮在“倾斜”时保持其颜色。我已经将按钮背景设置为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>

TiltEffect不必应用于整个页面，从MSDN

可以全局应用dependency属性，以便可视化树中的所有控件都继承TiltEffect，或者如果需要，可以仅将dependency属性应用于单个控件。

而且我不希望在ItemTemplate中使用按钮！谢谢你的链接，如果我添加

TiltEffect.TiltableItems.add（typeof（LongListSelector））对页面构造函数生效，但现在整个LongListSelector元素倾斜，而不仅仅是点击的项！如何使单个项目倾斜？我尝试过这样做，但出于某种原因，TiltableStackPanel中的各个StackPanel都在倾斜，而不是整个项目作为单个实体移动。另外，您不需要编辑TiltEffect源代码，只需添加
TiltEffect.TiltableItems.add（typeof（TiltableStackPanel））在代码中。使用TiltStackPanel作为模板的主包装，使其成为一个实体。然后在此内部，您可以使用常规stackpanel