Layout issue using ContentView inside StackLayout

Hi all.

I am not yet an expert on Layout, and i am having an issue with a simple layout.

I have a contentview that shows a grid of images. When i use this ContentView directly on ContentPage.Content tag, my grid show filling full screen. When i put this inside a StackLayout (because i need to use this grid only in half contentpage), it does not fill full screen, same using FillAndExpand for Horizontal and Vertical.

Some code:

ViewModel XamGridViewModel.cs:
public class XamGridViewViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private ObservableCollection _xamMockDataList;
public XamGridViewViewModel()
{
MockDataBind();
}

        public ObservableCollection<XamGridModel> XamMockDataList
        {
            get
            {
                return _xamMockDataList;
            }
            set
            {
                _xamMockDataList = value;
                if (PropertyChanged != null)
                {
                    PropertyChanged(this, new PropertyChangedEventArgs("XamMockDataList"));
                }
            }
        }

        void MockDataBind()
        {
            List<XamGridModel> lstImages = new List<XamGridModel>();
            for (int i = 0; i < 40; i++)
            {
                lstImages.Add(new XamGridModel()
                {
                    Position = i+1,
                    ImageUrl = "https://unsplash.it/300/300?image=" + (i+10)
                });
            }

            XamMockDataList = new ObservableCollection<XamGridModel>(lstImages);
        }
    }

ContentPage TestPage.xaml not filling full screen:
<?xml version="1.0" encoding="UTF-8"?>

<ContentPage.Content>



</ContentPage.Content>

ContentPage filling screen normally:
<?xml version="1.0" encoding="UTF-8"?>

<ContentPage.Content>

</ContentPage.Content>

ContentView code:
<?xml version="1.0" encoding="utf-8"?>

<ContentPage.ToolbarItems>

</ContentPage.ToolbarItems>

<controls:XamGridView.ItemTemplate>






</controls:XamGridView.ItemTemplate>

XamGridView custom control:
using System;
using System.Collections;
using Xamarin.Forms;

namespace XamGridViewForms.Controls
{
    public class XamGridView:Xamarin.Forms.View
    {

        /// <summary>
        /// Initializes a new instance of the <see cref="XamGridView"/> class.
        /// </summary>
        public XamGridView()
        {
            SelectionEnabled = true;
        }

        //
        // Static Fields
        //
        /// <summary>
        /// The items source property
        /// </summary>
        public static readonly BindableProperty ItemsSourceProperty = BindableProperty.Create ("ItemsSource", typeof (IEnumerable), typeof (XamGridView), null, BindingMode.OneWay, null, null, null, null);

        /// <summary>
        /// The item template property
        /// </summary>
        public static readonly BindableProperty ItemTemplateProperty = BindableProperty.Create ("ItemTemplate", typeof (DataTemplate), typeof (XamGridView), null, BindingMode.OneWay, null, null, null, null);

        /// <summary>
        /// The row spacing property
        /// </summary>
        public static readonly BindableProperty RowSpacingProperty = BindableProperty.Create ("RowSpacing", typeof (double), typeof (XamGridView), 0.0, BindingMode.OneWay, null, null, null, null);

        /// <summary>
        /// The column spacing property
        /// </summary>
        public static readonly BindableProperty ColumnSpacingProperty = BindableProperty.Create ("ColumnSpacing", typeof (double), typeof (XamGridView), 0.0, BindingMode.OneWay, null, null, null, null);

        ///// <summary>
        ///// The item width property
        ///// </summary>
        //public static readonly BindableProperty ItemWidthProperty = BindableProperty.Create ("ItemWidth", typeof (double), typeof (XamGridView), 100.0, BindingMode.OneWay, null, null, null, null);

        ///// <summary>
        ///// The item height property
        ///// </summary>
        //public static readonly BindableProperty ItemHeightProperty = BindableProperty.Create ("ItemHeight", typeof (double), typeof (XamGridView), 100.0, BindingMode.OneWay, null, null, null, null);

        /// <summary>
        /// The padding property
        /// </summary>
        public static readonly BindableProperty PaddingProperty = BindableProperty.Create<XamGridView, Thickness> (view => view.Padding, new Thickness (0), BindingMode.OneWay);

        /// <summary>
        /// The column spacing property
        /// </summary>
        public static readonly BindableProperty NoOfColumnsProperty = BindableProperty.Create ("NoOfColumns", typeof (int), typeof (XamGridView), 0, BindingMode.OneWay, null, null, null, null);

        //
        // Properties
        //
        /// <summary>
        /// Gets or sets the items source.
        /// </summary>
        /// <value>The items source.</value>
        public IEnumerable ItemsSource {
            get {
                return (IEnumerable)base.GetValue (XamGridView.ItemsSourceProperty);
            }
            set {
                base.SetValue (XamGridView.ItemsSourceProperty, value);
            }
        }

        /// <summary>
        /// Gets or sets the item template.
        /// </summary>
        /// <value>The item template.</value>
        public DataTemplate ItemTemplate {
            get {
                return (DataTemplate)base.GetValue (XamGridView.ItemTemplateProperty);
            }
            set {
                base.SetValue (XamGridView.ItemTemplateProperty, value);
            }
        }

        /// <summary>
        /// Gets or sets the row spacing.
        /// </summary>
        /// <value>The row spacing.</value>
        public double RowSpacing {
            get {
                return (double)base.GetValue (XamGridView.RowSpacingProperty);
            }
            set {
                base.SetValue (XamGridView.RowSpacingProperty, value);
            }
        }

        /// <summary>
        /// Gets or sets the column spacing.
        /// </summary>
        /// <value>The column spacing.</value>
        public double ColumnSpacing {
            get {
                return (double)base.GetValue (XamGridView.ColumnSpacingProperty);
            }
            set {
                base.SetValue (XamGridView.ColumnSpacingProperty, value);
            }
        }

        /// <summary>
        /// Gets or sets the column spacing.
        /// </summary>
        /// <value>The column spacing.</value>
        public int NoOfColumns {
            get {
                return (int)base.GetValue (XamGridView.NoOfColumnsProperty);
            }
            set {
                base.SetValue (XamGridView.NoOfColumnsProperty, value);
            }
        }

        ///// <summary>
        ///// Gets or sets the width of the item.
        ///// </summary>
        ///// <value>The width of the item.</value>
        //public double ItemWidth {
        //  get {
        //      return (double)base.GetValue (XamGridView.ItemWidthProperty);
        //  }
        //  set {
        //      base.SetValue (XamGridView.ItemWidthProperty, value);
        //  }
        //}

        ///// <summary>
        ///// Gets or sets the height of the item.
        ///// </summary>
        ///// <value>The height of the item.</value>
        //public double ItemHeight {
        //  get {
        //      return (double)base.GetValue (XamGridView.ItemHeightProperty);
        //  }
        //  set {
        //      base.SetValue (XamGridView.ItemHeightProperty, value);
        //  }
        //}

        /// <summary>
        /// Gets or sets the padding.
        /// </summary>
        /// <value>The padding.</value>
        public Thickness Padding {
            get {
                return (Thickness)base.GetValue (PaddingProperty);
            }
            set {
                base.SetValue (PaddingProperty, value);
            }
        }

        /// <summary>
        /// Occurs when item is selected.
        /// </summary>
        public event EventHandler<object> ItemSelected;

        /// <summary>
        /// Invokes the item selected event.
        /// </summary>
        /// <param name="sender">The sender.</param>
        /// <param name="item">Item.</param>
        public void InvokeItemSelectedEvent (object sender, object item)
        {
            if (this.ItemSelected != null) {
                this.ItemSelected.Invoke (sender, item);
            }
        }

        /// <summary>
        /// Gets or sets a value indicating whether [selection enabled].
        /// </summary>
        /// <value><c>true</c> if [selection enabled]; otherwise, <c>false</c>.</value>
        public bool SelectionEnabled {
            get;
            set;
        }
    }
}

Is there any idea of what i am doing wrong?

Answers

  • ColeXColeX Member, Xamarin Team Xamurai

    If you want to display the layout in half screen , you can use Grid and define its RowDefinitions.

    <Grid BackgroundColor="Black">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
    
        <StackLayout BackgroundColor="Red">
            <Entry x:Name="key" HorizontalTextAlignment="Center" IsPassword="True"/>
            <Button Text="Submit" x:Name="btn" Clicked="btn_Clicked"/>
             //other control
        </StackLayout>
    </Grid>
    
  • ShantimohanElchuriShantimohanElchuri USMember ✭✭✭✭✭

    @RafaelAddesso
    ... because i need to use this grid only in half contentpage), it does not fill full screen ...

    I don't understand what exactly you want. First you said you want to put it in half of the ContentPage but complain about it not being full screen. If you restrict it to half the page then how can it show full screen?

Sign In or Register to comment.