0
votes

I've created a custom ViewCell that's supposed to be used in my ListView Same code works on Android but not on UWP (Windows Phone and Windows desktop alike).

The project is Xamarin Forms.

Differences

When I use it within my ListView...I can only see blank cells.

<?xml version="1.0" encoding="UTF-8"?>
<ViewCell xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AAA.Extensions.AttributeViewCell"
            Tapped="AttributeViewCell_OnTapped"
          >
<Grid
    x:Name="AttributeGrid"
    >
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <StackLayout
        Grid.Column="0"
        >
        <Label
            Text="{Binding Code}"
            TextColor="#000000"
            />
        <Label
            Text="{Binding Description}"
            TextColor="#000000"
            />
    </StackLayout>

    <StackLayout
        Grid.Column="1"
        x:Name="DynamicContentStackLayout"
        >

    </StackLayout>
</Grid>

My code behind

[XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class AttributeViewCell : ViewCell
    {
        #region Bindable Properties
        public static readonly BindableProperty CodeProperty = BindableProperty.Create(nameof(Code),typeof(string),typeof(AttributeViewCell), defaultBindingMode:BindingMode.TwoWay);
        public static readonly BindableProperty DescriptionProperty = BindableProperty.Create(nameof(Description), typeof(string), typeof(AttributeViewCell), defaultBindingMode:BindingMode.TwoWay);
        #endregion

        #region Properties
        /// <summary>
        /// Attribute Code
        /// </summary>
        public string Code
        {
            get => (string) GetValue(CodeProperty);
            set => SetValue(CodeProperty,value);
        }

        /// <summary>
        /// Attribute's description
        /// </summary>
        public string Description
        {
            get => (string) GetValue(DescriptionProperty);
            set => SetValue(DescriptionProperty, value);
        }
        #endregion

        public AttributeViewCell()
        {
            InitializeComponent ();
            this.BindingContext = this;
        }

        private void AttributeViewCell_OnTapped(object sender, EventArgs e)
        {
            // I CAN SEE BINDINGS here...
        }
    }

The binding is being done throughout a ViewModel The POCO's look like the following

public class Attribute
    {
        public string Code { get; set; }
        public string Description { get; set; }
    }

VM public class ProductDetailsPageViewModel : BaseViewModel { #region Fields private readonly AnonymousCheckerService _anonymousCheckerService; private List _attributes;

        #endregion

        #region Properties

        public List<Attribute> Attributes
        {
            get => _attributes;
            set
            {
                _attributes = value; 
                OnPropertyChanged();
            }
        }

        #endregion

        //basic ctor
        public ProductDetailsPageViewModel()
        {
            _aaa= new aaa();
            Attributes = _aaa.GetInfo("123").Attributes;
        }
    }

And finally, the ListView

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:extensions="clr-namespace:AnonymousCheckerApp.Extensions"
             x:Class="AnonymousCheckerApp.Views.ProductDetailsPage">
    <StackLayout>
        <ListView
            ItemsSource="{Binding Attributes}"
            >
            <ListView.ItemTemplate>
                <DataTemplate>
                    <extensions:AttributeViewCell
                        Code="{Binding Code}"
                        Description="{Binding Description}"
                        AttributeDetails="{Binding AttributeDetails}"
                        />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

and it's codebehind
public ProductDetailsPage()
        {

            var vm = new ProductDetailsPageViewModel();
            this.BindingContext = vm;

            InitializeComponent ();
        }

I've attached a Tapped event on the viewcell...I can see the bindings...

enter image description here

Edit 1

I've commented out the Grid code as I've found some other devs having issues with binding on elements stacked within Grid elements... Still not working and what's weird is that it properly "parses" the XAML elements but it fails to do the binding....What am I doing wrong ?

enter image description here

This is how it looks on Android enter image description here

1
Isn't it a different problem, maybe the text is white for some reason? Could you set the TextColor to Red or anything just to rule it out :)Gerald Versluis
I've updated the main thread...still not working, if I replace the Text={Binding} with some harcoded value it'll render.ExtremeSwat

1 Answers

1
votes

I have tested your code and reproduced your issue. This line this.BindingContext = this; is unnecessary. Because the AttributeViewCell is inherit ViewCell and you can use it in ListView DataTemplate directly. So Please delete the following line code from AttributeViewCell constructor.

 this.BindingContext = this;

enter image description here