Example #1
0
        public override void Create()
        {
            Window window = LayoutingExample.GetWindow();

            contentBackgroundShadow = new View()
            {
                Name            = "contentBackgroundShadow",
                Size2D          = new Size2D(window.Size.Width, 400),
                BackgroundColor = new Color(75f, 0f, 130f, 0.8f),
                Position2D      = new Position2D(0, 40),
            };

            // Create gradient visual that can be set as a background
            GradientVisual gradientVisualMap1 = new GradientVisual();
            PropertyArray  stopColor          = new PropertyArray();

            stopColor.Add(new PropertyValue(new Vector4(0.35f, 0.0f, 0.65f, 0.9f)));
            stopColor.Add(new PropertyValue(new Vector4(1.0f, 0.99f, 0.89f, 0.9f)));
            gradientVisualMap1.StopColor      = stopColor;
            gradientVisualMap1.StartPosition  = new Vector2(0.0f, -0.5f);
            gradientVisualMap1.EndPosition    = new Vector2(-0.5f, 0.5f);
            gradientVisualMap1.PositionPolicy = VisualTransformPolicyType.Relative;
            gradientVisualMap1.SizePolicy     = VisualTransformPolicyType.Relative;

            ///////////////////////////////////////////////////////////////////////////////////////
            //  Custom transitions for changes in the layout positioning and size.
            //  Size animates over a few frames.
            ///////////////////////////////////////////////////////////////////////////////////////
            TransitionComponents easeInSine = new TransitionComponents();

            easeInSine.AlphaFunction = new AlphaFunction(AlphaFunction.BuiltinFunctions.EaseInSine);
            easeInSine.Delay         = 0;
            easeInSine.Duration      = 64;

            int  shadowOffset        = 4;
            View backgroundContainer = new View()
            {
                Name = "backgroundContainer",
                PositionUsesPivotPoint = true,
                Size2D       = new Size2D((window.Size.Width - (shadowOffset * 2)), (400 - (shadowOffset * 2))),
                Position2D   = new Position2D(shadowOffset, shadowOffset),
                PivotPoint   = PivotPoint.TopLeft,
                ParentOrigin = ParentOrigin.TopLeft,
                Background   = gradientVisualMap1.OutputVisualMap,
            };

            View contentBackground = new View()
            {
                Name = "contentBackground",
                PositionUsesPivotPoint = true,
                PivotPoint             = PivotPoint.Center,
                ParentOrigin           = ParentOrigin.Center,
                BackgroundColor        = Color.Yellow,
                WidthSpecification     = LayoutParamPolicies.WrapContent,
                HeightSpecification    = LayoutParamPolicies.WrapContent,
            };

            contentContainer = new View()
            {
                Name            = "contentContainer",
                Layout          = createHbox(),
                Size2D          = new Size2D(80, 80),
                BackgroundColor = Color.Blue
            };

            contentContainer.LayoutTransition = new LayoutTransition(TransitionCondition.LayoutChanged,
                                                                     AnimatableProperties.Size,
                                                                     0.0f,
                                                                     easeInSine);
            contentBackground.Add(contentContainer);

            const int NUMBER_OF_IMAGEVIEWS = 1;

            children = new ImageView[NUMBER_OF_IMAGEVIEWS];

            for (int i = 0; i < NUMBER_OF_IMAGEVIEWS; i++)
            {
                children[i]        = new ImageView("./res/images/gallery-small-23.jpg");
                children[i].Size2D = new Size2D(60, 60);
                children[i].Name   = "imageView1stSet_" + i;
                contentContainer.Add(children[i]);
            }
            ;

            backgroundContainer.Add(contentBackground);
            contentBackgroundShadow.Add(backgroundContainer);

            window.Add(contentBackgroundShadow);

            // Create button toolbar to control size of Views.
            createButtonBar();
            window.Add(buttonBar);
        }
Example #2
0
        // Demonstrate a different feature depending on state
        public void NextGridFeature()
        {
            switch (featureIndex)
            {
            case ExampleFeature.GRID_EXACT_WIDTH:
            {
                SetExactWidth();
                nextFeatureButton.LabelText = "Set Child Margin";
                featureIndex = ExampleFeature.ITEMS_WITH_MARGINS;
                break;
            }

            case ExampleFeature.ITEMS_WITH_MARGINS:
            {
                AddMarginToItems();
                featureIndex = ExampleFeature.GRID_MATCH_PARENT;
                nextFeatureButton.LabelText = "Set width MATCH_PARENT";
                break;
            }

            case ExampleFeature.GRID_MATCH_PARENT:
            {
                RemoveMarginsFromItems();
                MatchParentOnWidth();
                nextFeatureButton.LabelText = "Set width WRAP_CONTENT";
                featureIndex = ExampleFeature.GRID_WRAP_CONTENT;
                break;
            }

            case ExampleFeature.GRID_WRAP_CONTENT:
            {
                WrapContentOnWidth();
                nextFeatureButton.LabelText = "Add item";
                featureIndex = ExampleFeature.ADD_ITEMS;
                break;
            }

            case ExampleFeature.ADD_ITEMS:
            {
                if (childItems.Count < MAX_NUMBER_OF_ITEMS)
                {
                    AddItemsInteractively();
                }

                if (childItems.Count == MAX_NUMBER_OF_ITEMS)
                {
                    // Remove button when no more items to add
                    featureIndex = ExampleFeature.CHANGE_TO_3_COLUMNS;
                    nextFeatureButton.LabelText = "Change Columns";
                }
                break;
            }

            case ExampleFeature.CHANGE_TO_3_COLUMNS:
            {
                ChangeTo3Columns();
                featureIndex = ExampleFeature.GRID_EXACT_WIDTH;
                Window window = LayoutingExample.GetWindow();
                window.Remove(nextFeatureButton);
                nextFeatureButton = null;
                break;
            }

            default:
            {
                featureIndex = ExampleFeature.GRID_EXACT_WIDTH;
                break;
            }
            }
        }
Example #3
0
        public override void Create()
        {
            Window window = LayoutingExample.GetWindow();

            contentBackgroundShadow = new View()
            {
                Name            = "contentBackgroundShadow",
                Size2D          = new Size2D(window.Size.Width, 500),
                BackgroundColor = new Color(75f, 0f, 130f, 0.8f),
                Position2D      = new Position2D(0, 40),
            };

            // Create gradient visual that can be set as a background
            GradientVisual gradientVisualMap1 = new GradientVisual();
            PropertyArray  stopColor          = new PropertyArray();

            stopColor.Add(new PropertyValue(new Vector4(0.35f, 0.0f, 0.65f, 0.9f)));
            stopColor.Add(new PropertyValue(new Vector4(1.0f, 0.99f, 0.89f, 0.9f)));
            gradientVisualMap1.StopColor      = stopColor;
            gradientVisualMap1.StartPosition  = new Vector2(0.0f, -0.5f);
            gradientVisualMap1.EndPosition    = new Vector2(-0.5f, 0.5f);
            gradientVisualMap1.PositionPolicy = VisualTransformPolicyType.Relative;
            gradientVisualMap1.SizePolicy     = VisualTransformPolicyType.Relative;

            int  shadowOffset        = 4;
            View backgroundContainer = new View()
            {
                Name = "backgroundContainer",
                PositionUsesPivotPoint = true,
                Size2D       = new Size2D((window.Size.Width - (shadowOffset * 2)), (500 - (shadowOffset * 2))),
                Position2D   = new Position2D(shadowOffset, shadowOffset),
                PivotPoint   = PivotPoint.TopLeft,
                ParentOrigin = ParentOrigin.TopLeft,
                Background   = gradientVisualMap1.OutputVisualMap,
            };

            View contentBackground = new View()
            {
                Name = "contentBackground",
                PositionUsesPivotPoint = true,
                PivotPoint             = PivotPoint.Center,
                ParentOrigin           = ParentOrigin.Center,
                BackgroundColor        = Color.Yellow,
                Layout              = createVbox(),
                WidthSpecification  = LayoutParamPolicies.WrapContent,
                HeightSpecification = LayoutParamPolicies.WrapContent,
            };

            TextLabel textLabel = new TextLabel()
            {
                BackgroundColor = Color.White,
                Position2D      = new Position2D(0, -10),
                Name            = "TextLabel",
                Text            = "Popup title",
                PointSize       = 34
            };

            contentBackground.Add(textLabel);

            View contentContainer = new View()
            {
                Name                = "contentContainer",
                Layout              = createHbox(),
                WidthSpecification  = LayoutParamPolicies.WrapContent,
                HeightSpecification = LayoutParamPolicies.WrapContent
            };

            contentBackground.Add(contentContainer);

            View contentAreaOne = new View()
            {
                Name                = "contentAreaOne",
                Layout              = createVbox(),
                Margin              = new Extents(10, 10, 10, 10),
                Padding             = new Extents(15, 10, 15, 10),
                WidthSpecification  = LayoutParamPolicies.WrapContent,
                HeightSpecification = LayoutParamPolicies.WrapContent,
                BackgroundColor     = Color.Red,
            };

            contentContainer.Add(contentAreaOne);

            View contentAreaTwo = new View()
            {
                Name                = "contentAreaTwo",
                Layout              = createVbox(),
                WidthSpecification  = LayoutParamPolicies.WrapContent,
                HeightSpecification = LayoutParamPolicies.WrapContent,
                BackgroundColor     = Color.Cyan,
            };

            contentContainer.Add(contentAreaTwo);

            ImageView[] children = new ImageView[3];
            for (int i = 0; i < 3; i++)
            {
                children[i]                     = new ImageView("./res/images/gallery-small-23.jpg");
                children[i].PivotPoint          = PivotPoint.Center;
                children[i].WidthSpecification  = 70;
                children[i].HeightSpecification = 70;
                children[i].BackgroundColor     = new Color(i * 0.25f, i * 0.25f, 1.0f, 1.0f);
                children[i].Name                = "imageView1stSet_" + i;
                contentAreaOne.Add(children[i]);
            }
            ;

            ImageView[] children2 = new ImageView[5];
            for (int i = 0; i < 5; i++)
            {
                children2[i]                     = new ImageView("./res/images/application-icon-102.png");
                children2[i].PivotPoint          = PivotPoint.Center;
                children2[i].WidthSpecification  = 200;
                children2[i].HeightSpecification = 70;
                children2[i].BackgroundColor     = new Color(i * 0.25f, i * 0.25f, 1.0f, 1.0f);
                children2[i].Name                = "imageView2ndSet_" + i;
                contentAreaTwo.Add(children2[i]);
            }
            ;

            backgroundContainer.Add(contentBackground);
            contentBackgroundShadow.Add(backgroundContainer);

            window.Add(contentBackgroundShadow);
            CreateHelpButton();
            LayoutingExample.GetToolbar().Add(helpButton);
        }
Example #4
0
        public override void Create()
        {
            view                        = new View();
            view.Name                   = "LinearExample";
            view.ParentOrigin           = ParentOrigin.Center;
            view.PivotPoint             = PivotPoint.Center;
            view.PositionUsesPivotPoint = true;
            view.WidthSpecification     = LayoutParamPolicies.WrapContent;
            view.HeightSpecification    = LayoutParamPolicies.WrapContent;

            var layout = new LinearLayout();

            view.Layout          = layout;
            view.LayoutDirection = ViewLayoutDirectionType.LTR;

            // Add child image-views to the created view
            foreach (String image in TestImages.s_images)
            {
                ImageView imageView = LayoutingExample.CreateChildImageView(image, new Size2D(100, 100));
                view.Add(imageView);
            }

            LayoutingExample.GetWindow().Add(view);

            PushButton directionButton = new PushButton();

            LayoutingExample.SetUnselectedIcon(directionButton, "./res/images/icon-reverse.png");
            LayoutingExample.SetSelectedIcon(directionButton, "./res/images/icon-reverse-selected.png");
            directionButton.Name                   = "directionButton";
            directionButton.ParentOrigin           = new Vector3(0.33f, 1.0f, 0.5f);
            directionButton.PivotPoint             = PivotPoint.BottomCenter;
            directionButton.PositionUsesPivotPoint = true;
            directionButton.MinimumSize            = new Vector2(75, 75);
            directionButton.Clicked               += (sender, e) =>
            {
                if (this.view.LayoutDirection == ViewLayoutDirectionType.LTR)
                {
                    this.view.LayoutDirection = ViewLayoutDirectionType.RTL;
                    LayoutingExample.SetUnselectedIcon(directionButton, "./res/images/icon-play.png");
                    LayoutingExample.SetUnselectedIcon(directionButton, "./res/images/icon-play-selected.png");
                }
                else
                {
                    this.view.LayoutDirection = ViewLayoutDirectionType.LTR;
                    LayoutingExample.SetUnselectedIcon(directionButton, "./res/images/icon-reverse.png");
                    LayoutingExample.SetSelectedIcon(directionButton, "./res/images/icon-reverse-selected.png");
                }
                return(true);
            };
            LayoutingExample.GetWindow().Add(directionButton);
            buttons.Add(directionButton);

            PushButton rotateButton = new PushButton();

            LayoutingExample.SetUnselectedIcon(rotateButton, "./res/images/icon-reset.png");
            LayoutingExample.SetSelectedIcon(rotateButton, "./res/images/icon-reset-selected.png");
            rotateButton.Name                   = "rotateButton";
            rotateButton.ParentOrigin           = new Vector3(0.66f, 1.0f, 0.5f);
            rotateButton.PivotPoint             = PivotPoint.BottomCenter;
            rotateButton.PositionUsesPivotPoint = true;
            rotateButton.MinimumSize            = new Vector2(75, 75);
            rotateButton.Clicked               += (sender, e) =>
            {
                LinearLayout linearLayout = (LinearLayout)this.view.Layout;
                if (linearLayout.LinearOrientation == LinearLayout.Orientation.Horizontal)
                {
                    linearLayout.LinearOrientation = LinearLayout.Orientation.Vertical;
                }
                else
                {
                    linearLayout.LinearOrientation = LinearLayout.Orientation.Horizontal;
                }
                return(true);
            };

            LayoutingExample.GetWindow().Add(rotateButton);
            buttons.Add(rotateButton);
        }
        public override void Create()
        {
            /*
             *                  parentContainer
             *                   |            |
             *         pureViewRed            pureViewBlue
             *              |                         |
             *       imageViewContainer         imageViewContainer2
             *       |       |       |            |              |
             *  ImageView ImageView ImageView  ImageView      ImageView
             *
             *
             *  parentContainer assigned a Layout after tree already built.
             */

            _parentContainer = new View()
            {
                Name = "linearViewGreen",
                PositionUsesPivotPoint = true,
                PivotPoint             = PivotPoint.Center,
                ParentOrigin           = ParentOrigin.Center,
                BackgroundColor        = Color.Green,
                WidthSpecification     = LayoutParamPolicies.WrapContent,
                HeightSpecification    = LayoutParamPolicies.WrapContent,
            };

            View pureViewRed = new View()
            {
                Name            = "pureViewRed",
                BackgroundColor = Color.Red,
            };

            View pureViewBlue = new View()
            {
                Name            = "pureViewBlue",
                BackgroundColor = Color.Blue,
            };

            View imageViewContainer = new View()
            {
                Name = "linearViewYellow",
                PositionUsesPivotPoint = true,
                PivotPoint             = PivotPoint.Center,
                ParentOrigin           = ParentOrigin.Center,
                BackgroundColor        = Color.Yellow,
                Layout              = createVbox(),
                WidthSpecification  = LayoutParamPolicies.WrapContent,
                HeightSpecification = LayoutParamPolicies.WrapContent,
            };

            _imageViewContainer2 = new View()
            {
                Name = "linearViewGreen",
                PositionUsesPivotPoint = true,
                PivotPoint             = PivotPoint.Center,
                ParentOrigin           = ParentOrigin.Center,
                BackgroundColor        = Color.Green,
                Layout              = createVbox(),
                WidthSpecification  = LayoutParamPolicies.WrapContent,
                HeightSpecification = LayoutParamPolicies.WrapContent,
            };

            for (int i = 0; i < 3; i++)
            {
                imageViewContainer.Add(CreateImageView("1stSet"));
            }
            ;

            for (int i = 0; i < 2; i++)
            {
                _imageViewContainer2.Add(CreateImageView("2ndSet"));
            }
            ;

            pureViewRed.Add(imageViewContainer);
            pureViewBlue.Add(_imageViewContainer2);

            LayoutingExample.GetWindow().Add(_parentContainer);
            _parentContainer.Add(pureViewRed);
            _parentContainer.Add(pureViewBlue);

            CreateHelpButton();
            CreateNextFeatureButton();
            LayoutingExample.GetWindow().Add(nextFeatureButton);
        }
Example #6
0
        public override void Create()
        {
            windowWidth = LayoutingExample.GetWindow().WindowSize.Width;

            view                        = new View();
            view.Name                   = "MainLinearLayout";
            view.ParentOrigin           = ParentOrigin.Center;
            view.PivotPoint             = PivotPoint.Center;
            view.PositionUsesPivotPoint = true;
            view.WidthSpecification     = LayoutParamPolicies.MatchParent;
            view.HeightSpecification    = LayoutParamPolicies.MatchParent;

            var layout = new LinearLayout();

            layout.LinearAlignment = LinearLayout.Alignment.Center;
            view.Layout            = layout;
            view.LayoutDirection   = ViewLayoutDirectionType.LTR;

            // Add child image-views to the created view
            var index = 0;

            foreach (String image in TestImages.s_images)
            {
                // Set a delayed custom transition for each Image View so each moves into place after it's
                // adjacent sibbling.
                TransitionComponents easeInOutSineDelayed = new TransitionComponents();
                easeInOutSineDelayed.AlphaFunction = new AlphaFunction(AlphaFunction.BuiltinFunctions.EaseInOutSine);
                easeInOutSineDelayed.Delay         = ITEM_MOVE_DURATION * index;
                easeInOutSineDelayed.Duration      = ITEM_MOVE_DURATION * TestImages.s_images.Length;

                ImageView imageView = LayoutingExample.CreateChildImageView(image, new Size2D(80, 80));

                // Override LayoutChanged transition so different for each ImageView in the Linear layout.
                // In this case each moves with a increasing delay.
                imageView.LayoutTransition = new LayoutTransition(TransitionCondition.LayoutChanged,
                                                                  AnimatableProperties.Position,
                                                                  0.0,
                                                                  easeInOutSineDelayed);

                imageView.LayoutTransition = new LayoutTransition(TransitionCondition.ChangeOnRemove,
                                                                  AnimatableProperties.Position,
                                                                  0.0,
                                                                  easeInOutSineDelayed);

                view.Add(imageView);
                index++;
            }

            LayoutingExample.GetWindow().Add(view);

            InitializePanControl();
            LayoutingExample.GetWindow().Add(panControl);

            panGestureDetector = new PanGestureDetector();
            panGestureDetector.Attach(panControl);
            panGestureDetector.Detected += OnPanGestureDetected;

            instructionsLabel = new TextLabel(instructions)
            {
                Position2D = new Position2D(10, (int)(LayoutingExample.GetWindow().WindowSize.Height *0.90f)),
                MultiLine  = true,
            };
            LayoutingExample.GetWindow().Add(instructionsLabel);
        }