How to change the color of indicators ?

All the background images are white backgrounded. So, i need to change the color of indicators, because i need to put the indicators at the end of the image. You said: " If you want to customize indicators, you need set SelectedIndicatorStyle "

But i don´t understand the steps. Do i need to create a class to style the colors ?

My code:

<Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <cards:CarouselView Grid.Row="0" BackgroundColor="Blue" HorizontalOptions="FillAndExpand" Margin="0"
            Items="{Binding Items}" x:Name="carouselView"
            CurrentIndex="{Binding CurrentIndex}" SlideShowDuration="1500">
            <cards:CarouselView.ItemTemplate>
                <DataTemplate>
                    <ContentView>
                        <Grid Padding="0" Margin="0">
                            <ffimage:CachedImage Source="{Binding Source}" VerticalOptions="FillAndExpand"/>
                            <controls:IndicatorsControl VerticalOptions="End" HorizontalOptions="Center"/>
                        </Grid>
                    </ContentView>
                </DataTemplate>
            </cards:CarouselView.ItemTemplate>

        </cards:CarouselView>

I am lil bit newbie. Sorry if the question is stupid…

Thanks for the attention and the nugget.

[AndreiMisiukevich]

Hi @marcelinhovt no problem You did a mistake

<Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <cards:CarouselView Grid.Row="0" BackgroundColor="Blue HorizontalOptions=" FillAndExpand" Margin="0"
            Items="{Binding Items}" x:Name="carouselView"
            CurrentIndex="{Binding CurrentIndex}" SlideShowDuration="1500">
            <cards:CarouselView.ItemTemplate>
                <DataTemplate>
                    <ContentView>
                        <Grid Padding="0" Margin="0">
                            <ffimage:CachedImage Source="{Binding Source}" VerticalOptions="FillAndExpand"/>
                        </Grid>
                    </ContentView>
                </DataTemplate>
            </cards:CarouselView.ItemTemplate>

                            <controls:IndicatorsControl VerticalOptions="End" HorizontalOptions="Center"/>

        </cards:CarouselView>

Indicators control should be right INTO cardsView, So the parent of Indicators control should be CarsoueselView (Check xaml above)… Or you want to have a lot of indicators controls on each cards? =)

And yes, for customizing indicators color you will have to set styles

Declare them where you want (For example in you content page)

    <ContentPage.Resources>
        <ResourceDictionary>
            <Style x:Key="ActiveIndicator" TargetType="Frame">
                <Setter Property="BackgroundColor" Value="Red" />
            </Style>
            <Style x:Key="InactiveIndicator" TargetType="Frame">
                <Setter Property="BackgroundColor" Value="Transparent" />
                <Setter Property="OutlineColor" Value="Red" />
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>

And set them to you indicators control

        <controls:IndicatorsControl ToFadeDuration="1500"
                                    SelectedIndicatorStyle="{StaticResource ActiveIndicator}"
                                    UnselectedIndicatorStyle="{StaticResource InactiveIndicator}"/>

[AndreiMisiukevich]

@aliyailina cool!) Thanks for sharing that. Please feel free to submit PR if you think that we can enhance existing code 😃