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.

Listview ViewCell showing blank

RonJohnsonRonJohnson USMember, University

I went throught the Xamarin.University recorded video and am trying to implement basic Listview with custom ViewCell. I have it practically identical to the course sample code...I'll provide data, model, and xaml...any help is greatly appreciated. Thanks everybody! Driving me crazy.

BlogPage.xaml:
`

    <ListView x:Name="listOfPosts" 
        RowHeight="80" 
        ItemTapped="OnItemTapped"
        ItemsSource="{Binding .}">

      <ListView.ItemTemplate>
        <DataTemplate>
          <ViewCell>
              <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                        <Label Grid.Column="1" Text="{Binding Title}" TextColor="Black" YAlign="Center" FontSize="Medium" />
                    <!--I had other labels hooked up but simplified it to one until i got it working-->                 
         </Grid>
          </ViewCell>
        </DataTemplate>
      </ListView.ItemTemplate>
    </ListView>

`

BlogPage.xaml.cs
namespace TestProject { public partial class BlogPage : ContentPage { public BlogPage () { InitializeComponent (); } async void OnItemTapped(object sender, ItemTappedEventArgs e) { BlogPost tappedPost = (BlogPost)e.Item; await this.Navigation.PushAsync (new BlogPostPage (tappedPost)); } } }

BlogPost.cs

`namespace TestProject
{
public class BlogPost : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged = delegate{};

    string title;
    public string Title { 
        get { return title; }
        set { SetProperty (ref title, value); }
    }

    string description;
    public string Description { 
        get { return description; }
        set { SetProperty (ref description, value);}
    }

    string datePosted;
    public string DatePosted { 
        get { return datePosted;}
        set { SetProperty (ref datePosted, value);}
    }

    string photoUrl;
    public string PhotoUrl { 
        get { return photoUrl;}
        set { SetProperty (ref photoUrl, value);}
    }


    bool SetProperty<T>(ref T field, T value, [CallerMemberName] string propertyName = "") 
    {
        if (!object.Equals(field, value)) {
            field = value;
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            return true;
        }
        return false;
    }
}

}`

BlogData.cs
`public class BlogData
{
public static IList Posts { get; private set; }

    public BlogData ()
    {
        Posts = new ObservableCollection<BlogPost> {
            new BlogPost {
                Title = "Test 1",
                Description = "hello world 0",
                DatePosted = "",
                PhotoUrl = "",
            },
            new BlogPost {
                Title = "Test 2",
                Description = "hello world 1",
                DatePosted = "",
                PhotoUrl = "",
            },
        };
    }
}`

I know i gave a lot, but i know most would preferably have all the code rather than not know about all the parts.

Answers

  • RonJohnsonRonJohnson USMember, University

    This was also my header for xaml file....
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:TestProject;assembly=TestProject" x:Class="TestProject.BlogPage" BindingContext="{x:Static local:BlogData.Posts}" Title="Blog">

  • Billy12ShovelsBilly12Shovels USUniversity ✭✭✭
    edited June 2015

    @RonJohnson Hello, I would like to help you.

    Here is a simple way I use Custom Cells

    public class CrewCell : ViewCell
    {
        public CrewCell()
        {
            Grid MainGrid = new Grid() { Padding = new Thickness(10, 0, 10, 0) };
            MainGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
            MainGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
            MainGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
            MainGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Auto) });
            this.View = MainGrid;
    
            BoxView view = new BoxView() { HorizontalOptions = LayoutOptions.FillAndExpand, VerticalOptions =                      LayoutOptions.FillAndExpand };
            view.SetBinding(BoxView.ColorProperty, "IsOnProject", BindingMode.Default, new IsOnProjConverter());
            MainGrid.Children.Add(view);
            Grid.SetColumnSpan(view, 2);
    
            Label CrewName = new Label() { TextColor = Color.Black, HorizontalOptions = LayoutOptions.Start, VerticalOptions = LayoutOptions.Center, };
            CrewName.SetBinding(Label.TextProperty, "CrewName");
            MainGrid.Children.Add(CrewName, 0, 0);
    
            Label Leader = new Label() { TextColor = Color.Black, HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center };
            Leader.SetBinding(Label.TextProperty, "Leader");
            MainGrid.Children.Add(Leader, 1, 0);
    
            BoxView LineDivider = new BoxView() { Color = Color.Black, HeightRequest = 1, HorizontalOptions = LayoutOptions.FillAndExpand };
            MainGrid.Children.Add(LineDivider, 0, 1);
            Grid.SetColumnSpan(LineDivider, 2);
        }
    }
    

    This line is important for binding to a model. CrewName on the left is the name of the Label, of course. "CrewName" is one of the properties in my model.

            CrewName.SetBinding(Label.TextProperty, "CrewName");
    

    Here is the model:

    public class Crew
    {
        public string CrewName { get; set; }
        public string Leader { get; set; }
        public bool IsOnProject { get; set; }
        public int Hours { get; set; }
        public string HourType { get; set; }
    }
    

    And to tie the listview to the custom cell:

            listview.ItemTemplate = new DataTemplate(typeof(CrewCell)),
    

    This can all be done without XAML, if you prefer.

    I hope this helps!

  • RonJohnsonRonJohnson USMember, University

    Thanks Cody, I appreciate the help! I read through your code and it helped me understand where i went wrong. For anyone who sees this, the problem was in BlogData..
    public BlogData () { Posts = new ObservableCollection<BlogPost> { new BlogPost { Title = "Test 1", Description = "hello world 0", DatePosted = "", PhotoUrl = "", }, new BlogPost { Title = "Test 2", Description = "hello world 1", DatePosted = "", PhotoUrl = "", }, }; }

    It should not be "public BlogData" but "static BlogData".

Sign In or Register to comment.