Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

Bindings in a ControlTemplate with GradientStops

LateralusLateralus Member ✭✭
edited August 28 in Xamarin.Forms

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!

Best Answer

Answers

  • LateralusLateralus Member ✭✭

    @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!

Sign In or Register to comment.