Xamarin Xaml堆栈布局图

我创建了一个页面，该页面接受某个位置的一些详细信息（包括Lat/Long），然后显示一个地图和该位置的详细信息。 通过这些代码，它可以在Android仿真器中呈现良好的UI。 当我试图在XAML中这样做时，我无法让它正确显示——尽管我尽可能地在XAML中复制代码

代码是：

public class TestDetailPage : ContentPage
{

    public TestDetailPage(TripLogEntry entry) {

        Title = "Entry Details";
        var mainLayout = new Grid
        {
            RowDefinitions = {
                new RowDefinition { Height = new GridLength (4, GridUnitType.Star) },
                new RowDefinition { Height = GridLength.Auto },
                new RowDefinition { Height = new GridLength (1, GridUnitType.Star) }}
        };

        var map = new Map();
        // Center the map around the log entry's location
        map.MoveToRegion(MapSpan.FromCenterAndRadius(new Position(entry.Latitude, entry.Longitude), Distance.FromMiles(.5)));
        // Place a pin on the map for the log entry's location
        map.Pins.Add(new Pin
        {
            Type = PinType.Place,
            Label = entry.Title,
            Position = new Position(entry.Latitude, entry.Longitude)
        });
        var title = new Label
        {
            HorizontalOptions = LayoutOptions.Center
        };
        title.Text = entry.Title;
        var date = new Label
        {
            HorizontalOptions = LayoutOptions.Center
        };
        date.Text = entry.Date.ToString("M");
        var rating = new Label
        {
            HorizontalOptions = LayoutOptions.Center
        };
        rating.Text = $"{entry.Rating} star rating";
        var notes = new Label
        {
            HorizontalOptions = LayoutOptions.Center
        };
        notes.Text = entry.Notes;
        var details = new StackLayout
        {
            Padding = 10,
            Children = { title, date, rating, notes }
        };
        var detailsBg = new BoxView
        {
            BackgroundColor = Color.White,
            Opacity = .8
        };
        mainLayout.Children.Add(map);
        mainLayout.Children.Add(detailsBg, 0, 1);
        mainLayout.Children.Add(details, 0, 1);
        Grid.SetRowSpan(map, 3);
        Content = mainLayout;
    }
}

<?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="TripLog.Pages.DetailPage" Title="Entry Details"
         xmlns:map="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps">
  <ContentPage.Content>
    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition Height="4*" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="1*" />
      </Grid.RowDefinitions>      
      <map:Map x:Name="DetailMap" Grid.RowSpan="3" />
      <BoxView x:Name="DetailsBG" BackgroundColor="Color.White" Grid.Row="0" Grid.Column="1" />
      <StackLayout Padding="10" Grid.Row="0" Grid.Column="1">
        <Label x:Name="EntryTitle" />
        <Label x:Name="EntryDate" />
        <Label x:Name="EntryRating" />
        <Label x:Name="EntryNotes" />
      </StackLayout>        
    </Grid>    
  </ContentPage.Content>
 </ContentPage>

这表现为：

使用下面的XAML进行渲染，如图所示：

public class TestDetailPage : ContentPage
{

    public TestDetailPage(TripLogEntry entry) {

        Title = "Entry Details";
        var mainLayout = new Grid
        {
            RowDefinitions = {
                new RowDefinition { Height = new GridLength (4, GridUnitType.Star) },
                new RowDefinition { Height = GridLength.Auto },
                new RowDefinition { Height = new GridLength (1, GridUnitType.Star) }}
        };

        var map = new Map();
        // Center the map around the log entry's location
        map.MoveToRegion(MapSpan.FromCenterAndRadius(new Position(entry.Latitude, entry.Longitude), Distance.FromMiles(.5)));
        // Place a pin on the map for the log entry's location
        map.Pins.Add(new Pin
        {
            Type = PinType.Place,
            Label = entry.Title,
            Position = new Position(entry.Latitude, entry.Longitude)
        });
        var title = new Label
        {
            HorizontalOptions = LayoutOptions.Center
        };
        title.Text = entry.Title;
        var date = new Label
        {
            HorizontalOptions = LayoutOptions.Center
        };
        date.Text = entry.Date.ToString("M");
        var rating = new Label
        {
            HorizontalOptions = LayoutOptions.Center
        };
        rating.Text = $"{entry.Rating} star rating";
        var notes = new Label
        {
            HorizontalOptions = LayoutOptions.Center
        };
        notes.Text = entry.Notes;
        var details = new StackLayout
        {
            Padding = 10,
            Children = { title, date, rating, notes }
        };
        var detailsBg = new BoxView
        {
            BackgroundColor = Color.White,
            Opacity = .8
        };
        mainLayout.Children.Add(map);
        mainLayout.Children.Add(detailsBg, 0, 1);
        mainLayout.Children.Add(details, 0, 1);
        Grid.SetRowSpan(map, 3);
        Content = mainLayout;
    }
}

<?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="TripLog.Pages.DetailPage" Title="Entry Details"
         xmlns:map="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps">
  <ContentPage.Content>
    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition Height="4*" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="1*" />
      </Grid.RowDefinitions>      
      <map:Map x:Name="DetailMap" Grid.RowSpan="3" />
      <BoxView x:Name="DetailsBG" BackgroundColor="Color.White" Grid.Row="0" Grid.Column="1" />
      <StackLayout Padding="10" Grid.Row="0" Grid.Column="1">
        <Label x:Name="EntryTitle" />
        <Label x:Name="EntryDate" />
        <Label x:Name="EntryRating" />
        <Label x:Name="EntryNotes" />
      </StackLayout>        
    </Grid>    
  </ContentPage.Content>
 </ContentPage>

如您所见，我试图将代码复制到XAML，但没有效果。 在XAML的代码中完成相同的UI呈现时，您是否可以提供帮助

---

感谢高级。

Grid.Children.Add（Element，Col，Row）的参数，这可能会违反直觉。在XAML中，您正在转换列值和行值

尝试将其切换到：

  <BoxView x:Name="DetailsBG" BackgroundColor="Color.White" Grid.Row="1" Grid.Column="0" />
  <StackLayout Padding="10" Grid.Row="1" Grid.Column="0">

---

Grid.Children.Add（Element，Col，Row）的参数，这可能违反直觉。在XAML中，您正在转换列值和行值

尝试将其切换到：

  <BoxView x:Name="DetailsBG" BackgroundColor="Color.White" Grid.Row="1" Grid.Column="0" />
  <StackLayout Padding="10" Grid.Row="1" Grid.Column="0">

这很有效。非常感谢，杰森。我在XAML中混合了Grid.Row=“1”Grid.Column=“0”。这很有效。非常感谢，杰森。我在XAML中混合了Grid.Row=“1”Grid.Column=“0”。