Permalink
Browse files

added support for sliding side panel in and out

  • Loading branch information...
marteaga committed Apr 20, 2015
1 parent 68fbef0 commit a3f3fe267b3904be5b63a19455b8b1507fe886f6
@@ -8,6 +8,7 @@ namespace RedBit.Animations.XForms.Animation
public class MainPage : ContentPage public class MainPage : ContentPage
{ {
private RelativeLayout _layout; private RelativeLayout _layout;
private StackLayout _panel;
public MainPage() public MainPage()
{ {
// create the layout // create the layout
@@ -18,6 +19,7 @@ public MainPage()
}; };


CreateButton(); CreateButton();
CreatePanel();


// set the content // set the content
this.Content = _layout; this.Content = _layout;
@@ -27,7 +29,7 @@ private void CreateButton()
{ {
// create the button // create the button
_layout.Children.Add( _layout.Children.Add(
new AnimatedButton("Show Panel") new AnimatedButton("Show Panel", AnimatePanel)
{ {
BackgroundColor = Color.Red, BackgroundColor = Color.Red,
TextColor = Color.White, TextColor = Color.White,
@@ -47,5 +49,90 @@ private void CreateButton()
}) })
); );
} }

private double _panelWidth = -1;
/// <summary>
/// Creates the right side menu panel
/// </summary>
private void CreatePanel()
{
if (_panel == null) {
_panel = new StackLayout {
Children = {
new Label {
Text = "Options",
HorizontalOptions = LayoutOptions.Start,
VerticalOptions = LayoutOptions.Start,
XAlign = TextAlignment.Center,
TextColor = Color.White
},
new AnimatedButton ("Option 1", () => {
AnimatePanel();
}),
new AnimatedButton ("Option 2", () => {
AnimatePanel();
}),
new AnimatedButton ("Option 3", () => {
AnimatePanel();
}),
},
Padding = 15,
VerticalOptions = LayoutOptions.FillAndExpand,
HorizontalOptions = LayoutOptions.EndAndExpand,
BackgroundColor = Color.FromRgba (0, 0, 0, 180)
};

// add to layout
_layout.Children.Add (_panel,
Constraint.RelativeToParent ((p) => {
return _layout.Width - (this.PanelShowing ? _panelWidth : 0);
}),
Constraint.RelativeToParent ((p) => {
return 0;
}),
Constraint.RelativeToParent ((p) => {
if(_panelWidth == -1)
_panelWidth = p.Width /3;
return _panelWidth;
}),
Constraint.RelativeToParent((p)=> {
return p.Height;
})
);
}
}

private bool _PanelShowing = false;
/// <summary>
/// Gets a value to determine if the panel is showing or not
/// </summary>
/// <value><c>true</c> if panel showing; otherwise, <c>false</c>.</value>
private bool PanelShowing{
get{
return _PanelShowing;
}
set{
_PanelShowing = value;
}
}

/// <summary>
/// Animates the panel in our out depending on the state
/// </summary>
private void AnimatePanel(){

// swap the state
this.PanelShowing = !PanelShowing;

// show or hide the panel
if (this.PanelShowing) {
var rect = new Rectangle(_layout.Width - _panel.Width, _panel.Y, _panel.Width, _panel.Height);
this._panel.LayoutTo (rect, 250, Easing.CubicIn);
} else {
var rect = new Rectangle(_layout.Width, _panel.Y, _panel.Width, _panel.Height);
this._panel.LayoutTo (rect, 200, Easing.CubicOut);
}

}
} }
} }

0 comments on commit a3f3fe2

Please sign in to comment.