Skip to content

A CoverFlow control is a 3D-style carousel that highlights a centered item while showing neighboring items angled.

Property

Name
EasingFunction
ManipulationThreshold
PageDuration
RotationAngle
Scale
SingleItemDuration
SpaceBetweenItems
SpaceBetweenSelectedItemAndItems
ZDistance
SelectedIndex
SelectedItem

Methods

Name
NextItem
PreviousItem
NextPage
PreviousPage
First
Last
UpdatePositions

Example

xml
<dev:CoverFlow x:Name="CoverFlowSample"
                Width="500"
                Height="500"
                ItemsSource="{x:Bind CoverItems, Mode=OneWay}">
    <dev:CoverFlow.ItemTemplate>
        <DataTemplate x:DataType="views:CoverFlowItemSample">
            <StackPanel Spacing="5">
                <Image Height="150"
                        Source="{x:Bind Image}" />
                <TextBlock Style="{ThemeResource BaseTextBlockStyle}"
                            Text="{x:Bind Name}"
                            TextTrimming="CharacterEllipsis" />
            </StackPanel>
        </DataTemplate>
    </dev:CoverFlow.ItemTemplate>
</dev:CoverFlow>
cs
public List<CoverFlowItemSample> CoverItems = new List<CoverFlowItemSample>()
{
    new CoverFlowItemSample() {Name="Item 1", Image = "ms-appx:///Assets/BannerView/1.jpeg"},
    new CoverFlowItemSample() {Name="Item 2", Image = "ms-appx:///Assets/BannerView/2.png"},
    new CoverFlowItemSample() {Name="Item 3", Image = "ms-appx:///Assets/BannerView/3.jpeg"},
    new CoverFlowItemSample() {Name="Item 4", Image = "ms-appx:///Assets/BannerView/4.jpeg"},
    new CoverFlowItemSample() {Name="Item 5", Image = "ms-appx:///Assets/BannerView/5.jpeg"},
    new CoverFlowItemSample() {Name="Item 6", Image = "ms-appx:///Assets/BannerView/6.png"},
    new CoverFlowItemSample() {Name="Item 7", Image = "ms-appx:///Assets/BannerView/7.jpeg"},
    new CoverFlowItemSample() {Name="Item 8", Image = "ms-appx:///Assets/BannerView/8.jpeg"},
    new CoverFlowItemSample() {Name="Item 9", Image = "ms-appx:///Assets/BannerView/9.jpeg"},
};
public partial class CoverFlowItemSample
{
    public string Name { get; set; }
    public string Image { get; set; }

    public override string ToString()
    {
        return Name;
    }
}

CoverFlow

Demo

you can run demo and see this feature.

Released under the MIT License.