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%