locked
Bindings in a ControlTemplate with GradientStops RRS feed

  • Question

  • User390259 posted

    I have a ControlTemplate where I pass in two BindableProperties (CardPrimaryColor, CardSecondaryColor)

    <ctrls:CardView CardDescription="{Binding Name}" CardPrimaryColor="AliceBlue" CardSecondaryColor="White" CardSubtitle="{Binding LastUpload, Converter={StaticResource DateConverter}, ConverterParameter='g'}" CardTitle="{Binding Nr}" IconImageSource="{Binding SyncIcon}"> <ctrls:CardView.GestureRecognizers> <TapGestureRecognizer Command="{Binding Source={RelativeSource AncestorType={x:Type vm:SampleListPageViewModel}}, Path=OnItemTapped}" CommandParameter="{Binding .}" /> </ctrls:CardView.GestureRecognizers> </ctrls:CardView> <Style TargetType="ctrls:CardView"> <Setter Property="ControlTemplate" Value="{StaticResource CardViewControlTemplate}" /> </Style>

    If I bind the BackgroundColor of the Frame, this works correctly and gives me a solid color background. Trying to get a gradient, I attempted to use the new Gradient functionality, but binding the GradientStop Colors does not work. If I hardcode the GradientStop colors, it works, so I don't really know what to do here. I tried with several RelativeSource markup extension bindings, but nothing worked. <ControlTemplate x:Key="CardViewControlTemplate"> <StackLayout> <Frame <!-- This works: --> <!-- BackgroundColor="{Binding CardPrimaryColor}" --> Margin="10,0,10,0" BindingContext="{Binding Source={RelativeSource TemplatedParent}}" BorderColor="{Binding BorderColor, FallbackValue='DarkGray'}" CornerRadius="10" HasShadow="True"> <Frame.Background> <LinearGradientBrush StartPoint="0,0" EndPoint="1,0"> <!-- This DOES NOT work :( --> <GradientStop Offset="0.1" Color="{Binding CardSecondaryColor, FallbackValue='White'}" /> <GradientStop Offset="1.0" Color="{Binding CardPrimaryColor}" /> </LinearGradientBrush> </Frame.Background> ... </Frame> </StackLayout> </ControlTemplate>

    I am at a loss, any insight is greatly appreciated. Thanks!

    Friday, August 28, 2020 3:13 PM

Answers

  • User369978 posted

    It is happening because the binding path is incorrect , you could forcibly change the BindingContext path , something like this

    <StackLayout x:Name="stackLayout">
        <Frame
            Margin="10,0,10,0"
           CornerRadius="10"
           HasShadow="True">
            <Frame.Background>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                    <GradientStop  Offset="0.1" Color="{Binding Source={x:Reference stackLayout},Path=BindingContext.Color}" />
                    <GradientStop Offset="1.0" Color="Yellow" />
                </LinearGradientBrush>
            </Frame.Background>  
        </Frame>
    </StackLayout>
    
    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Monday, August 31, 2020 8:53 AM

All replies

  • User369978 posted

    It is happening because the binding path is incorrect , you could forcibly change the BindingContext path , something like this

    <StackLayout x:Name="stackLayout">
        <Frame
            Margin="10,0,10,0"
           CornerRadius="10"
           HasShadow="True">
            <Frame.Background>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                    <GradientStop  Offset="0.1" Color="{Binding Source={x:Reference stackLayout},Path=BindingContext.Color}" />
                    <GradientStop Offset="1.0" Color="Yellow" />
                </LinearGradientBrush>
            </Frame.Background>  
        </Frame>
    </StackLayout>
    
    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Monday, August 31, 2020 8:53 AM
  • User390259 posted

    @ColeX said: It is happening because the binding path is incorrect , you could forcibly change the BindingContext path , something like this

    <StackLayout x:Name="stackLayout">
        <Frame
            Margin="10,0,10,0"
           CornerRadius="10"
           HasShadow="True">
            <Frame.Background>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                    <GradientStop  Offset="0.1" Color="{Binding Source={x:Reference stackLayout},Path=BindingContext.Color}" />
                    <GradientStop Offset="1.0" Color="Yellow" />
                </LinearGradientBrush>
            </Frame.Background>  
        </Frame>
    </StackLayout>
    

    That works, thank you!

    Monday, August 31, 2020 10:34 AM