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