Change indicator color of RadSlideView - MAUI

1 Answer 99 Views
SlideView
Mohammed Rameez
Top achievements
Rank 1
Iron
Iron
Mohammed Rameez asked on 25 Jul 2023, 02:21 PM

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

Sort by
0
Didi
Telerik team
answered on 27 Jul 2023, 07:35 AM

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.

Tags
SlideView
Asked by
Mohammed Rameez
Top achievements
Rank 1
Iron
Iron
Answers by
Didi
Telerik team
Share this question
or