Is there a way to change the style basedon property programmatically?

Question

I have the below code which is basically the default tabbed view with an added style that sets back color to green instead of the dynamic primary.

 <Shell.Resources>
        <ResourceDictionary>
            <Style x:Key="BaseStyle" TargetType="Element" >
                <Setter Property="Shell.BackgroundColor" Value="{DynamicResource Primary}" />
                <Setter Property="Shell.ForegroundColor" Value="White" />
                <Setter Property="Shell.TitleColor" Value="White" />
                <Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />
                <Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />
                <Setter Property="Shell.TabBarBackgroundColor" Value="{DynamicResource Primary}" />
                <Setter Property="Shell.TabBarForegroundColor" Value="White"/>
                <Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF"/>
                <Setter Property="Shell.TabBarTitleColor" Value="White"/>
            </Style>
            <Style x:Key="GreenStyle" TargetType="Element" >
                <Setter Property="Shell.BackgroundColor" Value="Green" />
                <Setter Property="Shell.ForegroundColor" Value="White" />
                <Setter Property="Shell.TitleColor" Value="White" />
                <Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />
                <Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />
                <Setter Property="Shell.TabBarBackgroundColor" Value="Green" />
                <Setter Property="Shell.TabBarForegroundColor" Value="White"/>
                <Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF"/>
                <Setter Property="Shell.TabBarTitleColor" Value="White"/>
            </Style>
            <Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" />
            <Style TargetType="FlyoutItem" BasedOn="{StaticResource BaseStyle}" />
        </ResourceDictionary>
    </Shell.Resources>

I want to know if it is possible to change the TabBar BasedOn property programmatically to the GreenStyle. Such as:

*Trigger*
{
TabBar.BasedOn = GreenStyle;
}

But in a way that actually works.

I am asking because it does not seem to work dynamically due to the static nature of it and it will not let me change it to a:

<Style TargetType="TabBar" BasedOn="{DynamicResource BaseStyle}" />

Any workarounds accepted so long as I can change the color/style to green from whatever color it is set to and back. I am very new to Xamarin forms.

Answer 1

Is there a way to change the style basedon property programmatically?

For this, you can use Dynamic Styles to achieve this function. Applications can respond to style changes dynamically at runtime by using dynamic resources.

You can refer the following code:

<ContentPage.Resources>
    <ResourceDictionary>
        <Style x:Key="baseStyle" TargetType="View">
            <Setter Property="VerticalOptions" Value="CenterAndExpand" />
        </Style>
        <Style x:Key="blueSearchBarStyle" TargetType="SearchBar" BasedOn="{StaticResource baseStyle}">
            <Setter Property="FontAttributes" Value="Italic" />
            <Setter Property="PlaceholderColor" Value="Blue" />
        </Style>
        <Style x:Key="greenSearchBarStyle" TargetType="SearchBar">
            <Setter Property="FontAttributes" Value="None" />
            <Setter Property="PlaceholderColor" Value="Green" />
        </Style>
        <Style x:Key="buttonStyle" TargetType="Button" BasedOn="{StaticResource baseStyle}">
            <Setter Property="FontSize" Value="Large" />
            <Setter Property="TextColor" Value="Red" />
        </Style>
    </ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
    <StackLayout Padding="0,20,0,0">
        <SearchBar Placeholder="These SearchBar controls" Style="{DynamicResource searchBarStyle}" />
        <SearchBar Placeholder="are demonstrating" Style="{DynamicResource searchBarStyle}" />
        <SearchBar Placeholder="dynamic styles," Style="{DynamicResource searchBarStyle}" />
        <SearchBar Placeholder="but this isn't dynamic" Style="{StaticResource blueSearchBarStyle}" />
        <Button Text="Change Style" Style="{StaticResource buttonStyle}" Clicked="OnButtonClicked" />
    </StackLayout>
</ContentPage.Content>

The xaml.cs code is :

public partial class DynamicStylesPage : ContentPage
{
    bool originalStyle = true;

    public DynamicStylesPage ()
    {
        InitializeComponent ();
        Resources ["searchBarStyle"] = Resources ["blueSearchBarStyle"];
    }

    void OnButtonClicked (object sender, EventArgs e)
    {
        if (originalStyle) {
            Resources ["searchBarStyle"] = Resources ["greenSearchBarStyle"];
            originalStyle = false;
        } else {
            Resources ["searchBarStyle"] = Resources ["blueSearchBarStyle"];
            originalStyle = true;
        }
    }
}

For more details,please check document Dynamic Styles in Xamarin.Forms.

And there is a sample included in above ducument, you can check it here:https://learn.microsoft.com/en-us/samples/xamarin/xamarin-forms-samples/userinterface-styles-dynamicstyles/