Xamarin.Forms：C＃代碼與XAML代碼

Question

美好的一天。 我正在創建一個簡單的Xamarin.Forms（Portable）程序。 我只是在想，如果我能以某種方式“合並”或者可能將我的XAML文件中的Label調用到我的XAML.cs. 可能嗎？ 因為每次我在XAML.cs中編寫代碼時，我在XAML文件中的現有代碼似乎都沒有出現。

例如，我在SalesPage.xaml.cs中有這個代碼

 public partial class SalesPage : ContentPage
{
    Label resultsLabel;
    SearchBar searchBar;
    public SalesPage()
    {
        resultsLabel = new Label
        {   
            Text = "Result will appear here.",
            VerticalOptions = LayoutOptions.FillAndExpand,
            FontSize = 25
        };

        searchBar = new SearchBar
        {
            Placeholder = "Enter search term",
            SearchCommand = new Command(() => { resultsLabel.Text = "Result: " + searchBar.Text + " is what you asked for."; })
        };
 Content = new StackLayout
  {
            VerticalOptions = LayoutOptions.Start,
            Children = {
                new Label {
                    HorizontalTextAlignment = TextAlignment.Center,
                    Text = "SearchBar",
                    FontSize = 50,
                    TextColor = Color.Purple
                },
                searchBar,
                resultsLabel,

                    new Label {
                    HorizontalTextAlignment = TextAlignment.Center,
                    Text = "SearchBar",
                    FontSize = 50,
                    TextColor = Color.Purple
                },


                new ScrollView
                {
                    Content = resultsLabel,
                    VerticalOptions = LayoutOptions.FillAndExpand
                }
            },
            Padding = new Thickness(10, Device.OnPlatform(20, 0, 0), 10, 5)
        };
 }

屏幕上唯一出現的是我在Xaml.cs上編碼的那個。

看看這個。

我在我的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="XamarinFormsDemo.Views.SalesPage"
             BackgroundImage="bg3.jpg"
             Title="Sales Page">

     <Label x:Name="SalesLabel"
           VerticalOptions="Center"
           HorizontalOptions="Center" />

  </ContentPage>

如何在屏幕上顯示我在XAML.CS中編寫的代碼和我在XAML中編寫的代碼？ 我怎樣才能一起顯示它們？

非常感謝。 非常感謝您的幫助。

Answer 1

首先讓我描述一下XAML + Code-Behind概念是如何工作的，然后回到你的問題。 首先讀取並解析XAML文件，然后創建UI。 然后執行后面的代碼，您可以在其中對UI進行一些調整。 這意味着您可以通過其Name屬性訪問XAML的所有控件。 在上面的示例中，您可以將其添加到后面的代碼中：

SalesLabel = "My new Label";

它會覆蓋您在XAML中定義的標簽。 如果您需要動態確定標簽，這可以變得很方便。

如果要在XAML 之外動態添加內容，則必須訪問現有控件並將內容添加到該控件。

您定義的XAML文件具有隱式“Content”屬性。 我將此添加到您的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="XamarinFormsDemo.Views.SalesPage"
         BackgroundImage="bg3.jpg"
         Title="Sales Page">
 <Content>
  <Label x:Name="SalesLabel"
         VerticalOptions="Center"
         HorizontalOptions="Center" />
 </Content>
</ContentPage>

Content屬性不是“聚合”意味着您只能對內容進行一次控制而不是控件列表。 要顯示多個控件，需要一個可以保存聚合的控件，如StackLayout 。

但是，由於您沒有在XAML文件中指定此類控件，而是直接覆蓋代碼中的Content屬性，因此即使在屏幕上看到它之前，它也會在運行時被替換。

Content = new StackLayout
{ <your other code> }

如果在后面的代碼中刪除它，您將在運行時看到XAML內容。

現在要解決您的問題，請在XAML中創建視圖的所有靜態部分。 當您對結果感到滿意時，請轉到后面的代碼，選擇您需要動態增強或調整的控件，並對這些控件進行調整。

這是最基本的方法。 對於更復雜的UI或更復雜的解決方案，我至少可以使用動態UI的數據綁定來命名MVVM方法。 Xamarin.Forms中的MVVM

Answer 2

您在XAML中定義了布局，但隨后用代碼隱藏覆蓋它，嘗試更改代碼，如下所示：

SalesPage.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="XamarinFormsDemo.Views.SalesPage"
             BackgroundImage="bg3.jpg"
             Title="Sales Page">
  <StackLayout x:Name="MainLayout">    
     <Label x:Name="SalesLabel"
           VerticalOptions="Center"
           HorizontalOptions="Center" />
  </StackLayout>
</ContentPage>

然后，您只需在代碼隱藏中創建子元素並將它們添加到MainLayout，而不是創建新的布局。

SalesPage.xaml.cs

var scrollview = new ScrollView()
   {
       Content = resultsLabel,
       VerticalOptions = LayoutOptions.FillAndExpand
   };
MainLayout.Children.Add(scrollview);

舉個例子，為你的所有元素做這個

編輯

您的代碼應如下所示。 並且不要忘記修改你的XAML，就像我上面做的那樣。

public partial class SalesPage : ContentPage
{
    Label resultsLabel;
    SearchBar searchBar;
    public SalesPage()
    {
        resultsLabel = new Label {   //...  };
        searchBar = new SearchBar {   //...  };
        var searchLabel = new Label() 
        {
            HorizontalTextAlignment = TextAlignment.Center,
            Text = "SearchBar",
            FontSize = 50,
            TextColor = Color.Purple
        };
        MainLayout.Add(searchLabel);
        MainLayout.Add(searchBar);
        MainLayout.Add(resultsLabel);
        MainLayout.Add(searchLabel);
        var scrollView = new ScrollView()
        {
            Content = resultsLabel,
            VerticalOptions = LayoutOptions.FillAndExpand
        };
        MainLayout.Add(scrollView);
        MainLayout.VerticalOptions = LayoutOptions.Start;
        MainLayout.Padding =  new Thickness(10, Device.OnPlatform(20, 0, 0), 10, 5); 
    }
}