Xamarin Xaml StackLayout在地圖上

我創建了一個頁面，它接受某個位置的某些詳細信息（包括緯度/經度），然後顯示地圖和詳細信息。隨着代碼在Android模擬器渲染的UI很好。嘗試在XAML中執行此操作時，我無法正確顯示它 - 儘管嘗試儘可能以最佳方式在XAML中複製代碼。Xamarin Xaml StackLayout在地圖上

的代碼是：

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

這將呈現爲： Map when using code

隨着XAML下面它呈現如圖所示：

<?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>

Map when using XAML

正如您所看到的，我試圖將代碼複製到XAML中，但無濟於事。請在XAML的代碼中完成相同的UI渲染協助嗎？

謝謝先進。

來源

2016-12-31 Bash Robson

參數爲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">

來源

2016-12-31 16:49:20 Jason

這工作。非常感謝Jason。我得到了在XAML中混合的Grid.Row =「1」Grid.Column =「0」。 –

Xamarin Xaml StackLayout在地圖上

回答

相關問題