How to set or change active Tab UI

[KannanKrish]

This library is great. I almost got the UI what I wanted.

Can you give suggestion for How to set the opacity of the active tab 1 and not active tab opacity is 0.6.

I achieve the bottom tab opacity by code. But at the top bar I couldn't get the look what I wanted.

My suggestion is to give an example of active and nonactive UI using Visual State Manager or something else without code behind.

[KannanKrish]

I tried with triggers. I think the trigger is not working.

<Tab Title="Home" Route="HomeTab">
    <Tab.Icon>
        <FontImageSource FontFamily="{StaticResource FontIcon}"
                         Glyph="{x:Static pages:Icons.HouseChimney}"
                         Size="{StaticResource TabIconSize}"
                         Color="{DynamicResource SecondaryTextColor}" />
    </Tab.Icon>
    <simpleShell:SimpleShell.ShellGroupContainerTemplate>
        <DataTemplate x:DataType="ShellSection">
            <Grid RowDefinitions="Auto, *">
                <Border Padding="20,10"
                        BackgroundColor="{DynamicResource Secondary}"
                        HorizontalOptions="Center"
                        StrokeShape="RoundRectangle 0,0,30,30"
                        TranslationY="-1">
                    <HorizontalStackLayout BindableLayout.ItemsSource="{Binding Items}" Spacing="20">
                        <BindableLayout.ItemTemplate>
                            <DataTemplate x:DataType="BaseShellItem">
                                <Label FontSize="16"
                                       Opacity="0.6"
                                       Text="{Binding Title}"
                                       TextColor="{DynamicResource SecondaryTextColor}">
                                    <Label.Triggers>
                                        <Trigger TargetType="Label" Property="Text" Value="{Binding CurrentPage.Title, Source={x:Reference ThisShell}}">
                                            <Setter Property="Opacity" Value="1" />
                                        </Trigger>
                                    </Label.Triggers>
                                    <Label.GestureRecognizers>
                                        <TapGestureRecognizer Tapped="TabItemClicked" />
                                    </Label.GestureRecognizers>
                                </Label>
                            </DataTemplate>
                        </BindableLayout.ItemTemplate>
                    </HorizontalStackLayout>
                </Border>
                <simpleShell:SimpleNavigationHost Grid.Row="1" />
            </Grid>
        </DataTemplate>
    </simpleShell:SimpleShell.ShellGroupContainerTemplate>

    <ShellContent Title="{Localize Home}" ContentTemplate="{DataTemplate pages:HomePage}" Route="HomePage" />
    <ShellContent Title="{Localize Favorites}" ContentTemplate="{DataTemplate pages:FavoritePage}" Route="FavoritePage" />
    <ShellContent Title="{Localize Group}" ContentTemplate="{DataTemplate pages:GroupPage}" Route="GroupPage" />
</Tab>

[RadekVyM]

Hi @KannanKrish,

try to use DataTrigger in combination with MultiBinding. Here is just a simple example with a button:

<DataTemplate
    x:DataType="BaseShellItem">
    <Button
        Clicked="ShellItemButtonClicked"
        Background="#555"
        Text="{Binding Title}">
        <Button.Triggers>
            <DataTrigger
                TargetType="Button"
                Value="True">
                <DataTrigger.Binding>
                    <MultiBinding Converter="{StaticResource EqualsConverter}">
                        <Binding Path="."/>
                        <Binding Path="CurrentShellContent" Source="{x:Reference thisShell}"/>
                    </MultiBinding>
                </DataTrigger.Binding>
                <Setter Property="Background" Value="Black"/>
            </DataTrigger>
        </Button.Triggers>
    </Button>
</DataTemplate>

The EqualsConverter could look something like this:

public class EqualsConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        if (values.Length == 2)
            return values[0] == values[1];
        return false;
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

[KannanKrish]

Works fine. Thanks for the help.