.NET MAUI SlideView Indicator Styling
The SlideView exposes the IndicatorStyle property that allows you to adapt the style of the SlideView Indicator.
The IndicatorStyle(Style with target type telerik:SlideViewIndicator) property defines the custom style that is regarded when creating the Microsoft.Maui.Controls.Style that will be applied to the SlideViewIndicator. To style the indicators, set the property IndicatorStyle to the SlideView control. You can style the indicators through the Style section in XAML.
The following table represents the available style properties.
| Style Property | Description |
|---|---|
AnimationDuration(int) |
Defines the duration (in milliseconds) of the animation that runs when the current index changes. |
AnimationEasing(Easing) |
Defines the Microsoft.Maui.Easing of the animation that runs when the current index changes. |
BackgroundColor |
Defines the color which will fill the background of a VisualElement. |
HeightRequest |
Defines the desired height of the element. |
WidthRequest |
Defines the desired width of the element. |
HorizontalOptions |
Defines the LayoutOptions that define how to lay out the element in a layout cycle. |
VerticalOptions |
Defines the LayoutOptions that define how to lay out the element in a layout cycle. |
IsEnabled |
Defines a value indicating whether this element is enabled in the user interface. |
IsVisible |
Defines a value that determines whether this element will be visible on the visual tree. |
MaximumHeightRequest |
Defines a value which overrides the maximum height the element will request during layout. |
MinimumHeightRequest |
Defines a value which overrides the minimum height the element will request during layout. |
MaximumWidthRequest |
Defines a value which overrides the maximum width the element will request during layout. |
MinimumWidthRequest |
Defines a value which overrides the mimimum width the element will request during layout. |
Further customize the indicator by using the SlideViewIndicatorItem. The customization is shown in the example below.
Example
1. Add SlideView definition in XAML:
<telerik:RadSlideView x:Name="slideView"
ItemsSource="{Binding Views}"
ItemTemplate="{StaticResource ItemTemplate}"
InteractionMode="Pan"
IndicatorStyle="{StaticResource IndicatorStyle}" />
2. Add Style resource for the SlideViewIndicator:
<Style x:Key="IndicatorStyle" TargetType="telerik:SlideViewIndicator">
<Setter Property="WidthRequest" Value="100" />
<Setter Property="HeightRequest" Value="30" />
<Setter Property="BackgroundColor" Value="#1AFFAC3E" />
<Setter Property="Clip">
<RoundRectangleGeometry Rect="0,0,100,30"
CornerRadius="8" />
</Setter>
</Style>
3. Add Style resource for the SlideViewIndicatorItem:
<Style TargetType="telerik:SlideViewIndicatorItem">
<Setter Property="ControlTemplate">
<ControlTemplate>
<Grid WidthRequest="20"
HeightRequest="10">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="CommonStates">
<VisualState Name="Normal" />
<VisualState x:Name="MouseOver">
<VisualState.Setters>
<Setter TargetName="indicatorItem" Property="Shape.Fill" Value="#0099BC" />
<Setter TargetName="indicatorItem" Property="Shape.WidthRequest" Value="12" />
</VisualState.Setters>
</VisualState>
<VisualState Name="Selected">
<VisualState.Setters>
<Setter TargetName="indicatorItem" Property="Shape.Fill" Value="#0087A4" />
<Setter TargetName="indicatorItem" Property="Shape.WidthRequest" Value="12" />
</VisualState.Setters>
</VisualState>
<VisualState Name="SelectedMouseOver">
<VisualState.Setters>
<Setter TargetName="indicatorItem" Property="Shape.Fill" Value="#0099BC" />
<Setter TargetName="indicatorItem" Property="Shape.WidthRequest" Value="12" />
</VisualState.Setters>
</VisualState>
<VisualState Name="Disabled">
<VisualState.Setters>
<Setter TargetName="indicatorItem" Property="Shape.Fill" Value="#61CCCCCC" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="indicatorItem"
WidthRequest="8"
HeightRequest="2"
HorizontalOptions="Center"
VerticalOptions="Center"
Fill="#CCCCCC" />
</Grid>
</ControlTemplate>
</Setter>
</Style>
See the result below:
For a runnable example with the SlideView Indicator Styling scenario, see the SDKBrowser Demo Application and go to SlideView > Styling.