Blog

I had a question today about how the recorder works for with the Xamarin Tools in Visual Studio 2017. I’ve had mixed success with getting it to work, so I thought I’d document the steps that make it work. The trick is you need to be running a version of the APK that is not using the shared runtime (a default when you do a debug build). For that reason I use the release build to record the test. Here’s the basic flow:

1. Create new cross platform project with the blank template
2. Build & run it on my device (first in debug but then again in release)
3. add the UI Test project to the solution
4. In the Android project show all files and navigate to the bin/release folder and copy the path
5. In the Test.cs file at the top of the class near the [TestFixture(Platform.Android)] line click on record new test and then select the APK - make sure to put in the path of the signed release version of the apk
6. Wait until you notice the app running on the device
7. When you tap the screen, swipe left or right you'll see the [Test] method NewTest() gets new code added to it.

        [Test]
        public void NewTest()
        {
            app.SwipeLeftToRight();
            app.Tap(x => x.Class("PageRenderer"));
            app.SwipeLeftToRight();
            app.SwipeLeftToRight();
            app.ScrollDown();
            app.ScrollUp();
            app.SwipeLeftToRight();
            app.SwipeRightToLeft();
            app.Screenshot("Swiped left");
        }

As promised last week I updated the slides with the session that the content was drawn from. Here is the consolidated list of sessions with deeper dives into the topics from Build:

• B8020 - Cognitive Services & Computer Vision Made Easy
• B8049 - Enable intelligence with Azure IoT Edge
• B8096 - Windows Template Studio
• B8100 - What's New and Coming in Windows UI Platform
• B8001 - Three Runtimes One Standard .NET Standard
• B8048 - Introducing .NET Core 2.0
• B8027 - Azure Debugging & Snappoints
• B8039 - Design for Serverless Success
• B8061 - How to build serverless business applications
• B8099 - Xamarin Tools
• B8103 - The Future of Xamarin Development
• B8072 - Overview of Mobile Center

My GitHub repo for the event - http://github.com/mbenko/rebuild17. Other links from the event include:

• http://azure.com/cognitive
• http://microsoft.com/net/core/preview
• http://visualstudio.com/
• http://mobile.azure.com/
• http://aka.ms/azafr (functions runtime)

Starting Friday March 24 I’m working with Microsoft and the community of MVP’s to resurrect a type of event format we used to run for MSDN, the half day – Explore the Possible – see it in action – event. I’d love to invite you to join me on the tour, stop by and say hi. We will explore the move towards productivity and effectiveness of development and deployment tools and technologies.

Since Visual Studio launched 20 years ago it has evolved to become a favorite IDE of the casual to professional developer. With the launch of Visual Studio 2017 Microsoft has stepped up their game with improvements to make it easier to work with Cloud, Mobile and Web, as well as a number of productivity improvements. Join us as we explore the possible with the latest tools and technologies with Visual Studio, Xamarin and the Mobile Center, and DevOps with Team Services. The day starts at 8:30 and ends with a hackfest/install pizza party.

• 8:30 – Hello Visual Studio
• 9:45 – Exploring Mobile Stack
• 11:00 – DevOps, .NET Core, Docker and more
• 12:00 – Pizza & Hackfest

The list of cities and dates include:

• 3/24/2017  - Minneapolis – http://bit.ly/bolVS17msp
• 4/11/2017 – Des Moines – http://bit.ly/bolVS17dsm
• 4/12/2017 – Omaha – http://bit.ly/bolVS17omaha
• 4/17/2017 – Chicago – http://bit.ly/bolVS17dg
• 4/18/2017 – St. Louis – http://bit.ly/bolVS17stl
• 4/19/2017 – Kansas City – http://bit.ly/bolVS17kc

Hope to see you there!

-mike

Watching the live stream of the Visual Studio 2017 launch and 20 year anniversary party…thought I’d capture some of the notes of what’s going on and share the fun.

Visual Studio 2017 release

• Video http://launch.visualstudio.com
• Download: http://visualstudio.com
• New installer, pick scenario and go

Developer Productivity - Kasey Uhlenhuth

• Live Unit Tests
• Exception helper
• Find all references
• New intellitrace tray of options
• Ctrl+T for goto All
• Code suggestions
• Code Config file - map code styles and suggestions for environment
• Support for tuples on methods
• Improved refactoring
• Indent guide visibility to method code is in even if not visible

.NET Core - Beth Massi

• .net Tools for Core 1.0 in production
• Migrate/Upgrade to new tools easy
• Simplified csproj format which is human readable
• References grouped by type…i.e. nuget refs, project refs, etc.
• Application Insights
  • New add-in experience
  • Search and graph analytics in VS

Containers Docker - Scott Hanselman

• Add docker support in VS right click on project
• Run in docker if selected startup project
• Debug, edit and volume mapping realtime from vs to docker
• Publish to Linux docker or windows
• Automatically references other docker containers dependent on
• Debug across containers
• Check out Ref application http://aka.ms/MicroservicesArchitecture

Xamarin : James & Miguel

• Tizen new OS from Samsung for IoT devices…built on Xamarin Forms
• Visual Studio for Mac Preview 4
• New App templates
  • Mobile App added with best practices if checkbox Azure
  • Code for clients
• Forms Previewer
  • Works if you have JDK 1.8+ on x64 installed (settings?)
• Improved intellisense
• Native animations in XAML
• Forms inspector, when connected tp android emulator
  • Layers
  • Live edit of XAML

VS Mobile Center - Keith

• http://mobile.azure.com
• Xamarin Test Cloud
• Add app…pick type
• Add nuget & register app
• Distribute sets up a team of testers/user community for builds
• Build service
  • Pick sln
  • Provisioning profile
  • Certificate for signed builds
  • Trigger
• Test service …
  • run automated UI tests
  • See devices tested on
• Crash reporting
  • Usage & crash info
  • Stack dumps grouped by count
• Analytics
  • Custom events

DevOps - Brian Harry & Donovan Brown

• Continuous delivery
• "Shift Right" = delivery improvements, production is part of the plan
• TFS 2017.1 for on Premise installs
• http://aka.ms/tfsimportdata
• Donovan demo - any project, any platform
  • Create project
  • Import Git repo
  • View code
  • Setup build from templates or by scratch
    • Sources - where is repo? In TS or external?
    • Test settings
    • Code Coverage
    • Build agents - windows or linux
    • Search for build task
    • Marketplace for build tasks
    • Create your own extension
    • Variables
    • Create work items on failure
    • Track history/changes to build definitions
  • Release definitions
    • Infrastructure as code
    • Approvers
  • Dashboards
• Data Migration - Partner with Red Gate
  • In VS RedGate ReadyRoll has tools by default
  • SQL Obj explorer, make changes and save
  • Tell ReadyRoll to refresh with changes, generate migration scripts
    • Add update statements for populating default values on existing data after modification
  • Add database scripts and changes that will happen on the database
  • Add the ReadyRoll task to deploy the database task
• RedGate included in VS 2017 Enterprise
• Pluralsight 1yr
• DevOps Enterprise Accelerator offer

I’ve been working on a project that integrates Xamarin with Azure Mobile Apps and uses HockeyApp to distribute the code to test devices. I wanted to add the feature in HockeyApp to allow users to be able to send feedback (including a screenshot) from within the app. On searching for an answer I found a number of good leads but nothing that connected them all so this post is intended to go thru what you need to do to add this feature to your app.

We start with an app that is created from the standard Xamarin Forms template in Visual Studio for cross-platform apps (this assumes you have Visual Studio 2015.3 with the Xamarin tools installed otherwise it will prompt you to add them).

The solution will look like this. Note I had to do a little work to use the Shared version of Xamarin forms with XAML in that I replaced the default App.cs file it includes with XAML versions of that and the MainPage.xaml. You can see the completed demo sample on GitHub here

To add HockeyApp’s feedback feature to our solution go to https://www.hockeyapp.net/ and sign up to create a new app. After an app has been created you can get the HockeyApp ID and use it in the MainActivity.cs code for the OnCreate() method when the application registers with HockeyApp. The process is fairly straight forward:

1. Create a new app on HockeyApp (https://support.hockeyapp.net/kb/app-management-2/how-to-create-a-new-app)
2. Add the HockeyApp component from Xamarin (https://components.xamarin.com/view/hockeyappandroid)
   
3. In the MainActivity.cs file of the Android project add a function to register HockeyApp with the AppID you created. We will call it from the OnCreate(). 

4. private void InitializeHockeyApp()
   {
       CrashManager.Register(this, HOCKEYAPP_APPID, new MyCrashManagerListener());
      
       UpdateManager.Register(this, HOCKEYAPP_APPID);
       FeedbackManager.Register(this, HOCKEYAPP_APPID);
       Tracking.StartUsage(this);
      
   }

5. Add a method to handle the feedback calls in the MainActivity class. In this implementation I’m also capturing a screenshot that can be added to the feedback process if the user chooses.

6. public void HandleFeedback()
   {
       FeedbackManager.SetActivityForScreenshot(MainActivity.current);
       FeedbackManager.TakeScreenshot(MainActivity.current);

       FeedbackManager.ShowFeedbackActivity(MainActivity.current);
   }

7. Implement an ISensorEventListener class to handle shake activity. Note that you need to implement both the Java.Lang.Object interface as well as the ISensorEventListener. I added an overloaded constructor to allow me to pass a reference to the MainActivity instance (parent) that uses this to handle sensor activity. We will also handle the 

8. 
   // --- Implement ISensorEventListener
   public class MyShakeHandler : Java.Lang.Object, ISensorEventListener
   {
       // --- Reference to parent activity
       private MainActivity parent;

       // Handle Shake from - http://stackoverflow.com/questions/23120186/can-xamarin-handle-shake-accelerometer-on-android
       bool hasUpdated = false;

       DateTime lastUpdate;
       float last_x = 0.0f;
       float last_y = 0.0f;
       float last_z = 0.0f;

       const int ShakeDetectionTimeLapse = 250;
       const double ShakeThreshold = 800;

       // --- In constructor set parent
       public MyShakeHandler(Activity context) : base()
       {
           parent = (MainActivity)context;
       }

       public void OnAccuracyChanged(Android.Hardware.Sensor sensor, Android.Hardware.SensorStatus accuracy)
       {
       }

       public void OnSensorChanged(Android.Hardware.SensorEvent e)
       {
           if (e.Sensor.Type == Android.Hardware.SensorType.Accelerometer)
           {
               float x = e.Values[0];
               float y = e.Values[1];
               float z = e.Values[2];

               DateTime curTime = System.DateTime.Now;
               if (hasUpdated == false)
               {
                   hasUpdated = true;
                   lastUpdate = curTime;
                   last_x = x;
                   last_y = y;
                   last_z = z;
               }
               else
               {
                   if ((curTime - lastUpdate).TotalMilliseconds > ShakeDetectionTimeLapse)
                   {
                       float diffTime = (float)(curTime - lastUpdate).TotalMilliseconds;
                       lastUpdate = curTime;
                       float total = x + y + z - last_x - last_y - last_z;
                       float speed = Math.Abs(total) / diffTime * 10000;

                       if (speed > ShakeThreshold)
                       {
                           // --- Call parent's Feedback handler
                           parent.HandleFeedback();
                       }

                       last_x = x;
                       last_y = y;
                       last_z = z;
                   }
               }
           }
       }
   }

9. In the MainActivity.cs OnCreate() function add code to add an accelerometer sensor recognition. Note that you also have to add usings for Android.Hardware and for HockeyApp.Android. The code for OnCreate() will look like this:

10.         // --- Add Globals
            public static string HOCKEYAPP_APPID = "<HOCKEYAPP ID>";
            public static Android.App.Activity current;

            protected override void OnCreate (Bundle bundle)
            {
                base.OnCreate (bundle);

                // --- Register this as a listener with the underlying service.
                var sensorManager = GetSystemService(SensorService) as Android.Hardware.SensorManager;
                var sensor = sensorManager.GetDefaultSensor(Android.Hardware.SensorType.Accelerometer);

                current = this;
                sensorManager.RegisterListener(new MyShakeHandler(current), sensor, Android.Hardware.SensorDelay.Normal);
                InitializeHockeyApp();

     

                global::Xamarin.Forms.Forms.Init (this, bundle);
                LoadApplication(new App());
            }

11. In the AndroidManifest.xml add permissions to the sensors

12. <?xml version="1.0" encoding="utf-8"?>
    <manifest xmlns:android="http://schemas.android.com/apk/res/android">
      <uses-sdk android:minSdkVersion="15" />
      <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
      <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
      <uses-permission android:name="android.permission.ACCESS_MOCK_LOCATION" />
      <uses-permission android:name="android.permission.INTERNET" />
      <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
      <uses-feature android:name="android.hardware.sensor.accelerometer" android:required="true" />
      <application android:label="xForms-FeedbackDemo"></application>
    </manifest>

13. In my scenario I also wanted a button on an about page that can be used to trigger the feedback logic from XAML. To make it work with a Shared code project in Xamarin Forms, I defined a DROID compilation definition so I can conditionally work with Android specific code
    
14. In the XAML page you want to add a feedback button connect to the MainActivity’s logic. 

15. using System;
    using Xamarin.Forms;

    #if DROID
    using HockeyApp.Android;
    using XamFormsFeedbackDemo.Droid;
    #endif

    namespace XamFormsFeedbackDemo
    {
        public partial class MainPage : ContentPage
        {
            public MainPage ()
            {
                InitializeComponent ();
            }
            public void btnFeedback(object sender, EventArgs e)
            {
    #if DROID
                FeedbackManager.SetActivityForScreenshot(MainActivity.current);
                FeedbackManager.TakeScreenshot(MainActivity.current);

                FeedbackManager.ShowFeedbackActivity(MainActivity.current);
    #endif
            }
        }
    }

You can download the code from GitHub here.

Happy Coding!

Building code is always fun, especially when you get to work with new technologies and cool tools that make our lives as developers easier. One of those concepts that is driving a lot of organizations is that of DevOps, which we will define here as an approach for automating and  connecting work done with released software. In this article I’d like to show how to connect some of the tools available from Microsoft to work with mobile applications. This will include Xamarin, Team Services, HockeyApp and Azure Mobile Apps.

The process flow

1. Create a Team Project – myXamarinDemo
2. In Visual Studio create a Xamarin Forms with XAML and PCL project
3. Add the solution to source control (use GIt and navigate to select the team project you created)
4. Commit & Sync
5. In Team Services add a build definition (Xamarin.Android template)
6. Remove the steps that activate and deactivate the license, then queue a build
7. In VS droid project add HockeyApp.droid component and code to register app

DevOps is

Have you ever tried to reuse code by adding existing files to a project? In Visual Studio this usually works, with the file getting put into the right location, associating the editor based on the file extension. I’ve been working on a Xamarin Forms project which allows me to use XAML to create the UI and C# for the code behind. This enables me to leverage my skills and experience building Windows and Windows Phone applications on iOS and Android. The problem came when I would include an existing file into a project.

The error: InitializeComponent does not exist – makes me wonder what’s wrong with the file? First things first, I checked that the namespace and class names matched. Next I tried commenting out what might’ve been invalid XAML syntax with the thought that maybe it wasn’t compiling right. No luck. Finally I compared the file to another that was working (I added myWorkingForm.XAML and guess what, no error in that one!). Both had the same namespace, both had the same class name declared as public partial (meaning it’ll compile the XAML + the C# into a class).

Finally I was down to looking at the compiled objects folder…and I saw that while myWorkingForm created an interim file myWorkingForm.xaml.g.cs the one that came from the file I included did not. I decided to look at the shared project’s projitems file (which is what lists the types of files in the project). I discovered that Visual Studio assumes that a XAML file is Windows XAML, not Xamarin XAML. In the projitems file the XML showed that adding the existing file associated it as a Page, where the other file that worked was marked as an Embedded resource (see below).

<ItemGroup>
  <EmbeddedResource Include="$(MSBuildThisFileDirectory)Pages\myWorkingForm.xaml">
    <SubType>Designer</SubType>
    <Generator>MSBuild:UpdateDesignTimeXaml</Generator>
  </EmbeddedResource>
</ItemGroup>

<ItemGroup>
  <Page Include="$(MSBuildThisFileDirectory)Pages\TestForm.xaml">
    <SubType>Designer</SubType>
    <Generator>MSBuild:Compile</Generator>
  </Page>
</ItemGroup>

To make it work? Manually change the myproject.projitems file (in the solution explorer open the containing folder then edit the file with notepad) for TestForm.xaml to use the EmbeddedResource tag, matching that for myWorkingForm.xaml. This causes the build to use the Xamarin compiler and generate an interim file TestForm.xaml.g.cs. Problem solved!

Happy Coding!    (originally posted on www.benkotips.com)

I’ve been working on a project using Xamarin.Forms and Azure Mobile Services for a while, and one issue I came across that wasn’t entirely clear is how do you work with an existing database, yet support updates to the tables and be able to deploy to different environments (like Test, QA and Prod)? Hopefully I can shed some light with this post.

Azure Mobile Services is a feature rich cloud service that promises to take care of some of the complexities of building connected mobile apps. It supports things like 3rd party federated identity, push notifications, logging and more. With the original node.js release it supported JavaScript configuration for the CRUD operations against a table along with a dynamic schema that adapts to the request received via REST. In the .NET release they replace node.js with the ability to roll your own logic in C# and handle the data interaction with WebAPI type controllers. It requires a bit more work, and handling the database changes can be confusing.

Fortunately I’ve found a couple articles that help illustrate how this is done (on MSDN), but it doesn’t specify how to handle ongoing updates. To make it work for my scenario I either needed a way to support data model changes to a .NET backend mobile service, but have a consistent schema name when I move between environments. In the second article they show how to enable code-migrations, and to replace the default database initializers, by using the NuGet package manager and modifying code in the WebApiConfig.cs file. The steps were:

1. Use NuGet Package Manager to Enable-Migrations
2. Add a starting migration
3. Update the WebApiConfig.cs file to use a DbMigrator to update the context instead of calling the default initializer

   
    public static class WebApiConfig
    {
       public static void Register()
       {
           // Use this class to set configuration options for your mobile service
           ConfigOptions options = new ConfigOptions();
   
           // Use this class to set WebAPI configuration options
           HttpConfiguration config = ServiceConfig.Initialize(new ConfigBuilder(options));
           
           // *** BENKO: Enable database migrations for the service
           //Database.SetInitializer(new MobileServiceInitializer());
           var migrator = new DbMigrator(new Configuration());
           migrator.Update();
       }
    } 
    

4. Test local and confirm it’s working

I added a couple additional changes to set the schema name for my app in the MobileServiceContext.cs file (in the Models folder).

 protected override void OnModelCreating(DbModelBuilder modelBuilder)
 {
    // *** BENKO: This is what sets the schema name to the service name...
    string schema = ServiceSettingsDictionary.GetSchemaName();
    schema = "mySchema";
    if (!string.IsNullOrEmpty(schema))
    {
        modelBuilder.HasDefaultSchema(schema);
    }

    modelBuilder.Conventions.Add(
        new AttributeToColumnAnnotationConvention<TableColumnAttribute, string>(
            "ServiceTableColumn", (property, attributes) => attributes.Single().ColumnType.ToString()));
 }
 
 

I also need to make sure to create the schema on my database instance in SQL Azure and grant rights to the service user account. You can get the user account using SQL Server Mgmt tool (expand the users of the database node, or by running a SQL Script to select name from the SysLogins table of the master db. Once you have it you will need to create the schema an grant rights to it. Assuming the service user is ABC123Login_myServiceUser, the script looks like this:

 create schema mySchema

 -- Grant specific access rights to use based on Schema
 GRANT 
    SELECT, INSERT, UPDATE, DELETE,
    ALTER, CONTROL,  EXECUTE,  
    REFERENCES, TAKE OWNERSHIP, VIEW DEFINITION 
 ON SCHEMA::[mySchema] 
    TO [abcdefghijLogin_democityUser]
 

When you publish the mobile service it will attempt to update the database using the schema provided. If there are error you can use the service’s logs to figure out what’s missing. By specifying the schema name instead of using the service’s name I’m able to deploy to multiple environments but integrate this data with my other applications.

Happy Coding! (originally posted on www.benkotips.com)

Xamarin.Forms is an attractive option when building cross platform apps, but for an old XAML developer like myself it can be a challenge to get the nuances of the grammar and syntax right. For Windows I’ve depended on tools like Blend and Visual Studio Intellisense to help me understand what’s possible. Moving to Xamarin XAML is sometimes tedious because while I can use the intellisense from the C# code behind file it’s not there yet in a designer. While there’s some posts out there that compare and contrast how to move to Xamarin XAML from Microsoft XAML (like this one from TCPWare by Nicolò Carandini), I still wasn’t finding what I was looking for. This post is an attempt to iterate thru some of the core proprties of interest for many of the controls I use, and to catalog them here for current and future reference.

1/3/2015 : Update, added more controls to list -

Technorati Tags: xamarin xaml cheat sheet

First some common properties – Some common properties to most controls include:

• x:Name : The control name that can be used to reference the control from code
• AnchorX, AnchorY : Positions control within the layout
• HeightRequest, WidthRequest : The requested size of the control if the layout allows
• MinimumHeightRequest, MinimumWidthRequest : The minimum size allowed
• HorizontalOptions, VerticalOptions : Layout options for the control, include values Start, End, Fill, Center, StartAndExpand, EndAndExpand, CenterAndExpand
• BackgroundColor : Color of background
• Rotation, RotationX, RotationY : Rotation properties for rendering control
• Scale : Scale value

Label - Displays text on a page.

• XAlign, YAlign : Text alignment property…values include TextAlignment.Start, TextAlignment.Center, TextAlignment.End
• TextColor : Color of text and background…can be named color
• Font : Attributes of the font, such as Bold, Italic, Large, Medium, Small, Micro, 
• LineBreakMode : Used to determine label’s text wrap properties. Values include CharacterWrap, NoWrap, WordWrap, HeadTruncation, MiddleTruncation, TailTruncation

TextCell - Displays text and detail subtext in a single control

• Text : The main text to display
• TextColor : Primary color of the text
• Detail : Subtext displayed below main text
• DetailColor : Color of secondary text

BoxView - Similar to Rectangle in Windows XAML. Used to display a box with some color on a page.

• Color : Color of box
• Opacity : Value of opacity…
• IsEnabled, IsFocused : properties of Box

Entry - Similar to TextBox in Windows XAML. Used to get input from user.

• TextColor : Color of text and background…can be named color
• IsEnabled, IsFocused, IsPassword, IsVisible : Values that drive entry behaviors
• InputTransparent : Determines whether to show input
• Keyboard : Type of keyboard to show, possible values include Chat, Default, Email, Numeric, Telephone, Text, Url
• Placeholder : Text to display when there is no value entered…displayed in grayed out mode
• Text : Value of control

Image - Display an image. Includes common properties and:

• Aspect : Scaling of image…stretch or fill. Values include Fill, AspectFill, AspectFit
• IsEnabled, IsFocused, IsLoading, IsOpaque, IsVisible : Drive behaviors of image control
• Source: This is where the image is sourced from…can be local resource or online.

ImageCell Displays an image and a TextCell

• ImageSource
• Text, TextColor
• Detail, DetailColor
• IsEnabled

Button - Used to trigger event processing in response to user’s actions

• BorderColor, BorderRadius, BorderWidth : Values to control the border of the button
• Command, CommandParameter : Values for the command to be executed when clicked
• Font : Attributes of the font
• IsEnabled, IsFocused, IsVisible : Values to drive button’s behaviors
• Text : Text on the button
• TextColor : Color of text on the button 

ActivityIndicator. An indicator that shows there is an action processing and the user needs to wait for it to complete

• Color : Color of the indicator
• IsEnabled, IsFocused, IsRunning IsVisible : Values to drive activity indicator’s behaviors

ProgressBar. Used to display how far along a process is

• IsEnabled, IsFocused, IsVisible : Values to drive the control’s behaviors
• Progress : Value to show completion…I think this is a value from 0.0 to 1.0

TimePicker. Used to select a time value

• Time : The time value of the control
• Format : Format to display, supports standard C# formats for DateTime (see http://www.csharp-examples.net/string-format-datetime/)

DatePicker. Similar to TimePicker, but used to select a date

• Date : The date value of the control
• Format : Format to display, using standard C# formats

Switch. Used to input whether a boolean property is true or false

• IsToggled, IsEnabled, IsVisible, IsFocused : Drive control’s behaviors

SwitchCell. Displays a label and a switch

• Text : The text of the label
• On : A boolean value of whether the switch is toggled
• Height : The height of the control

ViewCell. A basic layout control that displays an item in a data template. Does not have the basic properties.

• Height : Height of cell to display

StackLayout. Similar to a StackPanel in Windows XAML, used to display items in a stack. Has the common properties as well

• Padding : The area around the layout, displayed as an integer or series of values “left, top, right, bottom”… i.e. “20,0,0,0” means left margin of 20, zero on other sides
• Spacing : The area between items
• Orientation : Horizontal vs Vertical

Grid. Layout in Columns and Rows, using various spacing options, such as fixed, Auto and Star – *

• RowDefinitions, ColumnDefinitions : Same as Windows XAML
• RowSpacing, ColumnSpacing : distance between columns and rows, defaults to 6 px

ListView. Container for collections of items…

• ItemsSource : The data collection used to populate the list
• SelectedItem : If an item is selected in the list
• IsEnabled, IsGroupingEnabled, IsVisible : Drives list’s behaviors
• RowHeight : Height of item’s row
• HasUnevenRows : A flag that indicates row height varies
• Triggers : connects an item to a behavior
• ItemTemplate : Binding template for item’s display
• GroupHeaderTemplate : Binding template for list’s header

Happy Coding!

(originally posted on www.benkotips.com follow me on http://twitter.com/mbenko)

I'm creating a Xamarin.Forms project, using XAML for markup that includes an authentication page when the app starts. I am using a TabbedPage (also tried CarouselPage) as the container of my main UI and plan to have several pages displayed. The first page (myDashboard) checks to see if the user has authenticated and if not I want to display a modal login page. When they return I would like to load data based on their user id.

What's happening is that the Dashboard page loads and is immediately overlaid by the myLogin page, but then all the DisplayAlerts show in succession before I do anything. When I call PopModalAsync() on the login page the OnAppearing method doesn't continue, which indicates to me that the await call had no effect in interrupting the process flow, as if it's already completed the calls after the PushModalAsync() call. (I plan to remove the DisplayAlert calls when it's working as expected.)

My code looks like this...in the App class:

    var mainPage = new TabbedPage() { Children = { new myDashboard() } };
    return mainPage;
    

In the myDashboard() class:

    protected async override void OnAppearing()
   {
       base.OnAppearing();
       try
       {

           await DisplayAlert("Alert", "OnAppearing Start", "ok", null);

           if (App.context.IsLoggedIn == false)
           {
               await Navigation.PushModalAsync(new myLogin());

               if (App.context.IsLoggedIn == true)
               {
                   // await LoadData();
                   PageLabel.Text = "Hello " + App.context.UserInfo;
               }
           }

           await DisplayAlert("Alert", "OnAppearing LoggedIn", "ok", null);

           await LoadData();
           await DisplayAlert("Alert", "OnAppearing Complete", "ok", null);
       }
       catch (Exception ex)
       {
           var err = ex.Message;
       }
   }
   

What am I missing?

It appears that because this code is in the OnAppearing() event which is called during a Pop or a Push that the behavior isn’t what is expected. I found an approach in the Xamarin Forums which wires up an event to the login page to send an event and then subscribe to it from the caller (see how-to-navigate-between-contentpages). I removed the code in the OnAppearing event, reserving it for handling core initialization and if the user is logged in I’ll load the data. To implement this approach subscribe to the event in the constructor of your main page…

    public myDashboard()
    {
        InitializeComponent();
        MessagingCenter.Subscribe<myLogin>(this, "LoginComplete",(sender) => LoadData());
    }
    

Then in the login page add code to send the message right after calling PopModalAsync() to close the window.

    
    public async void OnButtonClicked(object sender, EventArgs e)
    {
        var rc = await DisplayAlert("Alert!", "Logged in as " + myPhone.Text, "Ok", "Cancel");
        if (rc == true)
        {
            App.context.IsLoggedIn = true;
            await Navigation.PopModalAsync();
            MessagingCenter.Send<myLogin>(this, "LoginComplete");
        }
    }
    

It works, but is there a better way?

Originally posted on: http://geekswithblogs.net/benko/archive/2014/12/03/how-to-detect-an-ios-device-when-working-with-xamarin.aspx

Xamarin + WAMS = Happiness (well, most of the time)

First some background…I spent the last couple months trying to figure out the best approach for cross-platform development stuff. After some research and working thru some POC’s with Apache Cordova, Native and Xamarin we decided to go down the path of Xamarin as the tool of choice. We did this for a few reasons, including that we can use C# for the code, that with Xamarin Forms it supports XAML as our markup which has a native backend for handling responsive design, and because we would like to have one set of code running across the different device platforms, and we can go deep on a platform to light up features as needed. For learning it there’s a nice set of xamples you can start from in GitHub that show working demo apps.

Secondly we’re using Azure Mobile Services (WAMS) with the .NET implementation so we can customize the authentication process to suit our needs (more on that in another post). The Node.js implementation is fast, but it has its limitations when we have multiple environments, need to work with specific 3rd party libraries, and we wanted to be able to debug completely offline. The new generation of WAMS with .NET does this by providing a WebAPI style implementation that lets me run the service locally and have complete control. All is good.

To build for iOS the configuration requires not just Xamarin but also a mac build machine. I went to Best Buy and found a reasonably inexpensive mini device, and with some cable magic I can connect it to a spare monitor and set it up. It takes a bit of configuration and creation of accounts with Apple to get it working as a dev machine, including registering with the developer program and getting a certificate to build with. The documentation on Xamarin’s site is pretty good on this.

All is good, and I’m able to build out the examples and deploy to my Windows Phone and Android devices, but when I try to detect an iPad (attached to my mac-mini build machine) it says no devices are attached.  When I click the drop down list of debug devices it shows the iOS simulator options. I don’t see the iOS device I have attached to my build machine! What to do?

Searching the issue finds some ideas, but after an hour or so of restarting Visual Studio, the mac, and reconnecting the build host and then restarting Visual Studio I find that sometimes it sees my device but then quickly switches to the simulator as the only options to test on. I prefer to run on real devices (a result of attempting to use the Android simulators and waiting in vain for them to start), and also I don’t have the monitor hooked up to the mac except when I turn it on to log in. I found this Stack Overflow post which further down had a nugget of info that solved my problem.

In a multi-project solution in Visual Studio the place to look is the configuration manager. Right click on the solution and open it up. Change the iOS project from iPhoneSimulator to iPhone and Bang! your issue is solved.

Now when I look at my targets for the iOS project it shows my device.

All is good. Happy Coding!