Question

我正在尝试使用帮助pathlistbox创建类似轮播列表框的内容。我希望获得与图片中相同的效果，就像Spotify中的情况一样。

我的想法是：列表框只显示五个项目，然后按下下一个/上一个滚动按钮以及其他五个项目。谢谢你的建议。

我想实现这个目标：

到目前为止，我只有这个：

这是我的源代码：

  <Style x:Key="PathListBoxItemStyle1"
           TargetType="{x:Type ec:PathListBoxItem}">
        <Setter Property="HorizontalContentAlignment"
                Value="Left" />
        <Setter Property="VerticalContentAlignment"
                Value="Top" />
        <Setter Property="Background"
                Value="Transparent" />
        <Setter Property="BorderThickness"
                Value="1" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ec:PathListBoxItem}">
                    <Grid Height="316"
                          Width="199">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0"
                                                         To="0.35"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Storyboard.TargetName="fillColor" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0"
                                                         To="0.55"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Storyboard.TargetName="contentPresenter" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected" />
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0"
                                                         To="0.75"
                                                         Storyboard.TargetProperty="Opacity"
                                                         Storyboard.TargetName="fillColor2" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0"
                                                                       Storyboard.TargetProperty="Visibility"
                                                                       Storyboard.TargetName="FocusVisualElement">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unfocused" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <pathListBoxUtils:PathListBoxItemTransformer VerticalAlignment="Top" UseGlobalOffset="True"  
                                                                     OpacityRange="1,1" 
                                                                     ScaleRange="1,1"
                                                                     IsCentered="True">
                            <pathListBoxUtils:PathListBoxItemTransformer.Ease>
                                <SineEase EasingMode="EaseOut" />
                            </pathListBoxUtils:PathListBoxItemTransformer.Ease>
                            <Grid Background="{TemplateBinding Background}"
                                  RenderTransformOrigin="0,0">
                                <Grid.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform>
                                            <ScaleTransform.ScaleY>
                                                <Binding Path="IsArranged"
                                                         RelativeSource="{RelativeSource TemplatedParent}">
                                                    <Binding.Converter>
                                                        <ec:IsArrangedToScaleConverter />
                                                    </Binding.Converter>
                                                </Binding>
                                            </ScaleTransform.ScaleY>
                                            <ScaleTransform.ScaleX>
                                                <Binding Path="IsArranged"
                                                         RelativeSource="{RelativeSource TemplatedParent}">
                                                    <Binding.Converter>
                                                        <ec:IsArrangedToScaleConverter />
                                                    </Binding.Converter>
                                                </Binding>
                                            </ScaleTransform.ScaleX>
                                        </ScaleTransform>
                                        <SkewTransform />
                                        <RotateTransform Angle="{Binding OrientationAngle, RelativeSource={RelativeSource TemplatedParent}}" />
                                        <TranslateTransform />
                                    </TransformGroup>
                                </Grid.RenderTransform>
                                <Rectangle x:Name="fillColor"
                                           Fill="#FFBADDE9"
                                           IsHitTestVisible="False"
                                           Opacity="0"
                                           RadiusY="1"
                                           RadiusX="1" />
                                <Rectangle x:Name="fillColor2"
                                           Fill="#FFBADDE9"
                                           IsHitTestVisible="False"
                                           Opacity="0"
                                           RadiusY="1"
                                           RadiusX="1" />
                                <ContentPresenter x:Name="contentPresenter"
                                                  ContentTemplate="{TemplateBinding ContentTemplate}"
                                                  Content="{TemplateBinding Content}"
                                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                  Margin="{TemplateBinding Padding}" />
                                <Rectangle x:Name="FocusVisualElement"
                                           RadiusY="1"
                                           RadiusX="1"
                                           Stroke="#FF6DBDD1"
                                           StrokeThickness="1"
                                           Visibility="Collapsed" />
                            </Grid>
                        </pathListBoxUtils:PathListBoxItemTransformer>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
 <!--ITEMS-->
    <ec:PathListBox x:Name="pathListBox"
                    Grid.Column="1"
                    ItemTemplate="{StaticResource DataTemplate1}"
                    ItemsSource="{Binding PlaylistCvs,IsAsync=True}"
                    WrapItems="True"  
                    ItemContainerStyle="{DynamicResource PathListBoxItemStyle1}">
        <ec:PathListBox.LayoutPaths>
            <ec:LayoutPath SourceElement="{Binding ElementName=path}"
                           Distribution="Even" 
                           FillBehavior="NoOverlap" 
                           Start="0.1"
                           Capacity="5" />
        </ec:PathListBox.LayoutPaths>
        <i:Interaction.Behaviors>
            <pathListBoxUtils:PathListBoxScrollBehavior Duration="0:0:0.8" >
                <pathListBoxUtils:PathListBoxScrollBehavior.Ease>
                    <QuinticEase EasingMode="EaseOut" />
                </pathListBoxUtils:PathListBoxScrollBehavior.Ease>
                <i:Interaction.Triggers>
                    <i:EventTrigger SourceName="previousButton"
                                    EventName="Click">
                        <i:InvokeCommandAction CommandName="DecrementCommand" />
                    </i:EventTrigger>
                    <i:EventTrigger SourceName="nextButton"
                                    EventName="Click">
                        <i:InvokeCommandAction CommandName="IncrementCommand" />
                    </i:EventTrigger>
                    <i:EventTrigger SourceName="pathListBox"
                                    EventName="SelectionChanged">
                        <i:InvokeCommandAction CommandName="ScrollSelectedCommand" />
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </pathListBoxUtils:PathListBoxScrollBehavior>
        </i:Interaction.Behaviors>

    </ec:PathListBox>

    <!--COURBE-->
    <Path x:Name="path"
          Grid.Column="1"
          Data="M1,1 C199.68998,-31.583894 399.61189,-33.369373 600.98,1"
          Stretch="Fill"
          Stroke="Red"
          StrokeThickness="2"
          Height="2"
          VerticalAlignment="Center"
          Margin="12,21,12,0"
          Opacity="0" />
 <!--PREVIOUS BUTTON-->
    <Button x:Name="previousButton"
            Content="&lt;-"
            VerticalAlignment="Center" />
    <!--NEXT BUTTON-->
    <Button x:Name="nextButton"
            Content="-&gt;"
            Grid.Column="2"
            VerticalAlignment="Center" />

WPF轮播列表框

0 个答案: