Ghost1372

everything can be handy

EasyCarouselPanel

A simple carousel control with animations powered by composition API.

Property

Name
SelectedIndex
SelectedItem
Duration
ItemWidth
ItemHeight
ItemsSource
ItemSpacing
ItemTemplate
DetectPointerWheelChange
AutoShift
Interval
ShiftingDirection

Methods

Name
MoveForward
MoveBackward

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<dev:EasyCarouselPanel x:Name="EasyCarouselPanelSample"
                        Height="150"
                        Margin="10"
                        VerticalAlignment="Top"
                        ItemWidth="300"
                        ItemsSource="{x:Bind CarouselItems, Mode=OneWay}"
                        SelectedIndex="0">
    <dev:EasyCarouselPanel.ItemTemplate>
        <DataTemplate x:DataType="views:EasyCarouselPanelItem">
            <Grid>
                <Image HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch"
                        Source="{x:Bind Image}"
                        Stretch="UniformToFill" />
                <Grid HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Background="#88000000">
                    <TextBlock Margin="6"
                                Foreground="White"
                                Text="{x:Bind Name}" />
                </Grid>
            </Grid>
        </DataTemplate>
    </dev:EasyCarouselPanel.ItemTemplate>
</dev:EasyCarouselPanel>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
public List<EasyCarouselPanelItem> CarouselItems = new List<EasyCarouselPanelItem>()
{
    new EasyCarouselPanelItem() {Name="Item 1", Image = "ms-appx:///Assets/BannerView/1.jpeg"},
    new EasyCarouselPanelItem() {Name="Item 2", Image = "ms-appx:///Assets/BannerView/2.png"},
    new EasyCarouselPanelItem() {Name="Item 3", Image = "ms-appx:///Assets/BannerView/3.jpeg"},
    new EasyCarouselPanelItem() {Name="Item 4", Image = "ms-appx:///Assets/BannerView/4.jpeg"},
    new EasyCarouselPanelItem() {Name="Item 5", Image = "ms-appx:///Assets/BannerView/5.jpeg"},
    new EasyCarouselPanelItem() {Name="Item 6", Image = "ms-appx:///Assets/BannerView/6.png"},
    new EasyCarouselPanelItem() {Name="Item 7", Image = "ms-appx:///Assets/BannerView/7.jpeg"},
    new EasyCarouselPanelItem() {Name="Item 8", Image = "ms-appx:///Assets/BannerView/8.jpeg"},
    new EasyCarouselPanelItem() {Name="Item 9", Image = "ms-appx:///Assets/BannerView/9.jpeg"},
};
public partial class EasyCarouselPanelItem
{
    public string Name { get; set; }
    public string Image { get; set; }

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

EasyCarouselPanel

Demo

you can run demo and see this feature.

0%