2017-03-29 38 views
0

在我的應用程序,我需要一個網頁,將保存用戶的個人資料,但我一直在努力創造xamarin形式複雜的UI。建立在C#中的複雜佈局[Xamarin表格]

我看到這對xamarin文檔,但我不知道如何使用XAML和他們沒有對如何獲得在C#中相同的外觀任何例子。任何幫助將不勝感激!

文檔頁面:https://developer.xamarin.com/guides/xamarin-forms/user-interface/layouts/stack-layout/

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="TheBusinessTumble.StackLayoutPage" 
BackgroundColor="Maroon" 
Title="StackLayouts"> 
    <ContentPage.Content> 
     <ScrollView> 
      <StackLayout Spacing="0" Padding="0" BackgroundColor="Maroon"> 
       <BoxView HorizontalOptions="FillAndExpand" HeightRequest="100" VerticalOptions="Start" Color="Gray" /> 
       <Button BorderRadius="30" HeightRequest="60" WidthRequest="60" BackgroundColor="Red" HorizontalOptions="Center" VerticalOptions="Start" /> 
       <StackLayout HeightRequest="100" VerticalOptions="Start" HorizontalOptions="FillAndExpand" Spacing="20" BackgroundColor="Maroon"> 
        <Label Text="User Name" FontSize="28" HorizontalOptions="Center" VerticalOptions="Center" FontAttributes="Bold" /> 
        <Entry Text="Bio + Hashtags" TextColor="White" 
         BackgroundColor="Maroon" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" /> 
       </StackLayout> 
       <StackLayout Orientation="Horizontal" HeightRequest="50" BackgroundColor="White" Padding="5"> 
        <StackLayout Spacing="0" BackgroundColor="White" Orientation="Horizontal" HorizontalOptions="Start"> 
         <BoxView BackgroundColor="Black" WidthRequest="40" HeightRequest="40" HorizontalOptions="StartAndExpand" VerticalOptions="Center" /> 
         <Label FontSize="14" TextColor="Black" Text="Accent Color" HorizontalOptions="StartAndExpand" VerticalOptions="Center" /> 
        </StackLayout> 
        <StackLayout Spacing="0" BackgroundColor="White" Orientation="Horizontal" HorizontalOptions="EndAndExpand"> 
         <BoxView BackgroundColor="Maroon" WidthRequest="40" HeightRequest="40" HorizontalOptions="Start" VerticalOptions="Center" /> 
         <Label FontSize="14" TextColor="Black" Text="Primary Color" HorizontalOptions="StartAndExpand" VerticalOptions="Center" /> 
        </StackLayout> 
       </StackLayout> 
       <StackLayout Orientation="Horizontal"> 
        <Label FontSize="14" Text="Age:" TextColor="White" HorizontalOptions="Start" VerticalOptions="Center" WidthRequest="100" /> 
        <Entry HorizontalOptions="FillAndExpand" Text="35" TextColor="White" BackgroundColor="Maroon" /> 
       </StackLayout> 
       <StackLayout Orientation="Horizontal"> 
        <Label FontSize="14" Text="Interests:" TextColor="White" 
         HorizontalOptions="Start" VerticalOptions="Center" WidthRequest="100" /> 
        <Entry HorizontalOptions="FillAndExpand" Text="Xamarin.Forms" TextColor="White" BackgroundColor="Maroon" /> 
       </StackLayout> 
       <StackLayout Orientation="Horizontal"> 
        <Label FontSize="14" Text="Ask me about:" TextColor="White" HorizontalOptions="Start" VerticalOptions="Center" WidthRequest="100"/> 
        <Entry HorizontalOptions="FillAndExpand" Text="Xamarin, C#, .NET, Mono..." TextColor="White" BackgroundColor="Maroon" /> 
       </StackLayout> 
      </StackLayout> 
     </ScrollView> 
    </ContentPage.Content> 
</ContentPage> 

我目前有:

public class ProfilePageCS : ContentPage 
{ 
    public ProfilePageCS() 
    { 
     var layout = new StackLayout(); 

     var boxOne = new BoxView 
     { 
      Color = Color.Blue, 
      VerticalOptions = LayoutOptions.FillAndExpand, 
      HorizontalOptions = LayoutOptions.FillAndExpand, 
      HeightRequest = 450 
     }; 

     var boxTwo = new BoxView 
     { 
      Color = Color.Green, 
      VerticalOptions = LayoutOptions.FillAndExpand, 
      HorizontalOptions = LayoutOptions.FillAndExpand, 
      HeightRequest = 175 
     }; 

     layout.Children.Add(boxTwo); 
     layout.Children.Add(boxOne); 
     layout.Spacing = 0; 
     Content = layout; 
    } 
} 
+0

這被具體稱爲XAML。 – mindOfAi

+0

拍攝!好的,感謝修正 –

+2

,所以你的問題實質上是「請把這個巨大的XAML片段轉換成C#」?這對於SO來說並不合適。向我們展示您正在嘗試構建的用戶界面的模型並詢問關於您遇到問題的部分的特定問題可能更合適。 – Jason

回答

0

你可以只使用XAML編譯。您只需將一個屬性應用於該類,並且您將具有使用C#的相同優點(即性能),但是您將能夠輕鬆地在聲明式中定義元素(即與XAML一樣) 。

0

如果你是剛開始接觸Xamarin形式,它是真正值得你去學習XAML,並用它來描述頁面,而不是使用代碼的努力。

你正在服用會導致代碼難以閱讀和維護的方法。您將最終在同一個文件中使用UI和業務邏輯。您將無法使用MVVM模式,單元測試變得更加困難。

Here is the first page一系列幫助你瘦XAML。互聯網上有很多其他資源。

這是您在上面描述的佈局的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="Example.Pages.MainPage"> 

    <Grid> 

     <Grid.RowDefinitions> 
      <RowDefinition Height="3*"/> 
      <RowDefinition Height="7*"/> 
     </Grid.RowDefinitions> 

     <StackLayout Grid.Row="0"> 
      <Image Source="image.png"/> 
      <Label Text="Image Caption"/> 
     </StackLayout> 

    </Grid> 

</ContentPage>