Stacklayout对齐的设计问题

Question

我想在我的xamarin.forms应用程序中使用开关控件的列表视图。我使用了一个stacklayout来对齐我的listview内容。我想要一个图像，2个标签和一个开关控件显示在每个列表项上。我无法按照我想要的方式将它们全部对齐。

我附上了4张图片。图1显示了所需的设计，图像2是Android上的输出，图像3在我所得到的windows设备上输出，图像4是文件夹结构。

这是我使用的stacklayout结构。我也用RelativeLayout尝试过，但似乎也没有工作。

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 

    } 
}; 

此外，这里的问题是我无法让我的图像出现在任何设备上。任何有关设计问题和显示图像的帮助都将有所帮助。

编辑 我想知道如何使这个listview响应？目前的列表视图似乎在10英寸的屏幕上变得很小，我该如何处理它？

Answer 1

要获取ViewCell使用类似的布局的目录结构"~/Images/img.png"基地下面（我已经离开了任何绑定）： -

 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); 

对于图像文件放置指here，这将是有益的。

即Android，您需要确保图像为AndroidResource，并且放置在Resources的Drawable's部分。

更新1： -

对于WindowsPhone确保图像被指定为ContentBuild Action，并把图像中的项目文件夹的根目录。

下面是Android和WindowsPhone一对夫妇的照片，一旦你做得正确的事情： -

Answer 2

您的文件路径“Images/img.png”可能不正确，该目录从当前目录在.cs文件中，在同一级别有一个名为Images的文件夹，Images文件夹内有一个文件名为img.png的图片，请检查是否为true。如果我看到了您的目录结构，我会得到一个明确的答案。这是我会先看看。

文件路径应该是从您提供