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); }
// 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; } } }
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); }
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); }
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); }