Rank 1
Iron
Hi Telerik,
Is there any way to change the selected and unselected images indicator color for RadSlideView in MAUI.
NOTE: Have looked into the IndicatorStyle property, but there is not style property to change indicator color in it.
The below is the screenshot how it looks now.
Thanks,
Mohammed Rameez Raza.
1 Answer, 1 is accepted
Hello Mohammed Rameez,
In order to change the indicator color you need to override the default control template. I have added the control template of the indicator item and also visual states. Review the code and apply changes that are applicable for your app.
<telerik:RadContentView.Resources>
<ResourceDictionary>
<!-- apply template for the slidde view items -->
<DataTemplate x:Key="ItemTemplate">
<Label Text="{Binding Content}"
TextColor="#0087A4"
HorizontalTextAlignment="Center"
VerticalOptions="Center" />
</DataTemplate>
<!-- style the indicator item -->
<Style TargetType="telerik:SlideViewIndicatorItem">
<Setter Property="ControlTemplate">
<Setter.Value>
<ControlTemplate>
<Grid WidthRequest="{OnPlatform Default=12, Android=24}"
HeightRequest="{OnPlatform Default=12, Android=24}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="CommonStates">
<VisualState Name="Normal" />
<VisualState Name="Disabled">
<VisualState.Setters>
<Setter TargetName="ellipse" Property="Ellipse.Fill" Value="#66FFFFFF" />
</VisualState.Setters>
</VisualState>
<VisualState Name="Selected">
<VisualState.Setters>
<Setter TargetName="ellipse" Property="Ellipse.Fill" Value="#CCDD3388" />
<Setter TargetName="ellipse" Property="Ellipse.WidthRequest" Value="{OnPlatform Default=4, Android=8, WinUI=6}" />
<Setter TargetName="ellipse" Property="Ellipse.HeightRequest" Value="{OnPlatform Default=4, Android=8, WinUI=6}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Ellipse x:Name="ellipse"
WidthRequest="{OnPlatform Default=4, Android=8}"
HeightRequest="{OnPlatform Default=4, Android=8}"
HorizontalOptions="Center"
VerticalOptions="Center"
Fill="#66DD3388">
</Ellipse>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- style the indicator area -->
<Style x:Key="IndicatorStyle" TargetType="telerik:SlideViewIndicator">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="10"/>
</Style>
</ResourceDictionary>
</telerik:RadContentView.Resources>
<Grid>
<telerik:RadSlideView x:Name="slideView"
ItemsSource="{Binding Views}"
ItemTemplate="{StaticResource ItemTemplate}"
InteractionMode="Pan"
IndicatorStyle="{StaticResource IndicatorStyle}"/>
</Grid>I hope this will be of help.
Regards,
Didi
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.