Customize look of selected element

user_8105421 0
Viewed 392

Is there any possibility to customize the look of the active/selected item in the indicator view? Using Data Template Selector or something? Data template changes every single item.

My goal is to reach this effect:

2nd item active

3rd item active

xamarin.forms xamarin.android xamarin.ios indicator
1 Answers

Try using trigger when color changes of your view at that time increase view's width or you may use view's PropertyChanged event to detect changes in view. I had a similar kind of requirement today and below code worked for me.

<IndicatorView
                x:Name="introductionIndicator"
                Grid.Row="2"
                HorizontalOptions="Center"
                IndicatorColor="{StaticResource PrimaryLightGrayColor}"
                SelectedIndicatorColor="{StaticResource PrimaryYellowColor}">
                <IndicatorView.IndicatorTemplate>
                    <DataTemplate>
                        <BoxView
                            CornerRadius="10"
                            HeightRequest="6"
                            WidthRequest="20">
                            <BoxView.Triggers>
                                <Trigger TargetType="BoxView" Property="BackgroundColor" Value="{StaticResource PrimaryYellowColor}">
                                    <Setter Property="WidthRequest" Value="30" />
                                </Trigger>
                            </BoxView.Triggers>
                        </BoxView>
                    </DataTemplate>
                </IndicatorView.IndicatorTemplate>
            </IndicatorView>

result: enter image description here

user_94490130
Related