Bug 21377 - StackLayout overlapping on Android only
Summary: StackLayout overlapping on Android only
Status: RESOLVED FIXED
Alias: None
Product: Forms
Classification: Xamarin
Component: Forms ()
Version: 1.2.1
Hardware: PC Windows
: --- normal
Target Milestone: ---
Assignee: Bugzilla
URL:
: 21401 ()
Depends on:
Blocks:
 
Reported: 2014-07-16 14:34 UTC by Jon Douglas [MSFT]
Modified: 2014-07-17 19:29 UTC (History)
5 users (show)

Tags:
Is this bug a regression?: ---
Last known good build:

Notice (2018-05-24): bugzilla.xamarin.com is now in read-only mode.

Please join us on Visual Studio Developer Community and in the Xamarin and Mono organizations on GitHub to continue tracking issues. Bugzilla will remain available for reference in read-only mode. We will continue to work on open Bugzilla bugs, copy them to the new locations as needed for follow-up, and add the new items under Related Links.

Our sincere thanks to everyone who has contributed on this bug tracker over the years. Thanks also for your understanding as we make these adjustments and improvements for the future.


Please create a new report on Developer Community or GitHub with your current version information, steps to reproduce, and relevant error messages or log files if you are hitting an issue that looks similar to this resolved bug and you do not yet see a matching new report.

Related Links:
Status:
RESOLVED FIXED

Description Jon Douglas [MSFT] 2014-07-16 14:34:30 UTC
StackLayout behaved correctly while using 1.1.0.6201 before upgrading to 1.2.1.6229

iOS working fine:
http://screencast.com/t/ZFSTAValhb

Android seems to be stacking:
http://screencast.com/t/7o4e2rTB

Sample Page:

using ClevelandPlays.Core.MobileServices;
using ClevelandPlays.Mobile.Converters;
using ClevelandPlays.Mobile.Messages;
using ClevelandPlays.Mobile.ViewModels;
using ClevelandPlays.Mobile.Views;
using ClevelandPlays.Mobile.Custom;
using System;
using System.Collections.Generic;
using System.Text;
using Xamarin.Forms;
using ClevelandPlays.Mobile.Helpers;

namespace ClevelandPlays.Mobile.Pages
{
    public class SelectLeaguePage : BasePage
    {
        SelectLeagueViewModel viewModel;
        NotConverter notConverter = new NotConverter();

        protected override async void OnBindingContextChanged()
        {
            base.OnBindingContextChanged();

            viewModel = BindingContext as SelectLeagueViewModel;
            await viewModel.LoadDataAsync();

            var title = new Label
            {
                Text = "Select League",
                Font = Font.SystemFontOfSize(FontSize.Title),
                TextColor = Color.White
            };

            # region Season Filter
            var seasonLabel = new Label
            {
                Text = "Season",
                Font = Font.SystemFontOfSize(NamedSize.Small),
                TextColor = Color.White
            };

            var seasonPicker = new ExtendedPicker<tSeason> { WidthRequest = 140, Title = "Season" };
            seasonPicker.SetBinding(ExtendedPicker<tSeason>.SelectedItemProperty, new Binding(SelectLeagueViewModel.SelectedSeasonNamePropertyName, BindingMode.TwoWay));

            seasonPicker.SelectedIndexChanged += (sender, args) =>
            {
                viewModel.FilterCommand.Execute(null);
            }; 
            
            seasonPicker.ItemsSource = viewModel.Seasons;
            seasonPicker.SelectedIndex = 0;

            var seasonPanel = new StackLayout
            {
                Children =
                {
                    seasonLabel,
                    seasonPicker
                }
            };

            #endregion

            # region Sport Filter
            var sportLabel = new Label
            {
                Text = "Sport",
                Font = Font.SystemFontOfSize(NamedSize.Small),
                TextColor = Color.White
            };

            var sportPicker = new ExtendedPicker<tSport> { WidthRequest = 140, Title = "Sport" };
            sportPicker.SetBinding(ExtendedPicker<tSport>.SelectedItemProperty, new Binding(SelectLeagueViewModel.SelectedSportNamePropertyName, BindingMode.TwoWay));
            sportPicker.SelectedIndexChanged += (sender, args) =>
            {
                viewModel.FilterCommand.Execute(null);
            };

            sportPicker.ItemsSource = viewModel.Sports;
            sportPicker.SelectedIndex = 0;

            var sportPanel = new StackLayout
            {
                Children =
                {
                    sportLabel,
                    sportPicker
                }
            };

            #endregion

            var filtersPanel = new StackLayout
            {
                Padding = new Thickness(0, 10, 0, 0),
                Orientation = StackOrientation.Horizontal,
                HorizontalOptions = LayoutOptions.Fill,
                Children = 
                {
                    seasonPanel,
                    sportPanel
                }
            };

            var leagues = new ListView
            {
                ItemsSource = viewModel.Leagues,
                BackgroundColor = AppColors.DarkContainer,
                ItemTemplate = new DataTemplate(() =>
                {
#if __IOS__ || __ANDROID__
                    var leagueName = new Label { Font = Font.SystemFontOfSize(FontSize.Large), BackgroundColor = Color.Transparent, TextColor = Color.White, VerticalOptions = LayoutOptions.CenterAndExpand, LineBreakMode = LineBreakMode.WordWrap };
                    leagueName.SetBinding(Label.TextProperty, "Name");

                    var row = new StackLayout
                    {
                        Padding = new Thickness(5, 0, 5, 0),
                        BackgroundColor = Color.Transparent,
                        Orientation = StackOrientation.Horizontal,
                        VerticalOptions = LayoutOptions.CenterAndExpand,
                        Children =
                        {
                            leagueName
                        }
                    };

                    return new TransparentViewCell
                    {
                        View = row
                    };
#endif
#if WINDOWS_PHONE
                    var cell = new TextCell();
                    cell.SetBinding(TextCell.TextProperty, "Name");
                    cell.Height = 20;
                    return cell;
#endif
                })
            };

            leagues.ItemSelected += (sender, args) =>
            {
                viewModel.SelectLeagueCommand.Execute(args.SelectedItem);
            };

            var activityIndicator = new ActivityIndicator { VerticalOptions = LayoutOptions.CenterAndExpand };
            activityIndicator.SetBinding(ActivityIndicator.IsRunningProperty, ViewModel.IsBusyPropertyName);
            activityIndicator.SetBinding(ActivityIndicator.IsVisibleProperty, ViewModel.IsBusyPropertyName);

            var titlePanel = new StackLayout
            {
                Orientation = StackOrientation.Horizontal,
                Spacing = 50,
                Children = 
                {
                    title,
                    activityIndicator
                }
            };

            var standingsButton = new FlatButton { Text = "Standings", HorizontalOptions = LayoutOptions.CenterAndExpand };
            standingsButton.SetBinding(FlatButton.CommandProperty, SelectLeagueViewModel.StandingsCommandName);

            var scheduleButton = new FlatButton { Text = "Schedule", HorizontalOptions = LayoutOptions.CenterAndExpand };
            scheduleButton.SetBinding(FlatButton.CommandProperty, SelectLeagueViewModel.ScheduleCommandName);

            var buttonPanel = new StackLayout
            {
                Orientation = StackOrientation.Horizontal,
                HorizontalOptions = LayoutOptions.CenterAndExpand,
                Children =
                {
                    standingsButton, scheduleButton
                }
            };

            Content = new StackLayout
            {
                Padding = 20,
                Children =
                {
                    titlePanel,
                    filtersPanel,
                    leagues,
                    buttonPanel
                }
            };
        }
    }
}
Comment 2 Eric Maupin 2014-07-17 17:21:57 UTC
Fixed for next update.
Comment 3 Eric Maupin 2014-07-17 19:29:18 UTC
*** Bug 21401 has been marked as a duplicate of this bug. ***