WPF旋转木马/旋转元件

Question

我正在开发一款使用相机拍摄自动照片的软件。我希望用户能够设置照片间隔。我希望看起来像一些旋转木马一样工作。

这是它应该是什么样子：

当我刷卡（或用鼠标拖动），应该在给定方向移动：

所选项目应始终中间，如果它是最后一个，第一个应该向右旋转（反之亦然）。

我已经添加了基本的滑动/拖动功能，它可以识别何时执行了操作以及在哪个方向上。 Hovewer，我不知道如何实际移动物品。

目前，该项目的定义是这样的：

<StackPanel x:Name="countdownContainer" Background="{StaticResource GuiSideBarBackgroundColor}" Orientation="Horizontal" HorizontalAlignment="Center"> 
    <TextBlock Style="{StaticResource CountdownElement}" Text="3s"/> 
    <TextBlock Style="{StaticResource CountdownElementSelected}" Text="5s"/> 
    <TextBlock Style="{StaticResource CountdownElement}" Text="10s"/> 
</StackPanel> 

我知道动画一些基础知识，但我不知道如何动画他们就像我需要在这里。 使用其他控件而不是StackPanel和TextBlock元素会更好吗？

Answer 1

我基于自己上面声明的样式，但未包含在代码中。您可以在纯xaml和视图模型中执行此操作。这将是一个非常简单粗暴的例子。或者，您可以实现一个自定义控件，该控件继承某个类的层次结构，而不是控制哪个默认cust控件模板提供的默认值。我建议您查看MVVM模式和Galaxoft MVVM Light。在这个例子中，我排除了touch gestures，它们很容易实现，使用EventToCommand可以直接在你的vm或custcontrol *中使用它们。

资源

<ItemsPanelTemplate x:Key="YourItemsPanelTemplate"> 
    <VirtualizingStackPanel Orientation="Horizontal"/> 
</ItemsPanelTemplate> 

<DataTemplate x:Key="YourDataTemplate"> 
    <TextBlock Style="{StaticResource CountdownElement}" Text="{Binding .}" x:Name="PART_TextBlock"/> 
    <DataTemplate.Triggers> 
     <DataTrigger 
     Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType= {x:Type ListViewItem}},Path=IsSelected}" Value="True"> 
      <!-- Here I'm just changing your fontsize, do whatever you want here :) -->          
      <Setter Property="FontSize" Value="34" TargetName="PART_TextBlock"/> 
     </DataTrigger> 
    </DataTemplate.Triggers> 
</DataTemplate> 

<Style x:Key="YourContainerStyle" TargetType="ListViewItem"> 
    <Setter Property="HorizontalContentAlignment" Value="Center" /> 
    <Setter Property="VerticalContentAlignment" Value="Bottom" /> 
    <Setter Property="Background" Value="Transparent" /> 
    <Setter Property="BorderThickness" Value="0" /> 
    <Setter Property="Margin" Value="10,0,10,0" /> 
    <Setter Property="Padding" Value="0" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type ListViewItem}"> 
       <ContentPresenter x:Name="PART_ContentPresenter" 
           HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
           Margin="{TemplateBinding Padding}" 
           Content="{TemplateBinding Content}" 
           ContentTemplate="{StaticResource YourDataTemplate}" /> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

<Style x:Key="YourListBoxStyle" TargetType="ListBox"> 
    <Setter Property="ItemContainerStyle" Value="{StaticResource YourContainerStyle}"/> 
    <Setter Property="ItemTemplate" Value="{StaticResource YourDataTemplate}"/> 
    <Setter Property="ItemsPanel" Value="{StaticResource YourItemsPanelTemplate}"/> 
</Style> 

还有就是你的风格，现在的XAML代码，请注意，我在这里绑定你的项目，并使用上述的样式。

XAML

<Grid> 
    <ListView Background="{StaticResource GuiSideBarBackgroundColor}" 
     Style="{StaticResource YourListBoxStyle}" 
     ItemsSource="{Binding CountDownElements}" 
     SelectedItem="{Binding SelectedItem, Mode=TwoWay}"/> 
<Grid> 

视图模型 Remeber设置此作为的DataContext你的看法，或将代码复制到你的代码隐藏。

public class YourViewModel : INotifyPropertyChanged 
{ 
    private ObservableCollection<string> countDownElements = new ObservableCollection<string> { "1s", "2s", "3s", "4s", "5s", "6s", "7s", "8s", "9s", "10s" }; 
    private string selectedItem; 

    public ObservableCollection<string> CountDownElements 
    { 
     get { return countDownElements; } 
     set 
     { 
      if (Equals(value, countDownElements)) return; 
      countDownElements = value; 
      OnPropertyChanged(); 
     } 
    } 

    public string SelectedItem 
    { 
     get { return selectedItem; } 
     set 
     { 
      if (value == selectedItem) return; 
      selectedItem = value; 
      OnPropertyChanged(); 
     } 
    } 

    public event PropertyChangedEventHandler PropertyChanged; 

    [NotifyPropertyChangedInvocator] // remove if you don't have R# 
    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null) 
    { 
     PropertyChangedEventHandler handler = PropertyChanged; 
     if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName)); 
    } 
} 

输出

希望它可以帮助或至少踢你在正确的方向！:)

干杯

了Stian