Xamarin.Forms:C#代码与XAML代码

时间:2016-07-15 08:11:14

标签: c# xaml xamarin xamarin.forms

美好的一天。我正在创建一个简单的Xamarin.Forms(Portable)程序。我只是想,如果我能以某种方式" MERGE"或者可以将我的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中编写的代码?我怎样才能一起显示它们?

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

2 个答案:

答案 0 :(得分:5)

首先让我描述一下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方法。 MVVM in Xamarin.Forms

答案 1 :(得分: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,而不是创建新的布局。

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