New UWP Community Toolkit - Carousel

時間 2019-11-11

標籤 new uwp community toolkit carousel 简体版

原文原文鏈接

概述git

New UWP Community Toolkit V2.2.0 的版本發佈日誌中提到了 Carousel 的調整，本篇咱們結合代碼詳細講解 Carousel 的實現。github

Carousel 是一種傳送帶形態的控件，在圖片展現類的應用中有很是多的應用，它擁有很好的流暢度，能夠作不少的自定義，並集成了鼠標，觸摸板，鍵盤等的操做。咱們來看一下官方的介紹和官網示例中的展現：windows

The Carousel control provides a new control, inherited from the ItemsControl, representing a nice and smooth carousel.
This control lets you specify a lot of properties for a flexible layouting.
The Carousel control works fine with mouse, touch, mouse and keyboard as well.app

Source: https://github.com/Microsoft/UWPCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.UI.Controls/Carouselide

Doc: https://docs.microsoft.com/zh-cn/windows/uwpcommunitytoolkit/controls/carouselflex

Namespace: Microsoft.Toolkit.Uwp.UI.Controls; Nuget: Microsoft.Toolkit.Uwp.UI.Controls;動畫

開發過程this

代碼分析spa

先來看看 Carousel 的類結構組成：日誌

Carousel.cs - Carousel 控件類，繼承自 ItemsControl
Carousel.xaml - Carousel 的樣式文件，包含了 Carousel，CarouselItem，CarouselPanel 的樣式
CarouselItem.cs - CarouselItem 是 Carousel 控件的列表中的選擇器 ItemTemplate
CarouselPanel.cs - CarouselPanel 是 Carousel 控件的 ItemPanelTemplate

下面來看一下幾個主要類中的主要代碼實現，由於篇幅關係，咱們只摘錄部分關鍵代碼實現：

1. Carousel.cs

在具體分析代碼前，咱們先看看 Carousel 類的組成：

能夠看到，做爲一個集合類控件，Carousel 也註冊了 SelectedItem 和 SelectedIndex 依賴屬性，而且由於控件能夠控制元素的深度，旋轉角度，動畫時長和類型，列表方向等，註冊了 TransitionDuration，ItemDepth，EasingFunction，ItemMargin，ItemRotationX，Orientation 等依賴屬性。而部分依賴屬性的 PropertyChanged 事件由 OnCarouselPropertyChanged(d, e) 來實現；

下面來看一下 Carousel 類的構造方法：

構造方法中，首先設置了樣式，Tab 導航模式；定義了鼠標滾輪，鼠標點擊和鍵盤事件，並註冊了數據源變化事件來獲得正確的 SelectedItem 和 SelectedIndex。

public Carousel()
{
    // Set style
    DefaultStyleKey = typeof(Carousel);
    SetValue(AutomationProperties.NameProperty, "Carousel");
    IsHitTestVisible = true;

    IsTabStop = false;
    TabNavigation = KeyboardNavigationMode.Once;

    // Events registered
    PointerWheelChanged += OnPointerWheelChanged;
    PointerReleased += CarouselControl_PointerReleased;
    KeyDown += Keyboard_KeyUp;

    // Register ItemSource changed to get correct SelectedItem and SelectedIndex
    RegisterPropertyChangedCallback(ItemsSourceProperty, (d, dp) => { ... });
}

在鍵盤按鍵擡起的事件處理中，分別對應 Down，Up，Right 和 Left 作了處理，咱們只截取了 Down 的處理過程；能夠看到，若是列表方向爲縱向，則 Down 按鍵會觸發 SelectedIndex++，也就是當前選擇項下移一位；對應其餘三個按鍵也是相似的操做；OnPointerWheelChanged 的實現方式相似，這裏不贅述；

private void Keyboard_KeyUp(object sender, KeyRoutedEventArgs e)
{
    switch (e.Key)
    {
        case Windows.System.VirtualKey.Down:
        case Windows.System.VirtualKey.GamepadDPadDown:
        case Windows.System.VirtualKey.GamepadLeftThumbstickDown:
            if (Orientation == Orientation.Vertical)
            {
                if (SelectedIndex < Items.Count - 1)
                {
                    SelectedIndex++;
                }
                else if (e.OriginalKey != Windows.System.VirtualKey.Down)
                {
                    FocusManager.TryMoveFocus(FocusNavigationDirection.Down);
                }

                e.Handled = true;
            }

            break;
        ...
    }
}

接着看一下 PrepareContainerForItemOverride(element, item) 方法，它爲 Item 設置了初始的 3D 旋轉的中心點，Item 變換的中心點；並根據當前選擇項肯定 Item 是否被選中；

protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
{
    base.PrepareContainerForItemOverride(element, item);

    var carouselItem = (CarouselItem)element;
    carouselItem.Selected += OnCarouselItemSelected;

    carouselItem.RenderTransformOrigin = new Point(0.5, 0.5);

    carouselItem.IsTabStop = Items.IndexOf(item) == SelectedIndex;
    carouselItem.UseSystemFocusVisuals = true;

    PlaneProjection planeProjection = new PlaneProjection();
    planeProjection.CenterOfRotationX = 0.5;
    planeProjection.CenterOfRotationY = 0.5;
    planeProjection.CenterOfRotationZ = 0.5;

    var compositeTransform = new CompositeTransform();
    compositeTransform.CenterX = 0.5;
    compositeTransform.CenterY = 0.5;
    compositeTransform.CenterZ = 0.5;

    carouselItem.Projection = planeProjection;
    carouselItem.RenderTransform = compositeTransform;

    if (item == SelectedItem)
    {
        carouselItem.IsSelected = true;
    }
}

2. Carousel.xaml

如上面類結構介紹時所說，Carousel.xaml 是 Carousel 控件的樣式文件；下面代碼中我把非關鍵部分用 ‘...’ 代替了，能夠看到，主要是兩個部分的樣式：CarouselItem 和 Carousel，CarouselPanel 做爲 Carousel 的 ItemsPanelTemplate；Carousel 控件的 easing mode 是 'EaseOut'。

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="using:Microsoft.Toolkit.Uwp.UI.Controls">

    <Style TargetType="local:CarouselItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:CarouselItem">
                    <Grid BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                        <VisualStateManager.VisualStateGroups>
                            ...
                        </VisualStateManager.VisualStateGroups>
                        <ContentPresenter .../>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="local:Carousel">
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <local:CarouselPanel />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="EasingFunction">
            <Setter.Value>
                <ExponentialEase EasingMode="EaseOut" />
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:Carousel">
                    <Grid> 
 ...
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>

3. CarouselItem.cs

在前面 Carousel.xaml 中咱們看到了 CarouselItem 的樣式，有針對 VisualStateManager 的樣式狀態，而 CarouselItem 類則定義了這些狀態變化事件對應的處理方法。分別有 OnIsSelectedChanged，OnPointerEntered，OnPointerExited 和 OnPointerPressed，在觸發這些狀態時，CarouselItem 會對應切換到那個狀態時的樣式。

public CarouselItem()
{
    // Set style
    DefaultStyleKey = typeof(CarouselItem);
    RegisterPropertyChangedCallback(SelectorItem.IsSelectedProperty, OnIsSelectedChanged);
}

protected override void OnPointerEntered(PointerRoutedEventArgs e) {...}

protected override void OnPointerExited(PointerRoutedEventArgs e) {...}

protected override void OnPointerPressed(PointerRoutedEventArgs e) {...}

internal event EventHandler Selected;

private void OnIsSelectedChanged(DependencyObject sender, DependencyProperty dp)
{
    var item = (CarouselItem)sender;

    if (item.IsSelected)
    {
        Selected?.Invoke(this, EventArgs.Empty);
        VisualStateManager.GoToState(item, SelectedState, true);
    }
    else
    {
        VisualStateManager.GoToState(item, NormalState, true);
    }
}

4. CarouselPanel.cs

一樣在具體分析代碼前，咱們先看看 CarouselPanel 類的組成：

CarouselPanel 類繼承自 Panel 類，能夠看到它接收的事件響應，有 OnTapped，OnManipulationDelta 和 OnManipulationCompleted，分別對應點按，觸摸移動和移動結束的處理。其中：

OnTapped 的處理主要是根據當前控件的可視化範圍和尺寸，判斷點擊的點對應哪一個元素被選中；
OnManipulationDelta 則是根據觸控操做的方向和量度等，決定 Item 的動畫幅度，動畫速度和每一個元素變換狀態，以及選中元素的變化；
OnManipulationCompleted 則是在觸控結束後，肯定結束動畫，以及結束時應該選中那個元素；
UpdatePosition() 方法則是在 OnManipulationDelta 方法觸發到 first 或 last 元素時，須要從新設置動畫；
GetProjectionFromManipulation(sender, e) 則是在 OnManipulationDelta 方法中，根據當前觸控的手勢，決定當前 Item 的 Projection；
GetProjectionFromSelectedIndex(i) 是根據當前選中的索引，來取得 Item 的 Projection；
ApplyProjection(element, proj, storyboard) 是應用獲取到的 Projection，包括旋轉，變換等動畫；

而由於 CarouselPanel 類繼承自 Panel 類，因此它也重寫了 MeasureOverride(availableSize) 和 ArrangeOverride(finalSize) 方法：

MeasureOverride(availableSize) 方法的實現中，主要是根據寬度和高度是否設置爲無限值，若是是，且方向和元素排列順序一致，則尺寸爲當前方向三個元素的寬度，而後把計算後的尺寸傳出去；

protected override Size MeasureOverride(Size availableSize)
{
    var containerWidth = 0d;
    var containerHeight = 0d;

    foreach (FrameworkElement container in Children)
    {
        container.Measure(availableSize);
        // get containerWidth and containerHeight for max
    }

    var width = 0d;
    var height = 0d;

    // It's a Auto size, so we define the size should be 3 items
    if (double.IsInfinity(availableSize.Width))
    {
        width = Carousel.Orientation == Orientation.Horizontal ? containerWidth * (Children.Count > 3 ? 3 : Children.Count) : containerWidth;
    }
    else
    {
        width = availableSize.Width;
    }

    // It's a Auto size, so we define the size should be 3 items
    if (double.IsInfinity(availableSize.Height))
    {
        height = Carousel.Orientation == Orientation.Vertical ? containerHeight * (Children.Count > 3 ? 3 : Children.Count) : containerHeight;
    }
    else
    {
        height = availableSize.Height;
    }

    Clip = new RectangleGeometry { Rect = new Rect(0, 0, width, height) };

    return new Size(width, height);
}

ArrangeOverride(finalSize) 方法則是排列元素的處理，由於 Carousel 控件有動畫處理，因此在排列時須要考慮到元素排列的動畫，以及 Zindex；

protected override Size ArrangeOverride(Size finalSize)
{
    double centerLeft = 0;
    double centerTop = 0;

    Clip = new RectangleGeometry { Rect = new Rect(0, 0, finalSize.Width, finalSize.Height) };

    for (int i = 0; i < Children.Count; i++)
    {
        FrameworkElement container = Children[i] as FrameworkElement;
        ...
        // get the good center and top position
        // Get rect position
        // Placing the rect in the center of screen
        ...
        // Get the initial projection (without move)
        var proj = GetProjectionFromSelectedIndex(i);

        // apply the projection to the current object
        ApplyProjection(container, proj);

        // calculate zindex and opacity
        int zindex = (Children.Count * 100) - deltaFromSelectedIndex;
        Canvas.SetZIndex(container, zindex);
    }

    return finalSize;
}

調用示例

示例中咱們實現了橫向的 Carousel 控件，做爲一個圖片列表，能夠看到當前選中的 Item 的 ZIndex 是最高的，向兩側依次下降，而在滑動過程當中，伴隨着 3D 和變換的動畫，ZIndex 也會一塊兒變化，而滑動結束時，選中項從新計算，每一項的 Project 也會從新計算。

<Grid>
    <Border Margin="0">
        <controls:Carousel x:Name="CarouselControl"
            InvertPositive="True"
            ItemDepth="238"
            ItemMargin="-79"
            ItemRotationX="4"
            ItemRotationY="9"
            ItemRotationZ ="-3"
            Orientation="Horizontal"
            SelectedIndex="5">
            <controls:Carousel.EasingFunction>
                <CubicEase EasingMode="EaseOut" />
            </controls:Carousel.EasingFunction>
            <controls:Carousel.ItemTemplate>
                <DataTemplate>
                    <Image Width="200"
                        Height="200"
                        VerticalAlignment="Bottom"
                        Source="{Binding Thumbnail}"
                        Stretch="Uniform" />
                </DataTemplate>
            </controls:Carousel.ItemTemplate>
        </controls:Carousel>
    </Border>
</Grid>

總結

到這裏咱們就把 UWP Community Toolkit 中的 Carousel 控件的源代碼實現過程和簡單的調用示例講解完成了，但願能對你們更好的理解和使用這個控件有所幫助，讓你的圖片列表控件更加炫酷靈動。歡迎你們多多交流，謝謝！

最後，再跟你們安利一下 UWPCommunityToolkit 的官方微博：https://weibo.com/u/6506046490, 你們能夠經過微博關注最新動態。

衷心感謝 UWPCommunityToolkit 的做者們傑出的工做，Thank you so much, UWPCommunityToolkit authors!!!

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。