windows phone 7 - TiltEffect और LongListSelector




windows-phone-7 silverlight-toolkit (4)

TiltEffect.IsTiltEnabled = "सत्य" फोनअनुप्रयोग पृष्ठ तत्व पर जाता है, एक बटन को शामिल करने के लिए अपना आइटम बदलें और यह काम करेगा।

मैं एक LongListSelector में सिल्वरलाइट टूलकिट से TiltEffect का उपयोग करने की कोशिश कर रहा LongListSelector । एक्सएएमएल में यह तत्व कैसे घोषित किया जाता है: 

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

दुर्भाग्य से, यह काम नहीं कर रहा है किसी आइटम पर टैप करते समय टैप इशारा आग लग जाती है, लेकिन एनीमेशन नहीं खेलता है। मैंने TiltEffect.IsTiltEnabled सेट करने की कोशिश की है। LongListSelector , PivotItem और माता-पिता के पृष्ठ पर कोई संपत्ति नहीं है, लेकिन उनमें से कोई भी काम नहीं करता है

मेरे पास एक अन्य PivotItem है जिसमें एक ItemTemplate ListBox साथ एक साधारण LongListSelectorItemTemplate है जो कि ऊपर दी LongListSelectorItemTemplate समान है। TiltEffect.IsTiltEnabled संपत्ति को अपने DataTemplate भीतर true करने के लिए वांछित के रूप में काम करता है।

क्या मैं LongListSelector के मामले में गलत कर रहा हूँ?

जिस प्रकार TiltEffect काम करता है वह उस प्रकार की एक सूची है जिसमें यह झुकाव होगा, बहिरा द्वारा ये बटन और ListBoxItem हैं यह तब दृश्य पेड़ के माध्यम से नीचे चला जाता है जहां से आप इसे चालू करते हैं और प्रभावों को उन वर्गों के सभी उदाहरणों में जोड़ता है। इसलिए आपके लांगलिस्ट सिलेक्टर। आईटम टेम्पलेट में एक झुकाव वाला आइटम शामिल होना आवश्यक है ऐसा करने का सबसे आसान तरीका एक अदृश्य बटन के साथ है, इस तरह आपको अपने TiltEffect को संपादित करने की आवश्यकता नहीं है और इसे टूलकिट से सीधे उपयोग कर सकते हैं। यदि आप वास्तव में बटन नहीं चाहते हैं, तो आपको अपने टेम्पलेट को लपेटने के लिए कुछ अन्य कंटेंट कंट्रोल की आवश्यकता है जिससे आप झुकाव को ट्रिगर कर सकते हैं। फिर उस वर्ग को 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>

एक नया नियंत्रण बनाने के लिए 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;
    }

इस TiltStackPanel का उपयोग करें अपने टेम्पलेट के longlistselector के अंदर

यदि आप एक 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>





windows-phone-7   silverlight-toolkit