Why is my ContentView Style working only once through the page?

Question

I have the following style defined in my Content Page:

    <ContentPage.Resources>
        <ResourceDictionary>
            <Style TargetType="{x:Type ContentView}" x:Key="ColorScaleGordura">
                <Setter Property="Content">
                    <Setter.Value>
                        <StackLayout Orientation="Horizontal" Padding="15,0,15,0" HorizontalOptions="Center" Spacing="15" HeightRequest="30">
                            <Frame BackgroundColor="{StaticResource ColorScaleRed}" Style="{StaticResource NutrientColorFrameStyle}">
                                <Label Text="G" Style="{StaticResource NutrientInitialsStyle}"/>
                            </Frame>
                            <Frame BackgroundColor="{StaticResource ColorScaleDarkOrange}" Style="{StaticResource NutrientColorFrameStyle}">
                                <Label Text="G" Style="{StaticResource NutrientInitialsStyle}"/>
                            </Frame>
                            <Frame BackgroundColor="{StaticResource ColorScaleOrange}" Style="{StaticResource NutrientColorFrameStyle}">
                                <Label Text="G" Style="{StaticResource NutrientInitialsStyle}"/>
                            </Frame>
                            <Frame BackgroundColor="{StaticResource ColorScaleYellow}" Style="{StaticResource NutrientColorFrameStyle}">
                                <Label Text="G" Style="{StaticResource NutrientInitialsStyle}"/>
                            </Frame>
                            <Frame BackgroundColor="{StaticResource ColorScaleLightGreen}" Style="{StaticResource NutrientColorFrameStyle}">
                                <Label Text="G" Style="{StaticResource NutrientInitialsStyle}"/>
                            </Frame>
                            <Frame BackgroundColor="{StaticResource ColorScaleGreen}" Style="{StaticResource NutrientColorFrameStyle}">
                                <Label Text="G" Style="{StaticResource NutrientInitialsStyle}"/>
                            </Frame>
                            <Frame BackgroundColor="{StaticResource ColorScaleDarkGreen}" Style="{StaticResource NutrientColorFrameStyle}">
                                <Label Text="G" Style="{StaticResource NutrientInitialsStyle}"/>
                            </Frame>
                        </StackLayout>
                    </Setter.Value>
                </Setter>
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>

This is what it is supose to look like:

I've made this as a Style because I need it to repeat a lot of times through the page. I am using it like this:

<ContentView Style="{StaticResource ColorScaleGordura}"/>

And it works! But only once. No matter where in my page I paste the code line above, only one will work (usually the one further down the page). If I do something like this:

<StackLayout>
    <Label Text="test1"/>
    <ContentView Style="{StaticResource ColorScaleGordura}"/>
    <StackLayout>
        <Label Text="test2"/>
        <ContentView Style="{StaticResource ColorScaleGordura}"/>
        <StackLayout>
            <Label Text="test3"/>
            <ContentView Style="{StaticResource ColorScaleGordura}"/>
        </StackLayout>
    </StackLayout>
</StackLayout>

This is what I get:

What am I missing?

Don't know why this acts like that but you can just do a different thing, you have repeating controls just create a custom control then just use it — Nick Kovalsky, Aug 16 '18 at 07:03
Similar issue in *WPF Application* https://stackoverflow.com/questions/51307989/wpf-button-style-wont-apply-to-second-button — dhilmathy, Aug 16 '18 at 11:57
@NickKovalsky thank you, using a custom control solved my problem! — Nathalia Soragge, Aug 18 '18 at 06:28

dhilmathy · Accepted Answer · 2018-08-16T11:53:06.317

0

The issue is, you're trying to add the same Content to more than one ContentView. Elements (present in Style) cannot be added to more than one Logical Parents. To avoid this, you can set x:Shared="False" to your Style.

But i believe x:Shared only works in WPF application. I don't think there is other alternate for Xamarin.Forms. If your intention is repeat the StackLayout, you can try using RepeaterView with DataTemplate to achieve the expected.

There is a workaround available to do this, but the CreateContent() method seems to be unavailable. Still, you can make it working if above solution doesn't work for you.

edited Aug 16 '18 at 11:53

answered Aug 16 '18 at 11:16

dhilmathy

2,800
2
21
29

1

Thank you for explaining! I've ended up creating a custom control as suggested by Nick Kovalsky – Nathalia Soragge Aug 18 '18 at 06:27

Why is my ContentView Style working only once through the page?

1 Answers1