GradientStopCollection does not work when used in Style

[developer9969]

hi I love this control and I am now upgrading from 1.4.2 , big jump. We use Styles quite a lot and noticed that when referencing a style the gradient stop does not seem to apply.

Any Suggestions?

Below works

<yummy:PancakeView  Margin="0,32,0,0" BackgroundGradientStartPoint="0,0" BackgroundGradientEndPoint="0,1" HorizontalOptions="FillAndExpand" HeightRequest="150" CornerRadius="10" >
            <yummy:PancakeView.BackgroundGradientStops>
                <yummy:GradientStopCollection>
                    <yummy:GradientStop Color="{StaticResource ColorStart}" Offset="0" />
                    <yummy:GradientStop  Color="{StaticResource ColorEnd}" Offset="1" />
                </yummy:GradientStopCollection>
            </yummy:PancakeView.BackgroundGradientStops>
            <Label Text="There are no mistakes, only happy accidents." TextColor="White" HorizontalTextAlignment="Center" VerticalOptions="Center" HorizontalOptions="Center" />
        </yummy:PancakeView>`

This does not works

  <ContentPage.Resources>      
   <Color x:Key="ColorStart">Blue</Color>
    <Color x:Key="ColorEnd">White</Color>
    <Color x:Key="ColorRed">Red</Color>

    <Style x:Key="TestStylePancake" TargetType="yummy:PancakeView"  >
         <Setter Property="Margin" Value="0,32,0,0"></Setter>
        <Setter Property="HorizontalOptions" Value="FillAndExpand"></Setter>
        <Setter Property="HeightRequest" Value="150"></Setter>
        <Setter Property="CornerRadius" Value="10"></Setter>
        <Setter Property="BackgroundGradientStartPoint" Value="0,0"></Setter>
        <Setter Property="BackgroundGradientEndPoint" Value="0,1"></Setter>
        <Setter Property="BackgroundGradientStops">
            <GradientStopCollection>
                <GradientStop Color="{StaticResource ColorStart}" Offset="0"></GradientStop>
                <GradientStop Color="{StaticResource ColorEnd}" Offset="1"></GradientStop>
            </GradientStopCollection>
        </Setter>
        <Setter Property="Border">
            <yummy:BorderMarkup Color="{StaticResource ColorRed}" Thickness="2"/>
        </Setter>
    </Style>
</ContentPage.Resources>

<yummy:PancakeView Style="{StaticResource TestStylePancake}" >
            <Label Text="There are no mistakes, only happy accidents." TextColor="White" HorizontalTextAlignment="Center" VerticalOptions="Center" HorizontalOptions="Center" />
        </yummy:PancakeView>

[arahmancsd]

I faced this issue. I solved it with MVVM binding. So what you can do is to define colors in your MVVM and then bind it in the color properties.

[developer9969]

Hi thanks for you reply we prefer not have any colours in Mvvm but we have a.resource. Dictionary X page where we put all style ,this is bcse we have a white label app. Each client can have a different look and feel.ideally it should be fixed otherwise we do in xaml refencing the colours as static resources

[Shrp77]

Try this:

    <Setter Property="BackgroundGradientStops">
        <Setter.Value>
            <pv:GradientStopCollection>
                <pv:GradientStop
                    Color="{DynamicResource PancakeButtonLow}"
                    Offset="0" />
                <pv:GradientStop
                    Color="{DynamicResource PancakeButtonHigh}"
                    Offset="1" />
            </pv:GradientStopCollection>
        </Setter.Value>
    </Setter>