Forum› Xamarin.Forms

Xamarin Forms: How to add dragging event for labels? - Word Search Game

SreeeeSreeee INMember ✭✭✭✭✭
edited September 2020 in Xamarin.Forms

I am trying to implement a word search game for my project. I have created the word search letterbox using the grid and label (using this blog). Each letterbox has some words and that words are listed under the letterbox. I need to select the word hidden in the letterbox by dragging the labels. When start dragging the background color changed to orange. If the dragged word is in the words list, change the background color to green. Also, I need to capture the total, right and wrong attempts.

Please watch this video for getting a clear idea. I have also added a sample project here for the reference. I need to do the below things:

  1. Dragging event for labels inside the grid.

  2. Change the background color to orange(when starts dragging) and green(when the word is in the list).

  3. A tickmark for found words.

  4. Capture the total attempts, wrong attempts, and correct attempts.

Tagged:

Best Answer

Answers

  • LeonLuLeonLu Member, Xamarin Team Xamurai

    Dragging event for labels inside the grid.

    Label have drag and drop gesture recognizers, you can refer to it.
    https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/gestures/drag-and-drop

    Refer to you video, add a pan gesture recognizer is a good choose.

  • SreeeeSreeee INMember ✭✭✭✭✭

    @LeonLu I have tried this, but the gesture is not working as expected. I have moved fingers threw one letter to another letters, only the first letter is responding. The remaining letters have no change. Also, it is very hard to gesture for the first letter. Could you please share a sample?

  • LeonLuLeonLu Member, Xamarin Team Xamurai

    Due to the new policy, I cannot send any sample or demo to you, you can open an support ticket(not free) for this issue. https://support.microsoft.com/en-us/supportforbusiness/productselection?sapId=211dd84f-3474-c3c5-79bf-66db630c92a6

  • SreeeeSreeee INMember ✭✭✭✭✭
    edited September 2020

    @LeonLu

    Since the pan gesture is not working as expected I tried the MR gestures package.

    I have tried the Swiped gesture like below, but nothing is happening when swipe on screen and how can I get the swiped letter on there?

    var label = new MR.Gestures.Label
{
    Text = _charachter,
    VerticalOptions = LayoutOptions.Center,
    HorizontalOptions = LayoutOptions.Center
};
gridLayout.Children.Add(label, columnIndex, rowIndex);

label.Swiped += (s, e) => 
{
    Debug.WriteLine("hi");
};

    Could you suggest a nugget package for the getsure effect like the video.

  • LeonLuLeonLu Member, Xamarin Team Xamurai
    edited September 2020

    Could you suggest a nugget package for the getsure effect like the video?

    Nope, I cannot find this kind of nuget packages.

    I tried with drag and drop gesture recognizer in xamarin forms as well. Due to it in the experimental stage, it cannot meet your needs. Here is running gif.

    Here is related code.

       <Label Text="A" x:Name="myLable" TextColor="Black" FontSize="Title">
                <Label.GestureRecognizers>
                    <DragGestureRecognizer  CanDrag="True"  DropCompleted="DragGestureRecognizer_DropCompleted" DragStarting="DragGestureRecognizer_DragStarting"/>
                </Label.GestureRecognizers>
            </Label>

        <Label Text="B" x:Name="myLable1" FontSize="Title" >

            <Label.GestureRecognizers>
                <DragGestureRecognizer  CanDrag="True"/>
                <DropGestureRecognizer  AllowDrop="True"  DragOver="DropGestureRecognizer_DragOver"/>
            </Label.GestureRecognizers>

        </Label>
        <Label Text="C" x:Name="myLable2" FontSize="Title" >
            <Label.GestureRecognizers>
                <DragGestureRecognizer  CanDrag="True"/>
                <DropGestureRecognizer  AllowDrop="True" DragOver="DropGestureRecognizer_DragOver_1"/>
            </Label.GestureRecognizers>
        </Label>

===============

  public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void DropGestureRecognizer_DragOver(object sender, DragEventArgs e)
        {
            myLable1.BackgroundColor = Color.Red;


        }

        private void DropGestureRecognizer_DragOver_1(object sender, DragEventArgs e)
        {
            myLable2.BackgroundColor = Color.Red;

        }


        private void DragGestureRecognizer_DragStarting(object sender, DragStartingEventArgs e)
        {
            myLable.BackgroundColor = Color.Red;
        }

        private void DragGestureRecognizer_DropCompleted(object sender, DropCompletedEventArgs e)
        {
            myLable1.Text = "B";
            myLable2.Text = "C";
        }
    }
  • SreeeeSreeee INMember ✭✭✭✭✭
    edited October 2020 Accepted Answer

    @LeonLu I have implemented the word search game with the clicked feature of the button. When using the clicked feature we need to check the pattern is correct or not. I am uploading a sample project with this comment, hope this will help someone. :)

    The sample contains the following features:

    1. Letterbox with words arranged from left to right, right to left, top to bottom, bottom to top, or diagonally. Also, hidden words are listed on the bottom of the page.
    2. Changing the background color to orange, when clicking a letter. If we click the letters in any of the above mechanisms, it will continue changing the background color to orange.
    3. When the word is found the background color is changing to green. If we change the pattern, I will remove the background color.
    4. Changing the color and adding a tick mark for found words.
    5. When all the words are found, added a restart option.

    References:

    https://github.com/neetfreek/word-search-generator/blob/master/WordSearch/WordSearch.cs
    https://forums.xamarin.com/discussion/185277/xamarin-forms-how-to-add-background-color-for-clicked-button-inside-grid-word-search-game#latest
    https://forums.xamarin.com/discussion/185301/xamarin-forms-grid-button-ui-breaks-when-click-restart-button#latest

Sign In or Register to comment.