Xamarin.Forms：C＃代码与XAML代码

Question

Good Day. I'm creating a simple Xamarin.Forms (Portable) program. I'm just thinking if I could somehow "MERGE" or maybe call my Label in my XAML file to my XAML.cs. Is it possible? Because everytime I write my code in XAML.cs, the existing code I have in XAML file doesn't seem to appear.

For example, I have this code in my 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)
        };
 }

The only thing that will appear on the screen is the one I coded on Xaml.cs.

Take a look at this.

I have this code in my XAML file :

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

How can I display to the screen the codes I write in XAML.CS and the one I code in XAML? How can I display them together?

Thanks a lot. Really appreciate your help.

Answer 1

First let me describe how the XAML + Code-Behind concept works and then go back to your issue. First the XAML file is read and parsed and it creates the UI. Then the code behind is executed where you can do some adjustments to the UI. That means you can access all controls of the XAML by its Name property. In your example above, you could add this to the code behind:

SalesLabel = "My new Label";

and it would overwrite the label you defined in XAML. This can become handy if you need to dynamically determine the label.

If you want to dynamically add content additionally to the XAML, you have to access an existing control and add the content to that control.

The XAML file you defined has an implicit "Content" property. I will add this to your XAML code (even though this would most probably return a compiler error) to illustrate this:

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

The Content property is no "aggregation" means you can only have ONE control for the content and not a list of controls. To display more than one control, one requires a control that can hold aggregations like a StackLayout .

But as you did not specify such a control in your XAML file but directly overwrite the Content property in your code behind, it gets replaced at runtime even before your see it on screen.

Content = new StackLayout
{ <your other code> }

If you remove this in the code behind, you will see the XAML content at runtime.

Now to solve your problem, create all static parts of your view already in XAML. When you are satistfied with the result, go to the code behind, select the controls you need to enhance or adjust dynamically and do the adjustments on those controls.

This is the very basic approach. For more complex UIs or more sophisticated solutions let me at least name the MVVM approach with data binding for dynamic UIs. MVVM in Xamarin.Forms

Answer 2

You define your layout in XAML, but then you overwrite it with your code-behind, try to change your code like this:

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>

Then you just create your child elements in code-behind and Add them to MainLayout, not create new Layout.

SalesPage.xaml.cs

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

Just one example, do this for all your elements

EDIT

Your code should look like this. And don't forget to modify your XAML also, like I do above.

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