使 2 单元格水平堆栈布局占设备屏幕宽度的 50%

Question

我想在 Xamarin Forms 项目中将图像设为屏幕大小的 50%。我似乎无法找到明确的答案。我发现了一篇关于 Xamarin.Labs 的古老博客 post，但不确定这是否仍然相关。

选项 1 是尝试使堆栈布局中的每个 child 占 50%

var horizontalLayout = new StackLayout ();
horizontalLayout.Orientation = StackOrientation.Horizontal;

//What do I add here?    

//add views to the view hierarchy
horizontalLayout.Children.Add (Photo ());
horizontalLayout.Children.Add (textLayout);

选项 2 使图像宽度为 50%

private Image Photo ()
{
    var image = new Image ();
    image.WidthRequest = ??;
    image.SetBinding (Image.SourceProperty, "Member.MemberPhoto");
    return image;
}

textLayout也是堆叠布局，在图片右边

StackLayout textLayout = new StackLayout ();

textLayout.Children.Add (CompanyName ());
textLayout.Children.Add (SubCategory ());
textLayout.Children.Add (Address ());

Answer 1

使用 Grid 作为外部容器，并使用 GridLength 1 和 GridUnitType Star 指定 ColumnDefinition，如下所示：-

Grid objGrid = new Grid()
{
    VerticalOptions = LayoutOptions.StartAndExpand
};
objGrid.ColumnDefinitions.Add(new ColumnDefinition
{
    Width = new GridLength(1, GridUnitType.Star)
});
objGrid.ColumnDefinitions.Add(new ColumnDefinition
{
    Width = new GridLength(1, GridUnitType.Star)
});

下面显示的是一个 Button 的完整示例，单击它会显示图像大小被明确设置为各种值。

无论图像尺寸小，还是大于 50% 宽度区域，它都会保持 Grid 的布局保持在 50% 宽度。

例子：-

StackLayout objStackLayout = new StackLayout();

Grid objGrid = new Grid()
{
    VerticalOptions = LayoutOptions.StartAndExpand
};
objGrid.ColumnDefinitions.Add(new ColumnDefinition
{
    Width = new GridLength(1, GridUnitType.Star)
});
objGrid.ColumnDefinitions.Add(new ColumnDefinition
{
    Width = new GridLength(1, GridUnitType.Star)
});
objStackLayout.Children.Add(objGrid);


Image objImage = new Image()
{
    Source = ImageSource.FromFile(" {put some image here} "),
    VerticalOptions = LayoutOptions.Start
};
objGrid.Children.Add(objImage, 0,0);

Label objLabel = new Label();
objLabel.Text = "Some long text goes here.... blah blah blah.....    Some long text goes here.... blah blah blah.....    Some long text goes here.... blah blah blah.....    Some long text goes here.... blah blah blah.....    Some long text goes here.... blah blah blah.....    Some long text goes here.... blah blah blah.....    Some long text goes here.... blah blah blah.....    Some long text goes here.... blah blah blah.....    Some long text goes here.... blah blah blah.....   Some long text goes here.... blah blah blah..... ";
objGrid.Children.Add(objLabel, 1,0);


Button objButton = new Button();
objButton.Text = "Change Image Width"            ;
objButton.Clicked+=((o2,e2)=>
{
    if (objImage.WidthRequest == -1)
    {
        objImage.WidthRequest = 50;
    }
    else if (objImage.WidthRequest == 50)
    {
        objImage.WidthRequest = 150;
    }
    else if (objImage.WidthRequest == 150)
    {
        objImage.WidthRequest = 350;
    }
    else if (objImage.WidthRequest == 350)
    {
        objImage.WidthRequest = 50;
    }
});
objStackLayout.Children.Add(objButton);

使 2 单元格水平堆栈布局占设备屏幕宽度的 50%

Make a 2 cell horizontal stack layout 50% of device screen width

xamarin

xamarin.forms