Xamarin.Forms Frame

Hello, in this post we gonna be look how we can use a Frame in Xamarin.Forms

This simple rectangular view sometimes is very usefull for presentation purposes.

The first, we add a new Page, called FramePage.

in the constructor we add a new View, the Frame View, also we declare some properties, like OutlineColor, and if we want that has Shadow around of the frame:

            this.Content = new Xamarin.Forms.Frame {
            //It has a few properties
                OutlineColor=Color.Blue,
                HasShadow=true,
}

So, to avoid that the frame fill all the page, we add the properties to center the frame inside of the page:

                HorizontalOptions=LayoutOptions.CenterAndExpand,

                VerticalOptions=LayoutOptions.CenterAndExpand,

And for last, we add the content of the frame, in this case we add a single Label,

Content= new Label{
                    Text="This is a Frame, in Xamarin.Forms",
                    TextColor=Color.White,
                    BackgroundColor=Color.Black
                }

Also, we can add a StackLayout, or something like that.

Now the Full Code.
public class FramePage : ContentPage
    {
        // In this page, we build the UI of our sample

        public FramePage ()
        {
            this.Content = new Xamarin.Forms.Frame {
            //It has a few properties
                OutlineColor=Color.Blue,
                HasShadow=true,
                //We add this two lines to avoid that the frame fill the page
                //
                HorizontalOptions=LayoutOptions.CenterAndExpand,
                VerticalOptions=LayoutOptions.CenterAndExpand,
                //Inside of frame we can add more content, for example a Label
                Content= new Label{
                    Text="This is a Frame, in Xamarin.Forms",
                    TextColor=Color.White,
                    BackgroundColor=Color.Black
                }
            };

            //Now we run our sample, and see in the emulators.
            //First iOS

            //Now on Android
        }
    }


Now, look the code running on iOS and Android:

Screenshots:

More information in:

https://developer.xamarin.com/guides/cross-platform/xamarin-forms/

Follow me on Twitterhttps://twitter.com/OsvaldoSan

Or find me in Linkedinhttps://mx.linkedin.com/in/osvaldo-santiago-estrada-15480741