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()
{
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);
}
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);
}
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);
}