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响应？现在，listview似乎在10＆＃34;屏幕。我该如何处理？

Answer 1

要获取ViewCell的布局，请使用以下内容（我遗漏了任何绑定）： -

        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，并放在Drawable's的{{1}}部分。

更新1： -

对于Resources，请确保将图片指定为WindowsPhone的{{1}}，并将图片放在项目文件夹的根目录中。

正确完成后，以下是来自Build Action和Content的几张图片： -

Answer 2

图像的文件路径“Images / img.png”可能不正确。该目录从.cs文件的当前目录说，在同一级别有一个名为Images的文件夹，在Images文件夹中有一个文件名为img.png的图像。请检查是否属实。如果我看到你的目录结构，我会有一个不同的答案。但这是我首先要看的地方。

根据您提供的目录结构，文件路径应为"~/Images/img.png"

Stacklayout对齐的设计问题

2 个答案: