Change SelectedItem Position
To change the position of SelectedItem in a given path, use TopItemPosition property
Property |
Description |
Type |
Data Type |
TopItemPosition |
Sets the SelectedItemPosition in Panel. |
DependencyProperty |
Double |
In the below example, TopItemPosition is set to 0.0. So the SelectedItem will be displayed at the beginning of the Path.
<syncfusion:Carousel x:Name="carousel" SelectedIndex="3" VerticalAlignment="Top" VisualMode="CustomPath" Height="257" Width="558" ItemsPerPage="5" OpacityEnabled="True" ScalingEnabled="True" SkewAngleXEnabled="False"
TopItemPosition="0" >
<syncfusion:Carousel.Path>
<Path Data="M0,300L600,300" Stroke="Blue" StrokeThickness="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</syncfusion:Carousel.Path>
<syncfusion:Carousel.OpacityFractions>
<syncfusion:PathFractionCollection>
<!--Fraction represents the position in Path-
Value represents the Opacity of Carousel item in a particular point-->
<syncfusion:FractionValue Fraction="0" Value="1"/>
<syncfusion:FractionValue Fraction="1" Value="0.5"/>
</syncfusion:PathFractionCollection>
</syncfusion:Carousel.OpacityFractions>
<syncfusion:Carousel.ScaleFractions>
<syncfusion:PathFractionCollection>
<syncfusion:FractionValue Fraction="0" Value="1"/>
<syncfusion:FractionValue Fraction="1" Value="0.5"/>
</syncfusion:PathFractionCollection>
</syncfusion:Carousel.ScaleFractions>
<syncfusion:Carousel.ItemTemplate>
<DataTemplate>
<Border Height="100" Width="100" Background="LightBlue">
<ContentControl Content="{Binding}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</DataTemplate>
</syncfusion:Carousel.ItemTemplate>
</syncfusion:Carousel>
carousel.ItemsSource = new ObservableCollection<string>() { "Item1", "Item2", "Item3", "Item4", "Item5", "Item6", "Item7", "Item8", "Item9" };
carousel.ItemsSource = New ObservableCollection(Of String)() From { _
"Item1", _
"Item2", _
"Item3", _
"Item4", _
"Item5", _
"Item6", _
"Item7", _
"Item8", _
"Item9" _
}
Was this page helpful?
Yes
No
Thank you for your feedback!
Thank you for your feedback and comments. We will rectify this as soon as possible!
An unknown error has occurred. Please try again.
Help us improve this page