Drop Down MenusCSS Drop Down MenuPure CSS Dropdown Menu

Saturday, May 13, 2017

Microsoft Announces Xamarin Live Player on Visual Studio

Introduction:

Visual Studio 2017 was launched on March 7, 2017 with many fresh and exciting features for Visual Studio developers and Xamarin Live Player Announced on stage at Build 2017.
Developing iOS and Android apps on a Windows PC and run on Xamarin Live Player app no need to setup emulator or connect cable to deploy the code and You have the app running from Visual Studio, either with or without the debugger, you can enable “Live Run” mode, which will constantly deploy your code as you edit it.
Setup on Windows machine:

  1. Download and Install Visual Studio 2017 15.3 Preview or above from https://www.visualstudio.com/vs/preview/
  2. Connect PC and device on the same Wifi network
  3. Xamarin Live Player will support only on Visual Studio, does not work on xamarin studio
Setup on Mobile Device:
  1. Download and Install Xamarin Live Player on iOS device from https://itunes.apple.com/us/app/xamarin-live-player/id1228841832?ls=1&mt=8
  2. Download and Install Xamarin Live Player on Android Device from  https://play.google.com/store/apps/details?id=com.xamarin.live
Step 1: Create New Xamarin Forms Application:
Let's start with creating a new Xamarin project in Visual Studio.
Click on Windows Key > Select Visual Studio 2017 Preview


Step 2: Select New Template:
New Project (Ctrl+Shift+N) -> select Portable Blank Xaml app.
Step 3: Select Live Player:
Choose live Player in the device list
If you have already paired a device, it will be available as an option.

Otherwise you'll be prompted to pair a device when required. When you press Pair to Visual Studio, use the camera to scan the barcode showing on your computer or enter the code you see on your device on screen


You can click on Tools > Xamarin Live Player > Manage Devices

Step 4: Run and Debug Application:
Select your device and run the application.
Start Without Debugging – you can edit the app and see the changes occur on the device Start Debugging – you can set breakpoints and inspect variables, but code cannot be edited.
Issues and Resolutions:
I have shared some implementation, development issues and solution given below.
http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/getting-started-with-google-and-bing-maps-using-xamarin-forms/Images/image014.jpg
  1. Mobile Device Does connect to PC ?
Solution:
  1. Make sure device and computer are on same network
  2. Restart Xamarin Live player app
  3. if Device connect with Cable, you disconnect and deploy the application
  1. No option to select Xamarin Live Player in the device list?

Solution:
    1. Ensure you are using Visual Studio 2017 15.3 Preview from https://www.visualstudio.com/vs/preview/
    2. Install the Xamarin Updater from:
https://marketplace.visualstudio.com/items?itemName=Xamarin.XamarinUpdater
    1. Update all the things in Extensions & Updates under Updates > Xamarin Preview which will download the available updates.
    2. Close Visual Studio, which auto-launches the installer for the downloaded updates.
    3. Relaunch Visual Studio after the installation finishes.
Summary:
This article you learned about Xamarin Live Player ,VS system requirement, install Visual studio preview 15.3 and issue and resolution.
If you have any question/ feedback/ issues, please write them in the comment box

Getting Started with Xamarin Application using Visual Studio for Mac

Introduction:

Visual Studio 2017 for mac was launched at MS Build 2017 with many fresh and exciting features for Visual Studio developers in mac machine. Mac OS user can build apps for mobile, web, and cloud with Xamarin and .NET Core, games with Unity using Visual Studio.
In this article, I will share how to create new Xamarin.Forms application using Visual studio for mac.

System Requirement:


Visual Studio 2017 for mac will install and run on the following operating system
  1. MacOS Sierra 10.12 or Mac OS X El Capitan 10.11
  2. Xcode 8.3 or above requires macOS Sierra 10.12,
  3. Xamarin.Android requires the 64-bit Java Development Kit (JDK)
  4. 1.8 GHz or faster processor with min 4GB RAM .

Install Visual Studio for mac:


Download Visual Studio 2017 for mac from https://www.visualstudio.com/vs/?os=mac .If you are downloading before May 17, you will get free 60-day access to Xamarin University.

Create New Xamarin.Forms Application:


Step 1: Launch VS from mac:
Launch Visual Studio for mac from Launchpad
Step 2: Create New Solution :
Create New Solution (File >New Solution) or VS home screen > Click on New Project


Step 3: Choose a Template:
Visual Studio for mac will support to develop apps for Android, macOS, iOS, tvOS, watchOS, web, and cloud. Code fast and test. Here, I will select xamarin.Forms template under multiplatform .

Step 4: Multiplatform Xamarin.Forms Application:
The Multiplatform Xamarin.Forms App and the Native App project templates now provide you a quick way to create a multiplatform mobile app with cloud backend. This template will include Xamarin.iOS ,Xamairn.Android and share code with cloud service .
Provide App name. identifier, platform and mobile backend detail from following screen
Step 5: Configure Your Application:
Provide the project, solution name, local location and version control details from following screen  

Step 6: Solution successfully Created:
You can do Drag and Drop UI Design for iOS and android with Live preview and building, deployment, debugging the application.

Step 7: Run the Application:
Debug and Run the xamarin application
Summary:
This article you learned VS system requirement, install Visual studio from mac and how to create new xamarin application using Visual studio for mac.
If you have any question/ feedback/ issues, please write them in the comment box

Saturday, April 22, 2017

Value Converter in Xamarin.Forms

Introduction:
Databind two control properties or view model property that have incompatible types / Validation, you need a piece of code in between, that converts the value from source to target type and back. This piece of code is called ValueConverter. A value converter is a class, that implements the interface IValueConverter with the two methods object Convert(object value) and object ConvertBack(object value).
In this article, I will share about IValueConverter in xamarin.forms application
Create New Xamarin Forms Application:
Let's start with creating a new Xamarin Forms Project in Visual Studio.

Open Run - Type Devenev.Exe and enter - New Project (Ctrl+Shift+N) - select Blank Xaml App (Xamarin.Forms Portable) template.
You can refer my previous article for create new xamarin forms application from here - http://www.c-sharpcorner.com/article/how-to-create-first-xamarin-form-application/
Create New Value Convert Class:
You can create new Value Converter class now, Right Click Project > Add New Item > Add Class File, Name as “ MaxLengthConverter” .
In the following sample, I am getting value from Editor control and checking text length ,if text length less than 100 words  means label color changed green or Red color .
Inherit IvalueConverter interface and add xamarin.Forms name space .
  1. using System;
  2. using System.Globalization;
  3. using Xamarin.Forms;
  4. namespace MVVMXamarin
  5. {
  6.    class MaxLengthColorConverter : IValueConverter
  7.    {
  8.        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
  9.        {
  10.            if (value != null)
  11.            {
  12.                int count = value.ToString().Length;
  13.                if (count > 100)
  14.                {
  15.                    return Color.Red;
  16.                }
  17.            }
  18.            return Color.Green;
  19.        }
  20.        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
  21.        {
  22.            throw new NotImplementedException();
  23.        }
  24.    }
  25. }


Implement Value Convert in Xaml:
In the following xaml page, added converter class within Resource Dictionary and added convert class key from control
  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
      1. xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
      2. x:Class="MVVMXamarin.ConvertDemo"
  3. xmlns:local="clr-namespace:MVVMXamarin;assembly=MVVMXamarin">
  4. <ContentPage.Resources>
  5. <ResourceDictionary>
  6. <local:MaxLengthColorConverter x:Key="cnmaxlength"></local:MaxLengthColorConverter>
  7. </ResourceDictionary>
  8. </ContentPage.Resources>
  9. <StackLayout>
  10. <Label Text="About You"></Label>
  11. <Editor  x:Name ="txtname"></Editor>
  12. <Label BindingContext="{x:Reference Name=txtname}" Text="Please Say about you within 100 words" BackgroundColor="{Binding Path=Text,Converter={StaticResource cnmaxlength}}"
      1. VerticalOptions="Center"
      2. HorizontalOptions="Center" />
  13. </StackLayout>
  14. </ContentPage>
Implement value Converter in C#:
In the following sample code shown, how add converter class into c# binding control .You can add your converter class into Setbinding method.
  1. StackLayout layout = new StackLayout();
  2. Label lbltitle = new Label();
  3. lbltitle.Text = "About Me";
  4. layout.Children.Add(lbltitle);
  5. var editor = new Editor();
  6. layout.Children.Add(editor);
  7. var label = new Label();
  8. label.Text = "Please Say about you within 100 words";
  9. label.SetBinding(Label.BackgroundColorProperty, new Binding("BackgroundColor",mode:BindingMode.Default, source: editor,converter: new MaxLengthColorConverter(),stringFormat:null));
  10. layout.Children.Add(label);
  11. this.Content = layout;

I believe this article will help you for how to use IValueConverter  

Download Source code :