如何在StackLayout中更改颜色？

Question

I developing app with Visual Studio to Android , and I have file ItemsPage.xaml with this code :

<ContentPage.Content>
    <StackLayout>
        <ListView x:Name="ItemsListView" ItemsSource="{Binding Items}" VerticalOptions="FillAndExpand" HasUnevenRows="true" RefreshCommand="{Binding LoadItemsCommand}" IsPullToRefreshEnabled="true" IsRefreshing="{Binding IsBusy, Mode=OneWay}" CachingStrategy="RecycleElement" ItemSelected="OnItemSelected">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout x:Name="General" Orientation="Horizontal" HorizontalOptions="Fill" Padding="5">
                            <Image Source="{Binding FileName, Converter={StaticResource ImageConverter}}" HeightRequest="150" WidthRequest="150" AbsoluteLayout.LayoutBounds="250.25, 0.25, 50, 50 "/>
                        <StackLayout Orientation="Vertical">
                            <Label Text="ST:" /><Label Text = "{Binding ST_string}" FontSize="24" AbsoluteLayout.LayoutBounds="0.25, 0.25, 400, 40"/>
                            <Label Text="Folio:" /><Label Text = "{Binding Folio_string}" FontSize="24" AbsoluteLayout.LayoutBounds="0.25, 0.25, 400, 40"/>
                                <Label Text="txt" /><Label Text = "{Binding Sent} " FontSize="24" AbsoluteLayout.LayoutBounds="0.25, 0.25, 400, 40"/>
                        </StackLayout>

                    </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage.Content>

And in my ItemsPage.xaml.cs I can't access to my StackLayout with Name="General" , I need paint this with color, but I can't, please help.

In general I can't do General.Background, I don't know access this.

Thanks!

Answer 1

Elements inside a DataTemplate are not accessible from outside the DataTemplate ; this includes the code-behind (the xaml.cs file).

DataTemplates are handled in a special way. They're used as a template (hence the name) for each item inside the ListView . This means that at runtime there's going to be an instance of the contents inside the DataTemplate for each item. If you have 20 items in that list, there's going to be 20 StackLayout s with the name General . You can read about DataTemplates in the docs .

If you want to set the background color of the StackLayout , the easiest way is to do that directly on the StackLayout element:

<StackLayout x:Name="General" BackgroundColor="Blue" Orientation="Horizontal"...

Alternatively you can create a ContentView and put that inside the ViewCell . The BindingContext of the ContentView will automatically be set to the current item. ContentView s are a bit like ContentPage s, but you can use them inside a page like any other View (like a Button or a BoxView .

Edit

To add a ContentView right-click and add a new file, choose ContentView . Put the XAML inside ViewCell inside the ContentView :

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Testing.MyView">
    <ContentView.Content>
        <StackLayout x:Name="General" Orientation="Horizontal" HorizontalOptions="Fill" Padding="5">
            <Image Source="{Binding FileName, Converter={StaticResource ImageConverter}}" HeightRequest="150" WidthRequest="150" AbsoluteLayout.LayoutBounds="250.25, 0.25, 50, 50 " />
            <StackLayout Orientation="Vertical">
                <Label Text="ST:" />
                <Label Text="{Binding ST_string}" FontSize="24" AbsoluteLayout.LayoutBounds="0.25, 0.25, 400, 40" />
                <Label Text="Folio:" />
                <Label Text="{Binding Folio_string}" FontSize="24" AbsoluteLayout.LayoutBounds="0.25, 0.25, 400, 40" />
                <Label Text="txt" />
                <Label Text="{Binding Sent} " FontSize="24" AbsoluteLayout.LayoutBounds="0.25, 0.25, 400, 40" />
            </StackLayout>
        </StackLayout>
    </ContentView.Content>
</ContentView>

In the code-behind, you can access all controls:

public partial class MyView : ContentView
{
    public MyView()
    {
        InitializeComponent();

        General.BackgroundColor = true ? Color.Blue : Color.Brown;
    }
}

Then add the ContentView to the ViewCell :

<ListView x:Name="ItemsListView" ItemsSource="{Binding Items}" VerticalOptions="FillAndExpand" HasUnevenRows="true" RefreshCommand="{Binding LoadItemsCommand}" IsPullToRefreshEnabled="true" IsRefreshing="{Binding IsBusy, Mode=OneWay}" CachingStrategy="RecycleElement" ItemSelected="OnItemSelected">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <local:MyView/>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>