Xamarin.Forms：C#代码 vs XAML代码

Question

Xamarin.Forms：C#代码 vs XAML代码

3

你好。我正在创建一个简单的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中编写的代码？如何将它们一起显示出来？

非常感谢，真的很感激你的帮助。

- Jaycee Evangelista

1

你的问题是当你运行你的应用程序时，你只看到了在你的.xaml.cs文件中编写的代码和.xaml文件中的代码，我说得对吗？ - M. Pipal

@M.Pipal，我只看到在我的Xaml.cs文件中编写的代码，而没有在.Xaml文件中的那个。 - Jaycee Evangelista

请问您能否在SalesPage.xaml.cs文件中“Content”之前添加一些代码呢？这个属性属于哪个元素？ - M. Pipal

1

@M.Pipal 好的，先生。我已经添加了代码。 - Jaycee Evangelista

2个回答

1

您在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 中，而不是创建新的 Layout。

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

- M. Pipal

1

我在使用这段代码时遇到了错误，先生。 var scrollview = new ScrollView { Content = resultsLabel, VerticalOptions = LayoutOptions.FillAndExpand } MainLayout.Children.Add(scrollview); 请问我应该把它放在哪里？ - Jaycee Evangelista

你需要删除所有以 "Content = new StackLayout{....};" 开头的代码，并对每个控件执行我上面所做的操作（创建并添加到 MainLayout）。 - M. Pipal

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Jaycee Evangelista

抱歉，出现了错误。在用户代码中未处理的 XamarinFormsDemo.dll 中发生了类型为“System.NullReferenceException”的异常。附加信息：对象引用未设置为对象的实例。 - Jaycee Evangelista

先生，我不能使用“ADD”这个术语。我遇到了这个错误。没有提供与“SettersExtensions.Add(IList<Setter>, BindableProperty, object)”的所需形式参数“value”相对应的参数。 - Jaycee Evangelista

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- eX0du5 · Accepted Answer

首先，让我描述一下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或更复杂的解决方案，让我至少提到使用数据绑定的MVVM方法来实现动态UI。 Xamarin.Forms中的MVVM