Ghost1372

everything can be handy

ContentSlider

A simple content slider with animation.

Property

Name
Duration
ViewportWidth
SelectedItem
ItemsSource

Methods

Name
SlideTo

Example

1
2
3
4
5
6
7
8
9
10
11
12
<dev:ContentSlider ItemsSource="{x:Bind ContentItems, Mode=OneWay}" ViewportWidth="500">
    <dev:ContentSlider.ItemTemplate>
        <DataTemplate x:DataType="views:ContentSliderItem">
            <Grid>
                <TextBlock HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Style="{ThemeResource TitleTextBlockStyle}"
                            Text="{x:Bind Name}" />
            </Grid>
        </DataTemplate>
    </dev:ContentSlider.ItemTemplate>
</dev:ContentSlider>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
public List<ContentSliderItem> ContentItems = new List<ContentSliderItem>()
{
    new ContentSliderItem() {Name="Item 1", Image = "ms-appx:///Assets/BannerView/1.jpeg"},
    new ContentSliderItem() {Name="Item 2", Image = "ms-appx:///Assets/BannerView/2.png"},
    new ContentSliderItem() {Name="Item 3", Image = "ms-appx:///Assets/BannerView/3.jpeg"},
    new ContentSliderItem() {Name="Item 4", Image = "ms-appx:///Assets/BannerView/4.jpeg"},
    new ContentSliderItem() {Name="Item 5", Image = "ms-appx:///Assets/BannerView/5.jpeg"},
    new ContentSliderItem() {Name="Item 6", Image = "ms-appx:///Assets/BannerView/6.png"},
    new ContentSliderItem() {Name="Item 7", Image = "ms-appx:///Assets/BannerView/7.jpeg"},
    new ContentSliderItem() {Name="Item 8", Image = "ms-appx:///Assets/BannerView/8.jpeg"},
    new ContentSliderItem() {Name="Item 9", Image = "ms-appx:///Assets/BannerView/9.jpeg"},
};
public partial class ContentSliderItem
{
    public string Name { get; set; }
    public string Image { get; set; }

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

ContentSlider

Demo

you can run demo and see this feature.

0%