製作2單元水平堆棧佈局設備屏幕寬度的50％

Question

我想使圖像在Xamarin Forms項目上達到屏幕大小的50％。我似乎無法找到一個明確的答案，我如何去做這件事。我遇到了一篇關於Xamarin.Labs的古老博客文章，但不確定這是否仍然相關。

選項1是設法使每個孩子在stacklayout 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; 
} 

​​也是在右邊的堆棧佈局Ë圖像

StackLayout textLayout = new StackLayout(); 

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

Answer 1

使用Star 1和GridUnitType一個GridLength像這樣使用Grid作爲外容器，並指定一個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);