Expandable Menus are an easy way to add different modes or context to a screen without taking up very little screen space. An expandable menu places a small icon or the screen as an overlay and when the user taps on it the menu expands to show many options. An easy way to include a complex set of modes without cluttering up the entire page. This is common when the user interacts with the page differently depending on the mode.
Using the CircleButtonMenu is easy to add a powerful UI effect to your application.
Getting Started
Create a Xamarin.Forms project and create a basic page you want to add the CircleButtonMenu on. Here is some sample code to get started.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:CircleButtonMenuSample"
x:Class="CircleButtonMenuSample.MainPage">
<StackLayout>
<!-- Place new controls here -->
<Label Text="Welcome to Circle Button Menu!"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage>
NuGets
Search for the control in NuGet: CircleButtonMenu and add the project to your Shared code and Platform code:
- Shared Code Project
- iOS Platform Project
- Android Platform Project
Add Control to Page
Head back to your page where you want to add the control
Add xmlns
1
xmlns:controls="clr-namespace:CircleButtonMenu.Abstractions;assembly=CircleButtonMenu.Abstractions"
Add Control
1
2
3
4
5
6
7
<controls:CircleButtonMenu FillColor="Gray"
StrokeColor="Black"
OpenImageSource="plus"
CloseImageSource="minus"
ItemsSource="{Binding Controls}"
VerticalOptions="StartAndExpand"
HorizontalOptions="EndAndExpand"/>
Entire Page
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:CircleButtonMenuSample"
xmlns:controls="clr-namespace:CircleButtonMenu.Abstractions;assembly=CircleButtonMenu.Abstractions"
x:Class="CircleButtonMenuSample.MainPage">
<StackLayout>
<controls:CircleButtonMenu FillColor="Gray"
StrokeColor="Black"
OpenImageSource="plus"
CloseImageSource="minus"
ItemsSource="{Binding Controls}"
VerticalOptions="StartAndExpand"
HorizontalOptions="EndAndExpand"/>
<!-- Place new controls here -->
<Label Text="Welcome to Circle Button Menu!"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage>
View Model Binding
My apps always implement some form of Model-View-ViewModel (MVVM) Architecture and you will notice some Binding code when we added our control to the page. Adding a Controls property to the BindingContext will ensure this data is associated to the control correctly. Here is a snippet of how you can do it in the code behind.
1
2
3
4
5
6
7
8
9
10
11
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
BindingContext = new
{
Controls = new[] { "waves", "save", "sound" }
};
}
}
Note: We created the ViewModel inline in the code behind for simplicity, you really should create a separate class for this.
A String Array?
The string array you see in the code snippet are asset references for both Android and iOS projects. They are automatically bound to an ImageSource at the control. If you do not need to create a String Array but that is the easiest. You can create an ImageSource Array and the same code will work fine.
Open Source
The CircleButtonMenu is an open source project I maintain on GitHub. The project includes a sample project which is where you will find the code from this blog available for you to use and integrate into your own application. It is a great starting point to learn how to build powerful Xamarin.Forms animations.
I would love to hear from you and I am taking suggestions for this project.
-Happy Coding