Carousel zh CN

Carousel 轮播

返回目录

适用于:   v1.1.12 或更新的版本

概述

类名:    Carousel
命名空间:    Panuon.WPF.UI
位于:    SharedResources/Panuon.WPF.UI/Controls/Carousel.cs
继承自:    System.Windows.Controls.Control

提供一系列属性和方法, 用于滚动播放一组指定的内容。
该控件以 CarouselPanel 轮播面板 为核心，提供了翻页按钮、位置指示器、自动播放等功能。

滚动至示例

---

备注

属性间的相互作用

当 IsEnabled 属性的值设为 False 时, Opacity 的属性值将与 GlobalSettings.Setting.DisabledOpacity 属性的值绑定（它的默认值为 0.4）。有关全局设置的更多内容, 请查看GlobalSettings 辅助类。

自定义样式提示

BorderThickness 属性的默认值为 0,0,0,0。

---

依赖属性

Animation

类型:    Panuon.WPF.UI.CarouselAnimation
默认值:    [Slide] / Fade / Scale / Flow
获取或设置轮播动画。Slide 表示使用滑动动画，Fade 表示使用渐入渐出动画，Scale 表示使用中心缩放动画，Flow 表示使用快速滑动动画（行程较 Slider 大幅缩短）。
请注意， Panuon.WPF.UI.CarouselAnimation 是一组Flag值，可以同时使用多个动画（Flow 和 Slide 不能同时出现）。

carousel.Animation = CarouselAnimation.Fade | CarouselAnimation.Slide;

Animation="Fade,Slide"

AnimationEase

类型:    Panuon.WPF.UI.AnimationEase
默认值:    [None] / BackIn / BackOut / BackInOut_ ...
获取或设置轮播动画使用的缓动函数。有关WPF缓动函数的更多信息，请查阅 EasingFunction 相关的文档。

AnimationDuration

类型:    System.Duration
默认值:    0:0:0.3 ...
获取或设置轮播动画的持续时间。

CurrentIndex

类型:    System.Int32
默认值:    0
获取或设置轮播当前的索引位置。从0开始。

Orientation

类型:    System.Windows.Controls.Orientation
默认值:    [Horizontal] / Vertical
获取或设置轮播的排布方向，这将影响动画的切换效果。Horizontal 表示水平方向排布，Fade 表示垂直方向排布。

IsCyclic

类型:    System.Boolean
默认值:    True
获取或设置轮播是否为无限循环。
当此属性的值为True时，翻页按钮将永远不会被禁用。如果 CurrentIndex 为 0 且继续减少，它的值将被置为 Children.Count - 1 ；如果 CurrentIndex 为 Children.Count - 1 且继续增加，它的值将被置为 0。

AutoPlayDuration

类型:    System.Media.Color ?
默认值:    {Null}
获取或设置自动播放的时间间隔。如果 IsCyclic 的值为 False ，自动播放将在一轮循环结束后自动停止。

PageTurnButtonStyle

类型:    System.Windows.Style
默认值:    [见资源键[PageTurnButtonStyle](#PageTurnButtonStyle)]
获取或设置翻页按钮的样式。

PageTurnButtonVisibility

类型:    Panuon.WPF.UI.DecorationVisibility
默认值:    [VisibleOnHover] / Visible / Collapsed
获取或设置翻页按钮的可见性。Visible 表示始终显示，VisibleOnHover 表示悬浮时显示，Collapsed 表示始终隐藏。

CanTurnPageWithKeys

类型:    System.Boolean
默认值:    True
获取或设置是否允许使用左右键或上下键（当 Origintation 为 Vertical 时）控制翻页。

IndicatorPosition

类型:    Panuon.WPF.UI.IndicatorPosition
默认值:    [LeftOrTop] / RightOrBottom
获取或设置翻页按钮的可见性。LeftOrTop 表示显示在左侧或顶部（当 Origintation 为 Vertical 时），RightOrBottom 表示显示在右侧或底部（当 Origintation 为 Vertical 时）。

IndicatorPaginationStyle

类型:    System.Windows.Style
默认值:    [见资源键[IndicatorPaginationStyle](#IndicatorPaginationStyle)]
获取或设置指示器 Pagination 翻页 控件的样式。

IndicatorVisibility

类型:    Panuon.WPF.UI.DecorationVisibility
默认值:    [Visible] / VisibleOnHover / Collapsed
获取或设置指示器的可见性。Visible 表示始终显示，VisibleOnHover 表示悬浮时显示，Collapsed 表示始终隐藏。

---

方法

PageUp()

向前翻页。

PageDown()

向后翻页。

---

命令

PageUpCommand

向前翻页。

PageDownCommand

向后翻页。

---

公开的资源键

有关如何使用资源键的更多内容, 请查看命名与约定-资源键。
一些无法从外部访问的属性已被隐去。

PageTurnButtonStyle

资源键全称:    {ComponentResourceKey ResourceId=PageTurnButtonStyle, TypeInTargetAssembly={x:Type pu:Carousel}}
缩略资源键:    {pu:Carousel.PageTurnButtonStyle}

翻页 RepeatButton 按钮 控件的样式。

<Style x:Key="{ComponentResourceKey ResourceId=PageTurnButtonStyleKey, TypeInTargetAssembly={x:Type pu:Carousel}}"
       TargetType="RepeatButton"
       BasedOn="{StaticResource {x:Static pu:StyleKeys.RepeatButtonStyleKey}}">
    <Setter Property="Width"
            Value="40" />
    <Setter Property="Height"
            Value="40" />
    <Setter Property="Margin"
            Value="10" />
    <Setter Property="FontSize"
            Value="20" />
    <Setter Property="Background"
            Value="#33000000" />
    <Setter Property="pu:RepeatButtonHelper.HoverBackground"
            Value="#55000000" />
    <Setter Property="pu:RepeatButtonHelper.ClickBackground"
            Value="#33000000" />
    <Setter Property="Foreground"
            Value="#FFFFFF" />
    <Setter Property="pu:RepeatButtonHelper.CornerRadius"
            Value="{Binding ActualHeight, Converter={StaticResource {x:Static pu:ConverterKeys.DoubleDivideByConverter}}, ConverterParameter=2, RelativeSource={RelativeSource AncestorType=pu:Carousel}, Mode=OneWay}" />
    <Setter Property="FontFamily"
            Value="/Panuon.WPF.UI;component/Resources/#PanuonIcon" />
    <Style.Triggers>
        <Trigger Property="Tag"
                 Value="UpLeft">
            <Setter Property="Content"
                    Value="&#xe901;" />
        </Trigger>
        <Trigger Property="Tag"
                 Value="UpTop">
            <Setter Property="Content"
                    Value="&#xe902;" />
        </Trigger>
        <Trigger Property="Tag"
                 Value="DownRight">
            <Setter Property="Content"
                    Value="&#xe903;" />
        </Trigger>
        <Trigger Property="Tag"
                 Value="DownBottom">
            <Setter Property="Content"
                    Value="&#xe904;" />
        </Trigger>
    </Style.Triggers>
</Style>

IndicatorPaginationStyle

资源键全称:    {ComponentResourceKey ResourceId=IndicatorPaginationStyle, TypeInTargetAssembly={x:Type pu:Carousel}}
缩略资源键:    {pu:Carousel.IndicatorPaginationStyle}

指示器 Pagination 分页 控件的样式。

<Style x:Key="{ComponentResourceKey ResourceId=IndicatorPaginationStyleKey, TypeInTargetAssembly={x:Type pu:Carousel}}"
       TargetType="pu:Pagination">
    <Setter Property="Margin"
            Value="15" />
    <Setter Property="ItemsWidth"
            Value="12" />
    <Setter Property="ItemsHeight"
            Value="12" />
    <Setter Property="ItemsCornerRadius"
            Value="6" />
    <Setter Property="ItemsBackground"
            Value="#55FFFFFF" />
    <Setter Property="ItemsSelectedBackground"
            Value="#FFFFFF" />
    <Setter Property="ItemContainerStyle">
        <Setter.Value>
            <Style TargetType="pu:PaginationItem">
                <Setter Property="Cursor"
                        Value="Hand" />
                <Setter Property="ContentTemplate">
                    <Setter.Value>
                        <DataTemplate></DataTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Setter.Value>
    </Setter>
</Style>

---

示例

示例1

xmlns:pu="https://opensource.panuon.com/wpf-ui"
···

<pu:Carousel Width="500"
             Height="300"
             Animation="Slide,Fade"
             TextBlock.Foreground="White"
             TextBlock.FontSize="40"
             TextBlock.TextAlignment="Center">
    <Border Background="#1ABBEA">
        <TextBlock Text="Item 1"
                   VerticalAlignment="Center" />
    </Border>
    <Border Background="#F6AC0C">
        <TextBlock Text="Item 2"
                   VerticalAlignment="Center" />
    </Border>
    <Border Background="#FF5CAC">
        <TextBlock Text="Item 3"
                   VerticalAlignment="Center" />
    </Border>
</pu:Carousel>

示例2

xmlns:pu="https://opensource.panuon.com/wpf-ui"
···

<pu:Carousel Width="500"
             Height="300"
             Animation="Scale,Fade"
             AnimationEase="CubicOut"
             AnimationDuration="0:0:1"
             TextBlock.Foreground="White"
             TextBlock.FontSize="40"
             TextBlock.TextAlignment="Center">
    <pu:Carousel.IndicatorPaginationStyle>
        <Style TargetType="pu:Pagination"
               BasedOn="{StaticResource {x:Static pu:Carousel.IndicatorPaginationStyleKey}}">
            <Setter Property="ItemsWidth"
                    Value="30" />
            <Setter Property="ItemsHeight"
                    Value="8" />
            <Setter Property="ItemsCornerRadius"
                    Value="2" />
        </Style>
    </pu:Carousel.IndicatorPaginationStyle>
    <Border Background="#1ABBEA">
        <TextBlock Text="Item 1"
                   VerticalAlignment="Center" />
    </Border>
    <Border Background="#F6AC0C">
        <TextBlock Text="Item 2"
                   VerticalAlignment="Center" />
    </Border>
    <Border Background="#FF5CAC">
        <TextBlock Text="Item 3"
                   VerticalAlignment="Center" />
    </Border>
</pu:Carousel>

示例3

xmlns:pu="https://opensource.panuon.com/wpf-ui"
···

<pu:Carousel Width="500"
             Height="300"
             Animation="Flow,Fade"
             Orientation="Vertical"
             AnimationEase="CubicOut"
             TextBlock.Foreground="White"
             TextBlock.FontSize="40"
             TextBlock.TextAlignment="Center">
    <pu:Carousel.IndicatorPaginationStyle>
        <Style TargetType="pu:Pagination"
               BasedOn="{StaticResource {x:Static pu:Carousel.IndicatorPaginationStyleKey}}">
            <Setter Property="ItemsWidth"
                    Value="NaN" />
            <Setter Property="ItemsHeight"
                    Value="NaN" />
            <Setter Property="ItemsBackground"
                    Value="Transparent" />
            <Setter Property="ItemsForeground"
                    Value="#55FFFFFF" />
            <Setter Property="ItemsSelectedBackground"
                    Value="{x:Null}" />
            <Setter Property="ItemsSelectedForeground"
                    Value="#FFFFFF" />
            <Setter Property="ItemContainerStyle">
                <Setter.Value>
                    <Style TargetType="pu:PaginationItem">
                        <Setter Property="Cursor"
                                Value="Hand" />
                        <Setter Property="ContentTemplate">
                            <Setter.Value>
                                <DataTemplate>
                                    <TextBlock Text="&#xe954;"
                                               FontFamily="{StaticResource PanuonIconFont}"
                                               FontSize="20" />
                                </DataTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </Setter.Value>
            </Setter>
        </Style>
    </pu:Carousel.IndicatorPaginationStyle>
    <Border Background="#1ABBEA">
        <TextBlock Text="Item 1"
                   VerticalAlignment="Center" />
    </Border>
    <Border Background="#F6AC0C">
        <TextBlock Text="Item 2"
                   VerticalAlignment="Center" />
    </Border>
    <Border Background="#FF5CAC">
        <TextBlock Text="Item 3"
                   VerticalAlignment="Center" />
    </Border>
</pu:Carousel>

---