Xamarin transform Xaml to c#

Question

I am using Xamaring form and I would like to transform my Xaml code into c# code.

I have manage to the XAML code but I do know how to do the c# code

here is my code :

<StackLayout Grid.Row="0"  Grid.Column="0" Grid.ColumnSpan="2"  x:Name="GridRectangle"   >
    <StackLayout.GestureRecognizers>
        <TapGestureRecognizer Tapped="OnImageNewsTappedGridRectangle"/>
    </StackLayout.GestureRecognizers>
    <AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
        <Image x:Name="GridRectangleImage"  Source="" Aspect="AspectFill" AbsoluteLayout.LayoutBounds="1,1,1,1" AbsoluteLayout.LayoutFlags="All"/>
        <AbsoluteLayout AbsoluteLayout.LayoutBounds="1,1,1,1" AbsoluteLayout.LayoutFlags="All" BackgroundColor="#66000000"  >
            <StackLayout Orientation="Vertical"  BackgroundColor="Transparent" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="1,1,1,1" >
                <StackLayout VerticalOptions="StartAndExpand" HorizontalOptions="StartAndExpand" Padding="3">
                    <Label x:Name="GridRectangleTitle" Text="" FontSize="Medium" TextColor="White" FontAttributes="Bold"></Label>
                </StackLayout>
                <StackLayout VerticalOptions="EndAndExpand" HorizontalOptions="EndAndExpand" Padding="3">
                    <Label x:Name="GridRectangleProviderAndDate" Text="" TextColor="White" FontSize="Small"  FontAttributes="Italic"></Label>
                </StackLayout>
            </StackLayout>
        </AbsoluteLayout>
    </AbsoluteLayout>
</StackLayout>

Here is the TapGestureRecognizer function:

 void OnImageNewsTappedGridRectangle(object sender, EventArgs args) {
     OnArticleTapped(GridRectangleUrl);
 }

Thanks for your help

Answer 1

There are some code to transform your code from xaml to C#, you can take a look:

This is your xaml code:

 <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <StackLayout
            x:Name="GridRectangle"
            Grid.Row="0"
            Grid.Column="0"
            Grid.ColumnSpan="2">
            <StackLayout.GestureRecognizers>
                <TapGestureRecognizer Tapped="OnImageNewsTappedGridRectangle" />
            </StackLayout.GestureRecognizers>
            <AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                <Image
                    x:Name="GridRectangleImage"
                    AbsoluteLayout.LayoutBounds="1,1,1,1"
                    AbsoluteLayout.LayoutFlags="All"
                    Aspect="AspectFill"
                    Source="a11.jpg" />
                <AbsoluteLayout
                    AbsoluteLayout.LayoutBounds="1,1,1,1"
                    AbsoluteLayout.LayoutFlags="All"
                    BackgroundColor="#66000000">
                    <StackLayout
                        AbsoluteLayout.LayoutBounds="1,1,1,1"
                        AbsoluteLayout.LayoutFlags="All"
                        BackgroundColor="Transparent"
                        Orientation="Vertical">
                        <StackLayout
                            Padding="3"
                            HorizontalOptions="StartAndExpand"
                            VerticalOptions="StartAndExpand">
                            <Label
                                x:Name="GridRectangleTitle"
                                FontAttributes="Bold"
                                FontSize="Medium"
                                Text="this is stacklayout1"
                                TextColor="White" />
                        </StackLayout>
                        <StackLayout
                            Padding="3"
                            HorizontalOptions="EndAndExpand"
                            VerticalOptions="EndAndExpand">
                            <Label
                                x:Name="GridRectangleProviderAndDate"
                                FontAttributes="Italic"
                                FontSize="Small"
                                Text="this is stacklayout2"
                                TextColor="White" />
                        </StackLayout>
                    </StackLayout>
                </AbsoluteLayout>
            </AbsoluteLayout>
        </StackLayout>
    </Grid>

This is your corresponding C # in the page constructor, you can try.

Grid grid = new Grid();
        grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
        grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });

        grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
        grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });

        var GridRectangle = new StackLayout();

        var tapGestureRecognizer = new TapGestureRecognizer();
        tapGestureRecognizer.Tapped += (s, e) =>
        {
            // handle the tap
        };
        GridRectangle.GestureRecognizers.Add(tapGestureRecognizer);

        var layout = new AbsoluteLayout() { HorizontalOptions = LayoutOptions.FillAndExpand, VerticalOptions = LayoutOptions.FillAndExpand };

        var GridRectangleImage = new Image() { Source = "a11.jpg", Aspect = Aspect.AspectFill };
        AbsoluteLayout.SetLayoutBounds(GridRectangleImage, new Rectangle(1, 1, 1, 1));
        AbsoluteLayout.SetLayoutFlags(GridRectangleImage, AbsoluteLayoutFlags.All);

        var layout2 = new AbsoluteLayout() { BackgroundColor = Color.FromHex("#66000000") };
        AbsoluteLayout.SetLayoutBounds(layout2, new Rectangle(1, 1, 1, 1));
        AbsoluteLayout.SetLayoutFlags(layout2, AbsoluteLayoutFlags.All);

        var stacklayout1 = new StackLayout() { Orientation = StackOrientation.Vertical, BackgroundColor = Color.Transparent };
        AbsoluteLayout.SetLayoutBounds(stacklayout1, new Rectangle(1, 1, 1, 1));
        AbsoluteLayout.SetLayoutFlags(stacklayout1, AbsoluteLayoutFlags.All);

        var stacklayout2 = new StackLayout() { HorizontalOptions = LayoutOptions.StartAndExpand, VerticalOptions = LayoutOptions.StartAndExpand, Padding = 3 };

        var GridRectangleTitle = new Label() { Text = "this is stackalyout1", FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(Label)), FontAttributes = FontAttributes.Bold, TextColor = Color.White };

        stacklayout2.Children.Add(GridRectangleTitle);

        var stacklayout3 = new StackLayout() { HorizontalOptions = LayoutOptions.EndAndExpand, VerticalOptions = LayoutOptions.EndAndExpand, Padding = 3 };

        var GridRectangleProviderAndDate = new Label() { Text = "this is stackalyout2", FontSize = Device.GetNamedSize(NamedSize.Small, typeof(Label)), FontAttributes = FontAttributes.Italic, TextColor = Color.White };

        stacklayout3.Children.Add(GridRectangleProviderAndDate);

        stacklayout1.Children.Add(stacklayout2);
        stacklayout1.Children.Add(stacklayout3);

        layout2.Children.Add(stacklayout1);

        layout.Children.Add(GridRectangleImage);
        layout.Children.Add(layout2);

        GridRectangle.Children.Add(layout);

        grid.Children.Add(GridRectangle, 0, 0);
        Grid.SetColumnSpan(GridRectangle, 2);
        this.Content = grid;

Answer 2

Here is a sample of C# and XAML of the same page.
C#

public class MyPage : ContentPage
{
    Button loginButton;
    StackLayout layout;

    public MyPage()
    {
        layout = new StackLayout
        {
            Children =
            {
                new Label { Text = "Please log in" },
                new Label { Text = "Username", TextColor = Color.Black },
                new Entry (),
                new Label { Text = "Password", TextColor = Color.Black },
                new Entry { IsPassword = true },
            }
        };
        loginButton = new Button { Text = "Login" };
        layout.Children.Add(loginButton);
        Content = layout;
        loginButton.Clicked += (sender, e) =>
        {
            Debug.WriteLine("Clicked !");
        };
    }
}

XAML Sample

<?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="Sample.MyPage">
   <ContentPage.Content>
        <StackLayout>
            <Label Text="Please log in" />
            <Label Text="Username" TextColor="Black" />
            <Entry />
            <Label Text="Password" TextColor="Black" />
            <Entry IsPassword="true" />
            <Button Text="Log in" Clicked="LoginButton_Clicked" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

I would take some time and learn Xamarin and the benefits of using XAML for the UI and behavior logic in C# code. One huge benefit is the preview support built in to Visual Studio. I think you will see (and other will agree) that this separation of concerns is the preferred way to develop.