在开发应用程序时,经常需要展示多个数据项,例如图片轮播、新闻摘要等。不幸的是,Microsoft 并没有提供一个现成的轮播控件实现。不过,有许多免费的轮播控件可供选择。本文将介绍如何基于现有的开源控件,开发一个更灵活的WPF轮播控件。
在开始之前,需要对C#有良好的理解,并且对 WPF 有一定的了解。
轮播控件可以水平或垂直排列项目:
新开发的轮播控件,将其命名为 WPFCarouselControl(恐怕没什么创意),具有以下依赖属性:
在应用程序中使用该控件非常简单。首先,创建一个类来存储一个轮播项目中显示的数据。例如:
public class RadioStation
{
public string Name { get; set; }
public string ShortName { get; set; }
public string ImageSource { get; set; }
public string Text { get; set; }
}
接下来,在视图中添加 CarouselControl。例如:
<WPFCarouselControl:CarouselControl Grid.Row="5" Grid.Column="1" Grid.ColumnSpan="5" x:Name="_carouselDABRadioStations" ItemsSource="{Binding RadioStationsDAB}" SelectedItem="{Binding SelectedRadioStationDAB,Mode=TwoWay}" ShowRotation="True" TiltInDegrees="10" AutoSizeToParent="true" RotationSpeed="100" VerticalOrientation="False" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<WPFCarouselControl:CarouselControl.Style>
<Style TargetType="WPFCarouselControl:CarouselControl">
<Setter Property="CarouselItemTemplate">
<Setter.Value>
<ControlTemplate>
<Border BorderThickness="1" BorderBrush="Gainsboro" Background="SteelBlue" Width="250" Height="150">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Border Grid.Row="0" BorderThickness="0" Background="White">
<Image Grid.Row="0" Source="{Binding ImageSource}" VerticalAlignment="Center" HorizontalAlignment="Center" Height="100"/>
</Border>
<Label Grid.Row="1" Content="{Binding ShortName}" Foreground="White" Background="Transparent" FontSize="20" FontFamily="Arial" Style="{StaticResource labelStyleCentred}" DockPanel.Dock="Bottom" Height="Auto"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</WPFCarouselControl:CarouselControl.Style>
</WPFCarouselControl:CarouselControl>
请注意 CarouselItemTemplate 属性,它定义了一个由矩形包含的图片和一行文本组成的轮播项目。ItemsSource 属性绑定到视图模型中定义的 RadioStationsDAB 属性,如下所示:
private System.Collections.ObjectModel.ObservableCollection<Model.RadioStation> _radioStationsDAB;
public System.Collections.ObjectModel.ObservableCollection<Model.RadioStation> RadioStationsDAB
{
get
{
return _radioStationsDAB;
}
set
{
_radioStationsDAB = value;
NotifyPropertyChanged("RadioStationsDAB");
}
}
WPF轮播控件是一个包含 Canvas 控件的 WPF 用户控件。项目控件是 canvas 的子元素,布局在屏幕上的平面上投影的圆上。控件实现了 SelectionChanged 事件,允许所有者在通过鼠标左键单击选择项目时接收通知。旋转是通过一个计时器实现的,当选定的项目更改时启动。计时器每 10 毫秒触发一次,以确保平滑旋转。每次触发时,它会根据旋转速度移动项目。