概述
New UWP Community Toolkit V2.2.0 的版本发布日志中提到了 Carousel 的调整,本篇我们结合代码详细讲解 Carousel 的实现。
Carousel 是一种传送带形态的控件,在图片展示类的应用中有非常多的应用,它拥有很好的流畅度,可以做很多的自定义,并集成了鼠标,触摸板,键盘等的操作。我们来看一下官方的介绍和官网示例中的展示:
The
Carousel
control provides a new control, inherited from theItemsControl
, representing a nice and smooth carousel. This control lets you specify a lot of properties for a flexible layouting. TheCarousel
control works fine with mouse, touch, mouse and keyboard as well.
Doc: https://docs.microsoft.com/zh-cn/windows/uwpcommunitytoolkit/controls/carousel
Namespace: Microsoft.Toolkit.Uwp.UI.Controls; Nuget: Microsoft.Toolkit.Uwp.UI.Controls;
开发过程
代码分析
先来看看 Carousel 的类结构组成:
下面来看一下几个主要类中的主要代码实现,因为篇幅关系,我们只摘录部分关键代码实现:
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,分别对应点按,触摸移动和移动结束的处理。其中:
而因为 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!!!