Design issue with Stacklayout alignment

Question

I would like to have a listview with switch control in my xamarin.forms app. I have used a stacklayout to align my content of the listview. I want a image, 2 labels and a switch control to display on each of the list item. I am unable to get it all aligned in the way i want it to.

I have attached 4 images. Image 1 shows the desired design and image 2 is the output on Android, an image 3 is output on windows device of what I get and image 4 is the folder structure.

Here is the stacklayout structure I am using. I have also tried it with RelativeLayout but doesn't seem to work either.

Label name = new Label();
name.SetBinding(Label.TextProperty, new Binding("Item.Name"));
name.HorizontalOptions = LayoutOptions.Start;
name.VerticalOptions = LayoutOptions.Center;

Label date = new Label();
date.SetBinding(Label.TextProperty, new Binding("Item.Date"));
date.HorizontalOptions = LayoutOptions.Start;
date.VerticalOptions = LayoutOptions.Center;

Image img = new Image();
img.Source = Device.OnPlatform(
iOS: ImageSource.FromFile("Images/img.png"),
Android: ImageSource.FromFile("Images/img.png"),
WinPhone: ImageSource.FromFile("Images/img.png"));

img.HorizontalOptions = LayoutOptions.Start;
img.VerticalOptions = LayoutOptions.Start;

Switch mainSwitch = new Switch();
mainSwitch.SetBinding(Switch.IsToggledProperty, new Binding("IsSelected"));
mainSwitch.HorizontalOptions = LayoutOptions.End;

/*RelativeLayout layout = new RelativeLayout();
layout.Children.Add(img,
    Constraint.Constant(5),
    Constraint.Constant(5),
    Constraint.RelativeToParent(p => p.Width - 60),
    Constraint.RelativeToParent(p => p.Height - 10)
);
layout.Children.Add(name,
    Constraint.Constant(5),
    Constraint.Constant(5),
    Constraint.RelativeToParent(p => p.Width - 60),
    Constraint.RelativeToParent(p => p.Height - 10)
);
layout.Children.Add(date,
    Constraint.Constant(5),
    Constraint.Constant(25),
    Constraint.RelativeToParent(p => p.Width - 60),
    Constraint.RelativeToParent(p => p.Height - 10)
);
layout.Children.Add(mainSwitch,
    Constraint.RelativeToParent(p => p.Width - 55),
    Constraint.Constant(5),
    Constraint.Constant(50),
    Constraint.RelativeToParent(p => p.Height - 10)
);*/
/*View = layout;*/

View = new StackLayout
{
    Children = {
        img,
        name,
        mainSwitch,
        date

    }
};

Also the issue here is I cannot get my image to show up on any of the device. Any help with design issue and showing up the image will be helpful.

Edit I would like to know how to make this listview responsive? Right now the listview seems to become tiny on a 10" screen. How do I handle that?

Answer 1

To get the layout for the ViewCell use something like the following (I have left out any bindings):-

        Grid objGrid = new Grid();
        objGrid.BackgroundColor = Color.Gray;
        //
        objGrid.RowDefinitions.Add(new RowDefinition
        {
          Height = new GridLength(1, GridUnitType.Star)
        });
        //
        objGrid.ColumnDefinitions.Add(new ColumnDefinition
        {
            Width = new GridLength(75, GridUnitType.Absolute)
        });
        objGrid.ColumnDefinitions.Add(new ColumnDefinition
        {
            Width = new GridLength(1, GridUnitType.Star)
        });
        objGrid.ColumnDefinitions.Add(new ColumnDefinition
        {
            Width = GridLength.Auto
        });

        //
        // Column 1:-
        Image objImage = new Image();
        objImage.BackgroundColor = Color.Green;
        objImage.Source = ImageSource.FromFile("Image1.png");
        objGrid.Children.Add(objImage, 0,0);

        //
        // Column 2:-
        StackLayout objStackLayoutCol2 = new StackLayout();            
        objGrid.Children.Add(objStackLayoutCol2, 1,0);

        Label objLabel1 = new Label()
        {
            Text = "Name"
        };
        Label objLabel2 = new Label()
        {
            Text = "Date"
        };
        objStackLayoutCol2.Children.Add(objLabel1);
        objStackLayoutCol2.Children.Add(objLabel2);

        //
        // Column 3:-
        Switch objSwitch = new Switch();
        objGrid.Children.Add(objSwitch, 2,0);

For image file placement refer to here that will be useful.

i.e. on Android, you will need to ensure the image is an AndroidResource and is placed in the Drawable's section in Resources.

Update 1:-

For WindowsPhone make sure the image is specified as Build Action of Content and put the image in the root of the project folder.

Here are a couple pictures from Android and WindowsPhone once you have done things correctly:-

Answer 2

Your file path "Images/img.png" to the image may be not be correct. This directory says from the current directory of the .cs file, there is a folder called Images at the same level and within Images folder is an image with file name img.png. Please check is this true. If I saw your directory structure I would have a difinitive answer. But this is where I would look first.

The file path should be "~/Images/img.png" base on the directory structure you provided