Hints for programming a Xamarin.Forms application

Question

Sorry for my perhaps silly question. As I am new to Xamarin Forms, I need some basic hints:

I need a window ("secondary window") sliding from left into my main window. In this window, a list of items (with images and text) should be displayed and this window should cover only 1/4 to 1/2 of my main window. Dragging an item from this secondary window to the main window should start some action with this item on main window.

What type of view is best for this purpose and what are the keywords to search for? This looks like a flyout menu but how can I create such view from my main menu or clicking on a button?

I am using C# and Visual Studio 2022

Answer 1

Maybe like this , one page (ContentPage) with a Grid in a Grid.

The Grid MainContentGrid is sliding and the MenuContainer Grid is showing.

Then use Drag and Drop to put the Like Image in MenuContainer on the Drophere Image in MainContentGrid, then an event.

The MainContentGrid is using TranslateTo to slide away and back.

https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/gestures/drag-and-drop

https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/animation/simple

The MainPage

<Grid>
    <!--  Menu Grid  -->

    <Grid x:Name="MenuContainer" BackgroundColor="Gray">

        <StackLayout
            Margin="24,100,0,0"
            HorizontalOptions="Start"
            Spacing="30">

            <Label
                FontSize="28"
                HorizontalOptions="Center"
                Text="MENU Options" />

            <Image
                HeightRequest="50"
                HorizontalOptions="Center"
                Source="imglike.png"
                VerticalOptions="Center"
                WidthRequest="50">
                <Image.Clip>
                    <EllipseGeometry
                        Center="25,25"
                        RadiusX="25"
                        RadiusY="25" />
                </Image.Clip>
                <Image.GestureRecognizers>
                    <DragGestureRecognizer />
                </Image.GestureRecognizers>
            </Image>

        </StackLayout>
    </Grid>
    <!--  Main Content  -->

    <Grid
        x:Name="MainContentGrid"
        Padding="24,5,24,0"
        BackgroundColor="Red"
        ColumnDefinitions="*,Auto"
        RowDefinitions="Auto,*">

        <!--  Header Text  -->
        <StackLayout
            Grid.Row="0"
            Grid.Column="1"
            Spacing="4"
            VerticalOptions="Center">

            <Label Text="Slide Menu" />

        </StackLayout>

        <!--  Hamburger Pic  -->
        <Frame
            Grid.Row="0"
            Grid.Column="0"
            BackgroundColor="Red"
            BorderColor="Gray"
            CornerRadius="28"
            HeightRequest="56"
            HorizontalOptions="Start"
            VerticalOptions="Center"
            WidthRequest="56">
            <Frame.GestureRecognizers>
                <TapGestureRecognizer Tapped="ProfilePic_Clicked" />
            </Frame.GestureRecognizers>

            <Image
                HeightRequest="50"
                HorizontalOptions="Center"
                Source="icnhamburger.png"
                VerticalOptions="Center"
                WidthRequest="50">
                <Image.Clip>
                    <EllipseGeometry
                        Center="25,25"
                        RadiusX="25"
                        RadiusY="25" />
                </Image.Clip>
            </Image>

        </Frame>

        <Frame
            Grid.Row="1"
            Grid.Column="0"
            BackgroundColor="Red"
            BorderColor="Gray"
            CornerRadius="28"
            HeightRequest="56"
            HorizontalOptions="Start"
            VerticalOptions="Center"
            WidthRequest="56">

            <Image
                Aspect="AspectFill"
                HeightRequest="50"
                HorizontalOptions="Center"
                Source="drop.png"
                VerticalOptions="Center"
                WidthRequest="50">
                <Image.GestureRecognizers>
                    <DropGestureRecognizer Drop="DropGestureRecognizer_Drop" />
                </Image.GestureRecognizers>
            </Image>
            
        </Frame>
    </Grid>
</Grid>

MainPage.cs

 public partial class MainPage : ContentPage
{
    private const uint AnimationDuration = 500u;
    public MainPage()
    {
        InitializeComponent();
    }
    private async Task CloseMenu()
    {
        //Close the menu and bring back back the main content
        _ = MainContentGrid.FadeTo(1, AnimationDuration);
        _ = MainContentGrid.ScaleTo(1, AnimationDuration);
        await MainContentGrid.TranslateTo(0, 0, AnimationDuration, Easing.CubicIn);
    }
    async void ProfilePic_Clicked(System.Object sender, System.EventArgs e)
    {
        // Reveal our menu and move the main content out of the view
       _ = MainContentGrid.TranslateTo(this.Width * 0.5, this.Height * 0, AnimationDuration, Easing.CubicIn);
        await MainContentGrid.ScaleTo(0.8, AnimationDuration);
        _ = MainContentGrid.FadeTo(0.8, AnimationDuration);
    }

    private async void DropGestureRecognizer_Drop(object sender, DropEventArgs e)
    {
        await CloseMenu();
        await DisplayAlert("Job", "I have a job for you to do !", "OK");
    }
}

This is how it looks