Style to change TabStripItem margin.

[kevkov]

I am trying the alter the margin for TabStripItems. The margin is defined here

Material.Avalonia/Material.Styles/Resources/Themes/TabStripItem.axaml

Line 21 in fe103bd

Margin="24,12,24,12" HorizontalAlignment="Center"

The style I have added, with exaggerated values so the layout effect is obvious, is

        <Style Selector="TabStripItem /template/ ContentPresenter#headerContent">
            <Setter Property="Margin" Value="50,100,100,50"></Setter>
        </Style>

This does not change the margin though the style is recognised in the dev tools window:

The applied margin is that defined by Material.Avalonia. Can someone help me define a style that changes the margin please?

[kevkov]

For context, I am displaying the items on a phone and want to reduce the space taken by a horizontal TabStrip in portrait mode.

[kevkov]

This style applies the margin correctly:

        <Style Selector="TabStripItem:not(:selected) /template/ ContentPresenter#headerContent">
            <Setter Property="Margin" Value="50,100,100,50"></Setter>
        </Style>

The selector is used in the original style to specify opacity. I can understand why the selector is sufficient to apply the margin but not why it is necessary.

[SKProCH]

It doesn't work because of priority. Since it has been set inside a template it has a LocalValue priority:

Material.Avalonia/Material.Styles/Resources/Themes/TabStripItem.axaml

Line 21 in fe103bd

Margin="24,12,24,12" HorizontalAlignment="Center"

And your style can't override it.

I've changed it and now you can override it. Use

        <Style Selector="TabStripItem /template/ ContentPresenter#PART_HeaderContent">
            <Setter Property="Margin" Value="50,100,100,50"></Setter>
        </Style>

[kevkov]

Thanks very much. I will have to read up about this. I am fairly new Avalonia, having come via F#/Fabulous.Avalonia. Material.Avalonia is great.