如何在 Xamarin.Forms 製作出一個浮動功能表應用

當您有需要作出一個類似 Gmail 的浮動且可彈出與收起的功能表應用效果，當然，可以優先選擇購買付費的控制項；若您想要省點錢，並且做出這樣的效果，可以參考這篇文章，作出如下圖動畫效果。

這裡只是簡單應用了 Data Binding 資料繫結來完成這樣的效果，底下為這個頁面的 View & ViewModel。
這個專案的原始碼你可以在這裡取得 : https://github.com/vulcanlee/XFExchange/tree/master/XFRadialMenu

<?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:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="XFRadialMenu.Views.MainPage"
             Title="MainPage">
    <Grid
        HorizontalOptions="Fill" VerticalOptions="Fill"
        Margin="0,0,0,0"
        >
        <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
            <Label Text="{Binding Title}" />
            <Entry Placeholder="Account" />
            <Entry Placeholder="Password" />
            <Button Text="Login" />
        </StackLayout>

        <Grid
            HorizontalOptions="End" VerticalOptions="Center"
            RowSpacing="0" ColumnSpacing="0"
            >
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <BoxView
                IsVisible="{Binding ShowMenu}"
                Grid.RowSpan="3" Grid.ColumnSpan="3"
                Color="Pink"
                 />

            <Button 
                Grid.Row="1" Grid.Column="1"
                BackgroundColor="Navy"
                TextColor="White"
                Text="Menu" Command="{Binding MenuCommand}" />

            <Button 
                IsVisible="{Binding ShowMenu}"
                Grid.Row="0" Grid.Column="0"
                Text="Sub-Menu1" Command="{Binding SubMenuCommand}" CommandParameter="Sub-Menu1" />
            <Button 
                IsVisible="{Binding ShowMenu}"
                Grid.Row="0" Grid.Column="1"
                Text="Sub-Menu2" Command="{Binding SubMenuCommand}" CommandParameter="Sub-Menu2"/>
            <Button 
                IsVisible="{Binding ShowMenu}"
                Grid.Row="0" Grid.Column="2"
                Text="Sub-Menu3" Command="{Binding SubMenuCommand}" CommandParameter="Sub-Menu3"/>
            <Button 
                IsVisible="{Binding ShowMenu}"
                Grid.Row="1" Grid.Column="0"
                Text="Sub-Menu4" Command="{Binding SubMenuCommand}" CommandParameter="Sub-Menu4"/>
            <Button 
                IsVisible="{Binding ShowMenu}"
                Grid.Row="1" Grid.Column="2"
                Text="Sub-Menu5" Command="{Binding SubMenuCommand}" CommandParameter="Sub-Menu5"/>
            <Button 
                IsVisible="{Binding ShowMenu}"
                Grid.Row="2" Grid.Column="0"
                Text="Sub-Menu6" Command="{Binding SubMenuCommand}" CommandParameter="Sub-Menu6"/>
            <Button 
                IsVisible="{Binding ShowMenu}"
                Grid.Row="2" Grid.Column="1"
                Text="Sub-Menu7" Command="{Binding SubMenuCommand}" CommandParameter="Sub-Menu7"/>
            <Button 
                IsVisible="{Binding ShowMenu}"
                Grid.Row="2" Grid.Column="2"
                Text="Sub-Menu8" Command="{Binding SubMenuCommand}" CommandParameter="Sub-Menu8"/>
        </Grid>
    </Grid>
</ContentPage>

using Prism.Commands;
using Prism.Mvvm;
using Prism.Navigation;
using System;
using System.Collections.Generic;
using System.Linq;

namespace XFRadialMenu.ViewModels
{
    public class MainPageViewModel : BindableBase, INavigationAware
    {
        private string _title;
        public string Title
        {
            get { return _title; }
            set { SetProperty(ref _title, value); }
        }

        #region ShowMenu
        private bool _ShowMenu=false;
        /// <summary>
        /// ShowMenu
        /// </summary>
        public bool ShowMenu
        {
            get { return this._ShowMenu; }
            set { this.SetProperty(ref this._ShowMenu, value); }
        }
        #endregion

        public DelegateCommand MenuCommand { get; set; }

        public DelegateCommand<string> SubMenuCommand { get; set; }

        public MainPageViewModel()
        {
            MenuCommand = new DelegateCommand(() =>
            {
                ShowMenu = !ShowMenu;
            });
            SubMenuCommand = new DelegateCommand<string>(x =>
            {
                Title = $"Your press {x}";
                ShowMenu = false;
            });
        }

        public void OnNavigatedFrom(NavigationParameters parameters)
        {

        }

        public void OnNavigatedTo(NavigationParameters parameters)
        {
            if (parameters.ContainsKey("title"))
                Title = (string)parameters["title"] + " and Prism";
        }
    }
}