static void Main(string[] args)
{
// Do not remove this print out - helps with the TizenFX stub sync issue
Console.WriteLine("Running Example...");
LayoutingExample example = new LayoutingExample();
example.Run(args);
}
public override void Create()
{
Window window = LayoutingExample.GetWindow();
view = new View();
view.Name = "ChangingLayout";
view.WidthSpecification = LayoutParamPolicies.WrapContent;
view.HeightSpecification = LayoutParamPolicies.WrapContent;
// Position layout within Window.
view.ParentOrigin = ParentOrigin.Center;
view.PivotPoint = PivotPoint.Center;
view.PositionUsesPivotPoint = true;
// Start with a GridLayout
SetGridLayout(view);
// 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);
view.MinimumSize = new Size2D(200, 200);
}
LayoutingExample.GetWindow().Add(view);
// Setup button to switch layouts.
PushButton changeLayoutButton = new PushButton();
changeLayoutButton.Name = "changeLayout-button";
LayoutingExample.SetUnselectedIcon(changeLayoutButton, "./res/images/iconLinear.png");
LayoutingExample.SetSelectedIcon(changeLayoutButton, "./res/images/iconLinearSelected.png");
changeLayoutButton.ParentOrigin = new Vector3(0.33f, 1.0f, 0.5f);
changeLayoutButton.PivotPoint = PivotPoint.BottomCenter;
changeLayoutButton.PositionUsesPivotPoint = true;
changeLayoutButton.MinimumSize = new Vector2(75, 75);
changeLayoutButton.Clicked += (sender, e) =>
{
if (gridLayout)
{
SetLinearLayout(view);
LayoutingExample.SetUnselectedIcon(changeLayoutButton, "./res/images/iconGrid.png");
LayoutingExample.SetSelectedIcon(changeLayoutButton, "./res/images/iconGridSelected.png");
}
else
{
SetGridLayout(view);
LayoutingExample.SetUnselectedIcon(changeLayoutButton, "./res/images/iconLinear.png");
LayoutingExample.SetSelectedIcon(changeLayoutButton, "./res/images/iconLinearSelected.png");
}
return(true);
};
LayoutingExample.GetWindow().Add(changeLayoutButton);
buttons.Add(changeLayoutButton);
}
public override void Create()
{
_view = new View();
_view.Name = "PaddingExample";
_view.Background = CreateGradientVisual().OutputVisualMap;
_view.ParentOrigin = ParentOrigin.Center;
_view.PivotPoint = PivotPoint.Center;
_view.PositionUsesPivotPoint = true;
_view.WidthSpecification = LayoutParamPolicies.WrapContent;
_view.HeightSpecification = LayoutParamPolicies.WrapContent;
_view.Layout = new LinearLayout();
// Add child image-views to the created _view
foreach (String image in TestImages.s_images)
{
ImageView imageView = LayoutingExample.CreateChildImageView(image, new Size2D(100, 100));
imageView.BackgroundColor = Color.Black;
imageView.TouchEvent += (sender, e) =>
{
if (sender is ImageView && e.Touch.GetState(0) == PointStateType.Down)
{
Console.WriteLine("ImageViewTouched\n");
ImageView touchedImageView = (ImageView)sender;
if (touchedImageView.Padding.EqualTo(new Extents(0, 0, 0, 0)))
{
Console.WriteLine("Adding Padding\n");
touchedImageView.Padding = new Extents(10, 10, 10, 10);
}
else
{
Console.WriteLine("Padding removed\n");
touchedImageView.Padding = new Extents(0, 0, 0, 0);
}
}
return(true);
};
_view.Add(imageView);
}
Window window = LayoutingExample.GetWindow();
window.Add(_view);
_nextFeatureButton = new Button();
_nextFeatureButton.ParentOrigin = ParentOrigin.BottomCenter;
_nextFeatureButton.PivotPoint = PivotPoint.BottomCenter;
_nextFeatureButton.PositionUsesPivotPoint = true;
_nextFeatureButton.Text = featureArray[_featureIndex].featureName;
_nextFeatureButton.Clicked += (sender, e) =>
{
ExampleFeature();
return;
};
window.Add(_nextFeatureButton);
}
public override void Create()
{
Window window = Window.Instance;
// Absolute Layout is created automatically in Window.
View view = new View();
view.Name = "demo-absoluteLayout";
view.ParentOrigin = ParentOrigin.Center;
view.PivotPoint = PivotPoint.Center;
view.PositionUsesPivotPoint = true;
view.WidthSpecification = LayoutParamPolicies.WrapContent;
view.HeightSpecification = LayoutParamPolicies.WrapContent;
view.BackgroundColor = Color.Blue;
var layout = new AbsoluteLayout();
view.Layout = layout;
// Add child image-views to the created view
ImageView imageView = LayoutingExample.CreateChildImageView("./res/images/gallery-small-23.jpg", new Size2D(100, 100), new Position2D(0, 0));
view.Add(imageView);
imageView = LayoutingExample.CreateChildImageView("./res/images/gallery-small-23.jpg", new Size2D(100, 100), new Position2D(100, 0));
view.Add(imageView);
imageView = LayoutingExample.CreateChildImageView("./res/images/gallery-small-23.jpg", new Size2D(100, 100), new Position2D(0, 100));
view.Add(imageView);
imageView = LayoutingExample.CreateChildImageView("./res/images/gallery-small-23.jpg", new Size2D(200, 200), new Position2D(100, 100));
view.Add(imageView);
this.view = view;
sizeButton = new PushButton();
sizeButton.Name = "absolute-size-change-button";
sizeButton.ParentOrigin = ParentOrigin.BottomCenter;
sizeButton.PivotPoint = PivotPoint.BottomCenter;
sizeButton.PositionUsesPivotPoint = true;
sizeButton.LabelText = "change size";
sizeButton.Clicked += (sender, e) =>
{
if (!fullSize)
{
this.view.WidthSpecification = LayoutParamPolicies.MatchParent;
this.view.HeightSpecification = LayoutParamPolicies.MatchParent;
}
else
{
this.view.WidthSpecification = LayoutParamPolicies.WrapContent;
this.view.HeightSpecification = LayoutParamPolicies.WrapContent;
}
fullSize = !fullSize;
return(true);
};
window.Add(view);
window.Add(sizeButton);
}
public override void Remove()
{
LayoutingExample.GetWindow().Remove(view);
LayoutingExample.GetWindow().Remove(panControl);
LayoutingExample.GetWindow().Remove(instructionsLabel);
view = null;
view = panControl;
view = instructionsLabel;
}
// Clean up of screen furniture when example ends
public override void Remove()
{
Window window = LayoutingExample.GetWindow();
window.Remove(this._view);
window.Remove(_nextFeatureButton);
_view = null;
_nextFeatureButton = null;
}
public void NextFeature()
{
if (_derivedView.Layout == null)
{
_derivedView.Layout = new LinearLayout();
}
Window.Instance.Remove(nextFeatureButton);
LayoutingExample.GetToolbar().Add(helpButton);
}
public void NextFeature()
{
if (_derivedView.Layout == null)
{
_derivedView.Layout = new LinearLayout();
_derivedView.HeightSpecification = LayoutParamPolicies.WrapContent;
}
Window.Instance.Remove(nextFeatureButton);
LayoutingExample.GetToolbar().Add(helpButton);
}
public override void Remove()
{
LayoutingExample.GetWindow().Remove(view);
view = null;
foreach (PushButton button in buttons)
{
LayoutingExample.GetWindow().Remove(button);
}
buttons.Clear();
}
public override void Remove()
{
Window window = LayoutingExample.GetWindow();
childButtons.Clear();
parentButtons.Clear();
window.Remove(contentBackgroundShadow);
window.Remove(buttonBar);
buttonBar = null;
contentBackgroundShadow = null;
}
//Clean up after examples ends
public override void Remove()
{
Window window = LayoutingExample.GetWindow();
window.Remove(view);
view = null;
if (nextFeatureButton)
{
window.Remove(nextFeatureButton);
nextFeatureButton = null;
}
}
public override void Remove()
{
Window window = Window.Instance;
if (helpImageView)
{
window.Remove(helpImageView);
helpImageView = null;
}
helpShowing = false;
LayoutingExample.GetToolbar().Remove(helpButton);
window.Remove(View01);
window.Remove(View02);
helpButton = null;
}
public override void Remove()
{
Window window = LayoutingExample.GetWindow();
if (helpImageView)
{
window.Remove(helpImageView);
helpImageView = null;
}
helpShowing = false;
LayoutingExample.GetToolbar().Remove(helpButton);
window.Remove(contentBackgroundShadow);
helpButton = null;
contentBackgroundShadow = null;
}
void AddItemsInteractively()
{
if (childItems.Count < MAX_NUMBER_OF_ITEMS)
{
ImageView imageView = LayoutingExample.CreateChildImageView(TestImages.sample_images[0], new Size2D(100, 100));
childItems.Add(imageView);
view.Add(imageView);
// Add item button shows how many items left to add.
int numberOfAdditonalImageViews = MAX_NUMBER_OF_ITEMS - INITIAL_NUMBER_OF_ITEMS;
int remainingImageViews = MAX_NUMBER_OF_ITEMS - (childItems.Count);
string buttonLabel = "Add item[" + (numberOfAdditonalImageViews - remainingImageViews).ToString() + "/"
+ (numberOfAdditonalImageViews).ToString() + "]";
nextFeatureButton.Text = buttonLabel;
}
}
public override void Create()
{
Window window = Window.Instance;
window.BackgroundColor = Color.White;
view = new View()
{
Size2D = new Size2D(476, 500),
BackgroundColor = Color.Green,
Position2D = new Position2D(2, 0),
ParentOrigin = ParentOrigin.BottomRight,
PivotPoint = PivotPoint.BottomRight,
PositionUsesPivotPoint = true,
};
window.Add(view);
TextLabel textLabel = new TextLabel()
{
Size2D = new Size2D(274, 70),
BackgroundColor = Color.Red,
Position2D = new Position2D(0, -10),
Name = "TextLabel",
Text = "Enter password",
ParentOrigin = ParentOrigin.BottomCenter,
PivotPoint = PivotPoint.BottomCenter,
PositionUsesPivotPoint = true,
};
view.Add(textLabel);
TextField field = new TextField()
{
Size2D = new Size2D(120, 80),
Position2D = new Position2D(150, 85),
BackgroundColor = Color.Cyan,
Name = "TextField",
PlaceholderText = "input something",
};
view.Add(field);
CreateHelpButton();
LayoutingExample.GetToolbar().Add(helpButton);
}
// Execute different features to test
public void NextFeature()
{
switch (featureIndex)
{
// Parent container assigned a layout after tree constructed.
// Children should now be laid out horizontally .
case ExampleFeature.SET_PARENT_HORIZONTAL_LAYOUT:
{
_parentContainer.Layout = createHbox();
nextFeatureButton.LabelText = "Add child with no layout";
featureIndex = ExampleFeature.ADD_CHILD_VIEW_WITH_NO_LAYOUT;
break;
}
// Add a View without a layout but with 2 children.
// 2 children will be overlapping.
case ExampleFeature.ADD_CHILD_VIEW_WITH_NO_LAYOUT:
{
_childView = new View();
for (var i = 0; i < 2; i++)
{
_childView.Add(CreateImageView("3rdSet"));
}
_imageViewContainer2.Add(_childView);
nextFeatureButton.LabelText = "Add linear layout to last added child";
featureIndex = ExampleFeature.ADD_LINEAR_LAYOUT_TO_LAST_ADDED_CHILD;
break;
}
// A horizontal layout added to the View that had no layout.
// It's children should now be laid out horizontally too.
case ExampleFeature.ADD_LINEAR_LAYOUT_TO_LAST_ADDED_CHILD:
{
LayoutingExample.GetToolbar().Add(helpButton);
_childView.Layout = createHbox();
LayoutingExample.GetWindow().Remove(nextFeatureButton);
break;
}
default:
{
break;
}
}
}
private void InitializePanControl()
{
PropertyMap imageVisual = new PropertyMap();
imageVisual.Add(Visual.Property.Type, new PropertyValue((int)Visual.Type.Image));
imageVisual.Add(ImageVisualProperty.URL, new PropertyValue(panningButtonImage));
panControl = new View()
{
Size2D = new Size2D(panControlOriginalWidth, 100),
Background = imageVisual,
};
Size2D windowSize = LayoutingExample.GetWindow().WindowSize;
panControl.Position2D = new Position2D(10, (int)(windowSize.Height * 0.75f));
LayoutingExample.GetWindow().Add(panControl);
}
// Create GridLayout Example
public override void Create()
{
// Absolute Layout is created automatically in Window.
view = new View();
view.Name = "GridExample";
view.ParentOrigin = ParentOrigin.Center;
view.PivotPoint = PivotPoint.Center;
view.PositionUsesPivotPoint = true;
view.ParentOrigin = ParentOrigin.Center;
view.PivotPoint = PivotPoint.Center;
view.WidthSpecification = LayoutParamPolicies.WrapContent;
view.HeightSpecification = LayoutParamPolicies.WrapContent;
view.BackgroundColor = Color.Blue;
var layout = new GridLayout();
layout.Columns = INITAL_NUMBER_OF_COLUMNS;
view.Layout = layout;
// Add child image-views to the created view
childItems = new List <ImageView>();
for (int i = 0; i < INITIAL_NUMBER_OF_ITEMS; i++)
{
ImageView imageView = LayoutingExample.CreateChildImageView(TestImages.sample_images[0], new Size2D(100, 100));
childItems.Add(imageView);
view.Add(imageView);
}
Window window = LayoutingExample.GetWindow();
nextFeatureButton = new PushButton();
nextFeatureButton.ParentOrigin = ParentOrigin.BottomCenter;
nextFeatureButton.PivotPoint = PivotPoint.BottomCenter;
nextFeatureButton.PositionUsesPivotPoint = true;
nextFeatureButton.LabelText = " Set exact width to Grid ";
nextFeatureButton.Clicked += (sender, e) =>
{
NextGridFeature();
return(true);
};
window.Add(view);
window.Add(nextFeatureButton);
}
public override void Remove()
{
Window window = LayoutingExample.GetWindow();
if (helpImageView)
{
window.Remove(helpImageView);
helpImageView = null;
}
helpShowing = false;
LayoutingExample.GetToolbar().Remove(helpButton);
window.Remove(_parentContainer);
window.Remove(nextFeatureButton);
nextFeatureButton = null;
helpButton = null;
_parentContainer = null;
_imageViewContainer2 = null;
_childView = null;
featureIndex = ExampleFeature.SET_PARENT_VERTICAL_LAYOUT;
}
// Shows a thumbnail of the expected output
private void CreateHelpButton()
{
helpButton = new Button();
helpButton.Text = "Help";
helpButton.Name = "help-button";
helpButton.Clicked += (sender, e) =>
{
Window window = LayoutingExample.GetWindow();
if (!helpShowing)
{
helpImageView = LayoutingExample.CreateChildImageView("./res/images/nestedLayoutTestHelp3.png", new Size2D(200, 200));
helpImageView.Position2D = new Position2D(0, helpButton.Size2D.Height);
helpShowing = true;
window.Add(helpImageView);
}
else
{
window.Remove(helpImageView);
helpShowing = false;
}
};
}
// Shows a thumbnail of the expected output
private void CreateHelpButton()
{
helpButton = new Button();
helpButton.Text = "Help";
helpButton.Clicked += (sender, e) =>
{
if (!helpShowing)
{
Window window = Window.Instance;
helpImageView = LayoutingExample.CreateChildImageView("./res/images/multirootsExampleHelp.png", new Size2D(200, 200));
helpImageView.Position2D = new Position2D(0, helpButton.Size2D.Height);
helpShowing = true;
window.Add(helpImageView);
}
else
{
Window window = Window.Instance;
window.Remove(helpImageView);
helpShowing = false;
}
};
}
public override void Create()
{
Window window = Window.Instance;
linearView = new View()
{
LayoutWidthSpecificationFixed = 480,
HeightSpecification = LayoutParamPolicies.WrapContent,
BackgroundColor = Color.Blue,
Name = "LinearView",
Position2D = new Position2D(0, 250)
};
var layout = new LinearLayout();
linearView.Layout = layout;
window.Add(linearView);
greenView = new View()
{
BackgroundColor = Color.Green,
Name = "GreenView",
WidthSpecification = LayoutParamPolicies.WrapContent,
HeightSpecification = LayoutParamPolicies.WrapContent,
};
linearView.Add(greenView);
TextLabel textLabel = new TextLabel()
{
Name = "TextLabel",
Text = "TextLabel in a View",
PointSize = 20.0f
};
greenView.Add(textLabel);
CreateHelpButton();
LayoutingExample.GetToolbar().Add(helpButton);
}
// Shows a thumbnail of the expected output
private void CreateHelpButton()
{
helpButton = new PushButton();
helpButton.LabelText = "Help";
helpButton.Clicked += (sender, e) =>
{
if (!helpShowing)
{
Window window = Window.Instance;
helpImageView = LayoutingExample.CreateChildImageView("./res/images/child-added-to-view-example.png", new Size2D(200, 200));
helpImageView.Position2D = new Position2D(0, helpButton.Size2D.Height);
helpShowing = true;
window.Add(helpImageView);
}
else
{
Window window = Window.Instance;
window.Remove(helpImageView);
helpShowing = false;
}
return(true);
};
}
public override void Create()
{
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;
///////////////////////////////////////////////////////////////////////////////////////
// Custom transitions for Adding an ImageView
// ImageView positioned instantly
// A delayed opacity increases to 1.0f after siblings moved to make space
///////////////////////////////////////////////////////////////////////////////////////
TransitionComponents instantPosition = new TransitionComponents();
instantPosition.AlphaFunction = new AlphaFunction(AlphaFunction.BuiltinFunctions.Linear);
instantPosition.Delay = 0;
instantPosition.Duration = 1;
view.LayoutTransition = new LayoutTransition(TransitionCondition.Add,
AnimatableProperties.Position,
0.0,
instantPosition);
TransitionComponents delayedInsertion = new TransitionComponents();
delayedInsertion.AlphaFunction = new AlphaFunction(AlphaFunction.BuiltinFunctions.Linear);
delayedInsertion.Delay = 100;
delayedInsertion.Duration = 200;
view.LayoutTransition = new LayoutTransition(TransitionCondition.Add,
AnimatableProperties.Opacity,
1.0f,
delayedInsertion);
///////////////////////////////////////////////////////////////////////////////////////
// Custom transitions for siblings after ADDing an ImageView to the View
// Siblings are moved using AlphaFunction.BuiltinFunctions.EaseInOutSine
///////////////////////////////////////////////////////////////////////////////////////
TransitionComponents slowEaseInOutSine = new TransitionComponents();
slowEaseInOutSine.AlphaFunction = new AlphaFunction(AlphaFunction.BuiltinFunctions.EaseInOutSine);
slowEaseInOutSine.Duration = 164;
slowEaseInOutSine.Delay = 0;
view.LayoutTransition = new LayoutTransition(TransitionCondition.ChangeOnAdd,
AnimatableProperties.Position,
0.0,
slowEaseInOutSine);
///////////////////////////////////////////////////////////////////////////////////////
// Custom transitions for Removing an ImageView
// The opacity animates to .2f
///////////////////////////////////////////////////////////////////////////////////////
TransitionComponents fadeOut = new TransitionComponents();
fadeOut.AlphaFunction = new AlphaFunction(AlphaFunction.BuiltinFunctions.Linear);
fadeOut.Duration = 600;
fadeOut.Delay = 0;
float targetOpacityOut = .2f;
view.LayoutTransition = new LayoutTransition(TransitionCondition.Remove,
AnimatableProperties.Opacity,
targetOpacityOut,
fadeOut);
// 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);
imageView.TouchEvent += (sender, e) =>
{
if (sender is ImageView && e.Touch.GetState(0) == PointStateType.Down)
{
ImageView touchedImageView = (ImageView)sender;
if (touchedImageView.Weight == 1.0f)
{
touchedImageView.Weight = 0.0f;
}
else
{
touchedImageView.Weight = 1.0f;
}
}
return(true);
};
view.Add(imageView);
index++;
}
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);
PushButton addItemButton = new PushButton();
LayoutingExample.SetUnselectedIcon(addItemButton, "./res/images/icon-plus.png");
LayoutingExample.SetSelectedIcon(addItemButton, "./res/images/icon-plus.png");
addItemButton.Name = "addItemButton";
addItemButton.ParentOrigin = new Vector3(.9f, 1.0f, 0.5f);
addItemButton.PivotPoint = PivotPoint.BottomCenter;
addItemButton.PositionUsesPivotPoint = true;
addItemButton.MinimumSize = new Vector2(75, 75);
addItemButton.Clicked += (sender, e) =>
{
Button button = sender as Button;
if (!addedItem)
{
ImageView imageView = LayoutingExample.CreateChildImageView(TestImages.s_images[0], new Size2D(80, 80));
TransitionComponents easeInOutSineDelayed = new TransitionComponents();
easeInOutSineDelayed.AlphaFunction = new AlphaFunction(AlphaFunction.BuiltinFunctions.EaseInOutSine);
easeInOutSineDelayed.Delay = ITEM_MOVE_DURATION * (index); // index was the last item added
easeInOutSineDelayed.Duration = ITEM_MOVE_DURATION * (index + 1);
imageView.LayoutTransition = new LayoutTransition(TransitionCondition.LayoutChanged,
AnimatableProperties.Position,
0.0,
easeInOutSineDelayed);
imageView.Opacity = 0.0f;
imageView.Name = "ImageViewBeingAdded-png";
view.Add(imageView);
LayoutingExample.SetUnselectedIcon(button, "./res/images/icon-minus.png");
addedItem = true;
}
else
{
foreach (View item in view.Children)
{
if (item.Name == "ImageViewBeingAdded-png")
{
view.Remove(item);
addedItem = false;
LayoutingExample.SetUnselectedIcon(button, "./res/images/icon-plus.png");
break;
}
}
}
return(true);
};
LayoutingExample.GetWindow().Add(addItemButton);
buttons.Add(addItemButton);
}
static void Main(string[] args)
{
LayoutingExample example = new LayoutingExample();
example.Run(args);
}
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);
}
public override void Create()
{
Window window = Window.Instance;
View01 = new View()
{
BackgroundColor = Color.Green,
Position2D = new Position2D(0, window.Size.Height / 8),
Size2D = new Size2D(window.Size.Width / 2, (window.Size.Height / 8) * 7),
Name = "View01"
};
window.Add(View01);
View02 = new View()
{
Position2D = new Position2D(window.Size.Width / 2, window.Size.Height / 8),
WidthSpecification = (window.Size.Width / 2),
HeightSpecification = (window.Size.Height / 8) * 7,
BackgroundColor = Color.Blue,
Layout = new LinearLayout(),
Name = "View02LinearView",
};
window.Add(View02);
View03 = new View()
{
BackgroundColor = Color.Yellow,
Name = "View03",
Size2D = new Size2D(20, (window.Size.Height / 8) * 7)
};
View01.Add(View03);
LinearLayout verticalLayout = new LinearLayout();
verticalLayout.LinearOrientation = LinearLayout.Orientation.Vertical;
View04 = new View()
{
BackgroundColor = Color.Cyan,
PositionX = View03.Size2D.Width,
WidthSpecification = LayoutParamPolicies.WrapContent,
HeightSpecification = LayoutParamPolicies.MatchParent,
Layout = verticalLayout,
Name = "View04LinearView",
};
View01.Add(View04);
View07 = new View()
{
BackgroundColor = Color.Blue,
Size2D = new Size2D(200, 200),
Name = "View07"
};
View03.Add(View07);
ImageView06 = LayoutingExample.CreateChildImageView("res/images/application-icon-101.png", new Size2D(100, 100));
ImageView06.Name = "imageView-06";
View04.Add(ImageView06);
ImageView04 = LayoutingExample.CreateChildImageView("res/images/application-icon-101.png", new Size2D(200, 200));
ImageView04.Name = "imageView-04";
View07.Add(ImageView04);
View08 = new View()
{
BackgroundColor = Color.Magenta,
Size2D = new Size2D(280, 280),
Name = "View08"
};
View04.Add(View08);
ImageView03 = LayoutingExample.CreateChildImageView("res/images/application-icon-101.png", new Size2D(100, 100));
ImageView03.Name = "imageView-03";
View08.Add(ImageView03);
View05 = new View()
{
BackgroundColor = Color.Yellow,
Name = "View05",
Size2D = new Size2D(10, 100)
};
View02.Add(View05);
FlexContainer legacyContainer = new FlexContainer();
legacyContainer.FlexDirection = FlexContainer.FlexDirectionType.Column;
legacyContainer.Size2D = new Size2D(View02.Size2D.Width / 2, 280);
legacyContainer.Name = "legacyFlexContainer";
View02.Add(legacyContainer);
ImageView02 = LayoutingExample.CreateChildImageView("res/images/application-icon-103.png", new Size2D(100, 100));
ImageView02.Name = "imageView-02";
legacyContainer.Add(ImageView02);
ImageView01 = LayoutingExample.CreateChildImageView("res/images/application-icon-104.png", new Size2D(100, 100));
ImageView01.Name = "imageView-01";
legacyContainer.Add(ImageView01);
ImageView05 = LayoutingExample.CreateChildImageView("res/images/application-icon-102.png", new Size2D(100, 100));
ImageView05.Name = "imageView-05";
View05.Add(ImageView05);
CreateHelpButton();
LayoutingExample.GetToolbar().Add(helpButton);
}
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()
{
Window window = Window.Instance;
view = new View();
view.Name = "FlexExample";
view.ParentOrigin = ParentOrigin.TopLeft;
view.PivotPoint = PivotPoint.TopLeft;
view.PositionUsesPivotPoint = true;
view.WidthSpecification = LayoutParamPolicies.MatchParent;
int viewHeight = (int)(window.Size.Height * .90);
view.HeightSpecification = viewHeight;
view.PositionY = window.Size.Height - viewHeight;
view.Padding = new Extents(190, 150, 100, 100);
var layout = new FlexLayout();
layout.WrapType = FlexLayout.FlexWrapType.NoWrap;
layout.ItemsAlignment = FlexLayout.AlignmentType.Center;
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);
}
window.Add(view);
PushButton directionButton = new PushButton();
LayoutingExample.SetUnselectedIcon(directionButton, "./res/images/icon-reverse.png");
LayoutingExample.SetSelectedIcon(directionButton, "./res/images/icon-reverse-selected.png");
directionButton.ParentOrigin = new Vector3(0.2f, 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.SetSelectedIcon(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);
};
window.Add(directionButton);
buttons.Add(directionButton);
PushButton wrapButton = new PushButton();
LayoutingExample.SetUnselectedIcon(wrapButton, "./res/images/icon-w.png");
LayoutingExample.SetSelectedIcon(wrapButton, "./res/images/icon-w-selected.png");
wrapButton.ParentOrigin = new Vector3(0.4f, 1.0f, 0.5f);
wrapButton.PivotPoint = PivotPoint.BottomCenter;
wrapButton.PositionUsesPivotPoint = true;
wrapButton.MinimumSize = new Vector2(75, 75);
wrapButton.Clicked += (sender, e) =>
{
FlexLayout flexLayout = (FlexLayout)this.view.Layout;
if (flexLayout.WrapType == FlexLayout.FlexWrapType.Wrap)
{
view.Padding = new Extents(0, 0, 0, 0);
flexLayout.WrapType = FlexLayout.FlexWrapType.NoWrap;
flexLayout.Alignment = FlexLayout.AlignmentType.Center;
flexLayout.ItemsAlignment = FlexLayout.AlignmentType.Center;
}
else
{
view.Padding = new Extents(25, 25, 75, 75);
flexLayout.WrapType = FlexLayout.FlexWrapType.Wrap;
flexLayout.Alignment = FlexLayout.AlignmentType.FlexStart;
flexLayout.ItemsAlignment = FlexLayout.AlignmentType.FlexStart;
}
return(true);
};
window.Add(wrapButton);
buttons.Add(wrapButton);
PushButton justifyButton = new PushButton();
LayoutingExample.SetUnselectedIcon(justifyButton, "./res/images/icon-item-view-layout-grid.png");
LayoutingExample.SetSelectedIcon(justifyButton, "./res/images/icon-item-view-layout-grid-selected.png");
justifyButton.ParentOrigin = new Vector3(0.6f, 1.0f, 0.5f);
justifyButton.PivotPoint = PivotPoint.BottomCenter;
justifyButton.PositionUsesPivotPoint = true;
justifyButton.MinimumSize = new Vector2(75, 75);
justifyButton.Clicked += (sender, e) =>
{
FlexLayout flexLayout = (FlexLayout)this.view.Layout;
if (flexLayout.Justification == FlexLayout.FlexJustification.FlexStart)
{
flexLayout.Justification = FlexLayout.FlexJustification.Center;
}
else
{
flexLayout.Justification = FlexLayout.FlexJustification.FlexStart;
}
return(true);
};
window.Add(justifyButton);
buttons.Add(justifyButton);
PushButton rotateButton = new PushButton();
LayoutingExample.SetUnselectedIcon(rotateButton, "./res/images/icon-reset.png");
LayoutingExample.SetSelectedIcon(rotateButton, "./res/images/icon-reset-selected.png");
rotateButton.ParentOrigin = new Vector3(0.8f, 1.0f, 0.5f);
rotateButton.PivotPoint = PivotPoint.BottomCenter;
rotateButton.PositionUsesPivotPoint = true;
rotateButton.MinimumSize = new Vector2(75, 75);
rotateButton.Clicked += (sender, e) =>
{
FlexLayout flexLayout = (FlexLayout)this.view.Layout;
if (flexLayout.Direction == FlexLayout.FlexDirection.Row)
{
flexLayout.Direction = FlexLayout.FlexDirection.Column;
}
else
{
flexLayout.Direction = FlexLayout.FlexDirection.Row;
}
return(true);
};
window.Add(rotateButton);
buttons.Add(rotateButton);
}
// Demonstrate a different feature depending on state
public void NextGridFeature()
{
switch (featureIndex)
{
case ExampleFeature.GRID_EXACT_WIDTH:
{
SetExactWidth();
nextFeatureButton.Text = "Set Child Margin";
featureIndex = ExampleFeature.ITEMS_WITH_MARGINS;
break;
}
case ExampleFeature.ITEMS_WITH_MARGINS:
{
AddMarginToItems();
featureIndex = ExampleFeature.GRID_MATCH_PARENT;
nextFeatureButton.Text = "Set width MATCH_PARENT";
break;
}
case ExampleFeature.GRID_MATCH_PARENT:
{
RemoveMarginsFromItems();
MatchParentOnWidth();
nextFeatureButton.Text = "Set width WRAP_CONTENT";
featureIndex = ExampleFeature.GRID_WRAP_CONTENT;
break;
}
case ExampleFeature.GRID_WRAP_CONTENT:
{
WrapContentOnWidth();
nextFeatureButton.Text = "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.Text = "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;
}
}
}