CODEWITHSUNDEEP
c#androidxaml
fabulias
fabulias

Reputation: 121

How to change color in StackLayout?

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!

Upvotes: 1

Views: 4874

Answers (1)

Jon G St&#248;dle
Jon G St&#248;dle

Reputation: 3904

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 StackLayouts 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. ContentViews are a bit like ContentPages, 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>

Upvotes: 1

Related Questions