Bind BackgroundColor of a view inside DataTemplate Xamarin.Forms

Question

I have a list view with a DataTemplate and inside it I have a StackLayout that I need set its background but the color of it is inside a variable...When I programmatically set the background of an object using this variable color it works, but when I try to use "binding" in xaml it doesn't work and I can't get this stack programmatically because it's inside a data template... I really need your answer.. Some help?

<ListView.ItemTemplate>
                <DataTemplate>
                    <!--<DataTemplate.Triggers>
                            <DataTrigger Binding="{Binding fundoColor}" Value="4">
                                <Setter TargetName="produtos_stack_color" Property="Background" Value="LawnGreen" />
                            </DataTrigger>
                        </DataTemplate.Triggers>-->

                    <ViewCell>

                        <StackLayout x:Name="produtos_stack_color" BackgroundColor="{Binding fundoColor}" VerticalOptions="FillAndExpand" Margin="10,10,10,10">
                            <StackLayout Orientation="Horizontal" Padding="10,10,10,10" BackgroundColor="Black" HorizontalOptions="FillAndExpand">
                                <Image Source="{Binding imagem}" HeightRequest="80" HorizontalOptions="CenterAndExpand" WidthRequest="160" Aspect="Fill"/>

                                <StackLayout Orientation="Horizontal" BackgroundColor="Green" VerticalOptions="Center" HorizontalOptions="CenterAndExpand">
                                    <Label Style="{StaticResource labelsfont}" Text="R$" FontSize="Medium" TextColor="White"/>
                                    <Label Style="{StaticResource labelsfont}" Text="{Binding valor}" FontAttributes="Bold" FontSize="Large" TextColor="White"/>
                                </StackLayout>

                            </StackLayout>

                            <StackLayout Margin="0,0,0,10">
                                <Label Text="{Binding nome}" Style="{StaticResource labelsfont}" FontAttributes="Bold" FontSize="Medium" TextColor="White" VerticalOptions="StartAndExpand" HorizontalOptions="Center"/>
                                <ContentView BackgroundColor="Chartreuse" HorizontalOptions="FillAndExpand">
                                    <Label Style="{StaticResource labelsfont}" Text="{Binding observacao}" TextColor="White" Margin="10,10,10,10" HorizontalOptions="Center" />
                                </ContentView>
                            </StackLayout>

                        </StackLayout>
                    </ViewCell>
                </DataTemplate>

I heard about triggers...but I really don't know how it works exactly... I need produtos_stack_color receive the color

My global variable in code behind...It is setted just in construct of my class

InitializeComponent();
fundoColor =  Color.FromHex(this.categEscolhida.corFundo);

Answer 1

You can only bind with properties - so you will have to create a property in code-behind class.

public Color FundoColor { get { return fundoColor; } }

Secondly, in order to refer this property in XAML - you can use Reference extension, and specify parent as Source. For e.g.:

<StackLayout x:Name="produtos_stack_color" 
             BackgroundColor="{Binding FundoColor, Source={x:Reference ParentHost}}" ..>

And, make sure to set x:Name attribute in root node of your XAML. For e.g:

<ContentPage x:Name="ParentHost" .. />