Base solution for your next web application
Open Closed

How to create simple page in Xamarin Android? #4295


User avatar
0
soonjoo created

Hello team,

I am very new to Xamarin and want to test it out on your framework. I am trying to create a simple page.. I managed to show out the link on the side menu, however clicking on the link does nothing. May I know which steps I have missed out?

First I added a new content page to in Mobile.Shared Views Folder

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Name="BarcodeSearchPage"
             x:Class="MyCompany.MyProject.Views.BarcodeSearchView"
             xmlns:behaviors="clr-namespace:MyCompany.MyProject.Behaviors;assembly=MyCompany.MyProject.Mobile.Shared"
             xmlns:base="clr-namespace:MyCompany.MyProject.ViewModels.Base;assembly=MyCompany.MyProject.Mobile.Shared"
             xmlns:controls="clr-namespace:MyCompany.MyProject.Controls;assembly=MyCompany.MyProject.Mobile.Shared"
             xmlns:image="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"
             xmlns:extensions="clr-namespace:MyCompany.MyProject.Extensions.MarkupExtensions;assembly=MyCompany.MyProject.Mobile.Shared"
             xmlns:permission="clr-namespace:MyCompany.MyProject.Services.Permission;assembly=MyCompany.MyProject.Mobile.Shared"
             base:ViewManager.AutoWireViewModel="true" 
             Title="{Binding Title}">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="Welcome to Xamarin.Forms!"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage.Content>

    <ContentPage.Behaviors>
        <behaviors:EventHandlerBehavior EventName="Appearing">
            <behaviors:InvokeCommandAction Command="{Binding PageAppearingCommand}" />
        </behaviors:EventHandlerBehavior>
    </ContentPage.Behaviors>
</ContentPage>


[XamlCompilation(XamlCompilationOptions.Compile)]
	public partial class BarcodeSearchView : ContentPage
	{
		public BarcodeSearchView ()
		{
			InitializeComponent ();
		}
	}

Then I added a new file in Mobile.Shared ViewModels Folder

public class BarcodeSearchViewModel : XamarinViewModel
    {
        public string Title => L.Localize("Barcode Search");

        public BarcodeSearchViewModel()
        {
        }
    }

Then I added a new Navigation Menu Item

private readonly ObservableRangeCollection<NavigationMenuItem> _menuItems = new ObservableRangeCollection<NavigationMenuItem>
        {
            new NavigationMenuItem
            {
                Title = L.Localize("Tenants"),
                Icon = "Tenants.png",
                ViewType = typeof(TenantsView),
                RequiredPermissionName = PermissionKey.Tenants,
            },
            new NavigationMenuItem
            {
                Title = L.Localize("Users"),
                Icon = "UserList.png",
                ViewType = typeof(UsersView),
                RequiredPermissionName = PermissionKey.Users,
            },
            new NavigationMenuItem
            {
                Title = "Search Barcodes",
                Icon = "UserList.png",
                ViewType = typeof(BarcodeSearchView),
            }
            
            /*This is a sample menu item to guide how to add a new item.
                ,new NavigationMenuItem
                {
                    Title = "Sample View",
                    Icon = "MyIcon.png",
                    TargetType = typeof(_SampleView),
                    Order = 10
                }
            */
        };

What steps did I miss out so I can navigate to my page? Thank you.


6 Answer(s)
  • User Avatar
    0
    soonjoo created

    Hello, I had managed to do it, I needed to inherit IXamarinView inside my BarcodeSearchView class.. now the page loads properly.

    Thanks!

  • User Avatar
    0
    ismcagdas created
    Support Team

    Thanks @soonjoo,

    We are also preparing a step by step development guide for Xamarin. Probably, it will be ready next week.

  • User Avatar
    0
    soonjoo created

    thank you, looking forward to that!

  • User Avatar
    0
    alper created
    Support Team

    btw you can copy-paste _SampleView.xaml and _SampleViewModel.cs classes to add a new page. It's easier.

  • User Avatar
    0
    soonjoo created

    Thank you, I will try that.

    I am trying to add a barcode scanner onto my page. However, the Abp Xamarin framework is much different from the tutorials, and it's very hard for me who is very new to this. A little guidance is very appreciated.

    This is the barcode scanner I plan to integrate, <a class="postlink" href="https://blog.xamarin.com/barcode-scanning-made-easy-with-zxing-net-for-xamarin-forms/">https://blog.xamarin.com/barcode-scanni ... rin-forms/</a>

    They said to create a Scanner Page I just need 2 lines of code.

    var scanPage = new ZXingScannerPage ();
    // Navigate to our scanner page
    await Navigation.PushAsync (scanPage);
    

    I can see MenuProvider which allows me to add new menu items, and NavigationService which does the pushing and popping. However, how do I add this in using the current menu provider?

    also, to get the results?

    scanPage.OnScanResult += (result) => 
    {
        // Stop scanning
        scanPage.IsScanning = false;
     
        // Pop the page and show the result
        Device.BeginInvokeOnMainThread (async () => 
        {
            await Navigation.PopAsync ();        
            await DisplayAlert("Scanned Barcode", result.Text, "OK");
        });
    };
    

    Thank you

  • User Avatar
    0
    soonjoo created

    Hello team,

    I have managed to do it, and it successfully calls the barcode scanner and gets the result of the scan! I had to create an overloaded method for Navigation Service Set Detail Page Async, to accept page instead of just a viewType, then I would pass in the scanner into that page. After it completes the scan, it will pop the page back out. Thank you.

    private async Task ScanBarcodeAsync()
            {
                var scanPage = new ZXingScannerPage();
                await NavigationService.SetDetailPageAsync(scanPage, null, true);
                scanPage.OnScanResult += (scanResult) =>
                {
                    // Stop scanning
                    scanPage.IsScanning = false;
    
                    // Pop the page and show the result
                    Device.BeginInvokeOnMainThread(async () => {
                        await NavigationService.GoBackAsync();
                        BarcodeText = scanResult.Text;
                        await SearchBarcodeAsync();
                    });
    
    
                };
            }