Corrado's Blog 2.0

Online thoughts of a technology funatic

Add “intellisense” to Xamarin .axml files

When you manually edit .axml files inside Visual Studio 2013 you don’t have any minimal intellisense support, and, as Visual Studio user, you know how frustrating is typing without any kind of help.

image

Since editing the same file using the XML editors brings you a ‘partial’ intellisense i tried to find what was the difference and finally found how to enable it also inside Android designer source view.

  1. 1-With Designer in source view, select Visual Studio’s xml menu and then Schemas…
  2. image
  3. 2-Navigate to C:\Program Files (x86)\MSBuild\Xamarin\Android and select android-layout-xml.xsd file.
  4. 3-Click Ok to confirm and dismiss the dialog.
  5. Here’s what you now get when typing android: in source view:
  6. image
  7. Of course, this is not the same experience we have in XAML, but better than nothing.
  8. After adding the schema, the first time you add a new Android layout Visual Studio asks you to trust a new file, just select Trust and everything will work as usual in future.
  9. Enjoy!

Scroll with snapping in Windows Phone 8

I’m working on a Windows Phone 8 app that has an “unconventional” UI as it does not follow Windows Phone UX guidelines (it’s a company private app) and so it has home page made up of several screens horizontally aligned that user can pan.

Untitled

I started wrapping the screens inside a horizontally oriented WrapPanel and content, as expected, scrolled.
Mission accomplished? well not really: Content was scrolling but final experience was poor because of missing snapping feature, it was extremely easy lo leave home page with more than one screen visible.

image

To overcome this issue I decides to create a Blend Behavior that attached to a ScrollViewer would take care of smoothly bring into view the correct screen depending on scroll direction.
Solution wasn’t as immediate as previous one since I decided to use an ItemsControl as ScrollViewer’s content since I have the same requirements in other views where content is databound and I had to “dig into” ScrollViewer and attach to both horizontal and vertical scrollbars (yes, I need to support both scrolling direction) but at the end it worked.

Yeah! but, there’s another UX issue: ScrollViewer has the ‘compression’ feature, the one often used to create the famous “Pull to refresh” functionality in lists. Since final experience was not acceptable and since I haven’t found a reliable way of disabling it I abandoned this 2nd solution and decided to go handling all scrolling details.

Enter the SnappingScrollViewer

I won’t bother you with a long code listing (you can get the source code here) but what I did basically was:

  1. -Create a class that inherits from Canvas
  2. -Register Canvas Manipulation events
  3. -Use ManipulationMode.Delta event to set Canvas left/top offset to scroll content
  4. -Use ManipulationMode.Completed event to detect current scrolling position and scroll the screen to proper position using an animation.

Since animation target requires a dependency property and my class is based on Canvas SetLeft/SetTop method I used an old XAML trick adding a custom ScrollOffset dependency property and invoking proper method inside property’s changed event:

protected virtual void OnScrollOffsetChanged(double oldValue, double newValue)
        {
            if (this.IsVertical)
            {
                SetTop(this.content, newValue);
            }
            else
            {
                SetLeft(this.content, newValue);
            }
        }

content is ScrollViewer’s ItemsControl that I get into Loaded event.

private void OnLoaded(object sender, RoutedEventArgs e)
        {
            this.content = (ItemsControl)this.Children.First();
            this.totalPages = (int)(this.IsVertical ? (this.content.ActualHeight / this.ItemSize) : (this.content.ActualWidth / this.ItemSize));
            this.snapAmount = this.ItemSize * this.Inertia;
            this.itemIndex = this.InitialIndex;
            if (this.IsVertical)
            {
                SetTop(this.content, -this.InitialIndex * this.ItemSize);
            }
            else
            {
                SetLeft(this.content, -this.InitialIndex * this.ItemSize);
            }
        }

Use is very simple:

<smoothScroller:SnappingScrollViewer x:Name="LayoutRoot"
                                   ItemSize="480"
                                   InitialIndex="2"
                                   IsVertical="False"
                                   Background="White">
        <ItemsControl Background="#FFE01818">
            <ListBoxItem>
                <Grid Background="Aqua"
                      Width="480"
                      Height="800" />
            </ListBoxItem>
            <ListBoxItem>
                <Grid Background="YellowGreen"
                      Width="480"
                      Height="800" />
            </ListBoxItem>

            <ListBoxItem>
                <Grid Background="Orange"
                      Width="480"
                      Height="800" />
            </ListBoxItem>
            <ListBoxItem>
                <Grid Background="Red"
                      Width="480"
                      Height="800" />
            </ListBoxItem>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
    </smoothScroller:SnappingScrollViewer>

Limitations in sample code: All content must have the same dimension and no support of dynamically added items (did that in production code but wanted to keep demo simple Smile)

Go grab the code and enhance it depending on your needs.

Note for Windows Phone 8.1: ScrollViewer in Windows Phone 8.1 has a HorizontalSnapPointType property that can be used to “snap” content, so this XAML will work as expected

<ScrollViewer HorizontalScrollMode="Enabled"
                      HorizontalScrollBarVisibility="Visible"
                      HorizontalSnapPointsType="Mandatory">
            <StackPanel Orientation="Horizontal">
                <Grid Height="800"
                      Background="#FF1EAA4B"
                      Width="480" />
                <Grid Height="800"
                      Background="#FFDAB611"
                      Width="480" />
                <Grid Height="800"
                      Background="#FF9C0EC5"
                      Width="480" />
            </StackPanel>
        </ScrollViewer>

Unfortunately Compression effect is still present Sad smile if anyone knows how to disable it just let me know, I’m more than interested.

Enjoy!

 

Xamarin: Infinite scrolling list in iOS app

I’ve spend the last few weeks studying Xamarin, not because I’m considering abandoning the Windows platform but because I think it’s clear that, as developer, we need to take note that there are other big platforms with which it is right to live with.

While not yet mature and in some cases quite cumbersome, my experience with it was highly positive and I absolutely recommend it in case you need to create Android and/or iOS applications.

This post comes from a need I had during development of a iOS application: Create an infinite scrolling list of data starting from paged data coming from a REST service.

Note: I’m a Xamarin beginner so this might not be the perfect solution, but it worked fine in my case.

To get infinite scrolling I created a custom UITableSource

public class BookedCarsTableViewSource : UITableViewSource
    {
        private readonly DataService dataService;
        private readonly PagedResult<BookedCarResponse> firstPage;
        private readonly List<BookedCarResponse> bookedCars;
        private int pageIndex;
        private bool isFetching;

        private const string cellId = "bookedCarCell";

        public BookedCarsTableViewSource(DataService dataService, PagedResult<BookedCarResponse> firstPage)
        {
            this.dataService = dataService;
            this.firstPage = firstPage;
            this.bookedCars = firstPage.Result.ToList();
            this.pageIndex = 0;
        }

        public override int RowsInSection(UITableView tableview, int section)
        {
            return (int)Math.Max(this.bookedCars.Count, this.firstPage.TotalCount);
        }

        public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath)
        {
            int index = indexPath.Row;
            UITableViewCell cell = tableView.DequeueReusableCell(cellId) ?? new UITableViewCell(UITableViewCellStyle.Subtitle, cellId);
            BookedCarResponse bookedCar = this.bookedCars[index];
            cell.TextLabel.Text = bookedCar.CarPlate;
            cell.DetailTextLabel.Text = bookedCar.CompanyName;            
            if (!this.isFetching && this.pageIndex < this.firstPage.TotalPages && index > this.bookedCars.Count * 0.8)
            {
                this.isFetching = true;
                Task.Factory.StartNew(this.LoadMore);
            }

            return cell;
        }

        private async void LoadMore()
        {
            this.pageIndex++;
            var nextPage = await this.dataService.GetBookedCars(this.pageIndex, this.firstPage.PageSize);
            this.bookedCars.AddRange(nextPage.Result);
            this.isFetching = false;
        }
    }

As you see the trick is inside GetCell, when requested index is near the end of currently available items I spin a new request and add results to bookedCars collection.

In order to get initial block of items I used this code inside related controller:

public class BookedCarsScreenController : UITableViewController
    {
        private PagedResult<BookedCarResponse> firstPage;

        public override async void ViewDidLoad()
        {
            base.ViewDidLoad();
            this.firstPage = await DataManager.Current.GetBookedCars(0, 30);
            this.TableView.Source = new BookedCarsTableViewSource(DataManager.Current, firstPage);
            this.TableView.ReloadData();
        }
    }

I had to invoke TableView’s ReloadData otherwise list was appearing initially empty.

Note that since I’m using Subtitle layout I didn’t find the way to use  iOS 6 automatic cell reuse mode.

Hope it helps! Smile

Windows 8: Is app running inside Visual Studio?

Sometimes you need to run some additional debugging code when your app is launched from a development environment (e.g from Visual Studio), of course there are compiler directives for this but I’ve found a property inside WinRT that can make this even easier.

bool isInsideVs = Windows.ApplicationModel.Package.Current.IsDevelopmentMode;

please note that property indicates Development mode, this means that it will probably check whether app is running from \Program Files\WindowsApps folder so if you launch the just compiled app from Start menu on same machine it will still returns true.

Try to sideload the app and in this case it will have the value false.

 

The tale of a GridViewItem customization

Once upon a time, in a galaxy not so far away, there was a guy (me Smile) who was working on a Windows Store 8.1 application and was asked to create a GridView whose items should look like this picture:

image

The guy (again, me) thought: What’s the problem, did it many times! and he started setting a data source:

public class Item
    {
        public string Text { get; set; }
    }

    public class DemoViewModel
    {
        public DemoViewModel()
        {
            this.Items = new List<Item>();
            for (int i = 0; i < 10; i++)
            {
                this.Items.Add(new Item() { Text = "Item " + i });
            }
        }

        public IList<Item> Items { get; set; }
    }

He then added a GridView to a page, bound the data source and created a simple ItemTemplate:

<Page x:Class="GridViewDemo.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:GridViewDemo"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d">
    <Page.Resources>
        <local:DemoViewModel x:Key="vm"></local:DemoViewModel>
        <DataTemplate x:Key="MyItemTemplate">
            <Grid Width="100"
                  Height="60">
                <TextBlock HorizontalAlignment="Center"
                           TextWrapping="Wrap"
                           Text="{Binding Text}"
                           VerticalAlignment="Center" />
            </Grid>
        </DataTemplate>
        
    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
          DataContext="{StaticResource vm}">
        <GridView ItemsSource="{Binding Items}"
                  ItemTemplate="{StaticResource MyItemTemplate}"
                   />
    </Grid>
</Page>

Run the solution and he got something quite close to what he was asked to realize:

image

Ok, just a couple of customizations and we’re done, he thought…

Let’s start with the selected background: The guy knows that background brush is managed inside ItemContainerStyle so he fired up Blend 2013, edited GridView’s ItemContainerStyle and here’s what he got:

image

Just a simple GridViewItemPresenter that has a series of Brush properties that give you the opportunity to customize several container aspects

image

In his case he needed to customize the color of SelectedBackground so, since it is bound to a resource named ListViewItemSelectedBackgroundThemeBrush he added a Brush resource with the same name inside Page resources and selected state was done, here’s updated result:

<SolidColorBrush x:Key="ListViewItemSelectedBackgroundThemeBrush"
                         Color="Orange"></SolidColorBrush>

image

But a question started to rise in his mind: “How to i set default (gray) background color?” there’s no Background color exposed by GridViewItemPresenter nor he can set it inside ItemTemplate otherwise it wouldn’t change when item is selected.

He tried lookind inside MSDN docs hoping to find a brush key that controls item default background but he had no luck Sad smile and navigated a lot the Internet until he realized he did something similar in the past for a Windows 8.0 application.

He then opened that old source code and discovered what has changed: The GridViewItemPresenter has been introduced in Windows 8.1, here’s how ItemContainerStyle looks in Windows 8.0:

image

Since you have access to all the elements composing the GridViewItem what the guy did was copying the style into Windows 8.1 app and edited VisualStateManager states (I’m sure, dear reader, you know how to do that…)

So, here’s final result:

image

The guy secretly told me that he wasn’t happy for such solution, probably GridViewItemPresenter has been introduced to improve GridView’s performances but he found no other easier way to solve the puzzle.

Based on a true story… Smile

PS: In case you need Windows 8.0 GridView’s ItemContainerStyle you can get it here.

Debug design time issues in Blend 2013

In 2010 (wow! that’s a long time ago…) I blogged about how to debug Blend design time exceptions, since then things have changed, Blend and Visual studio designer merged and so the XAML designer is now hosted in a separate process named XDesProc.exe (at least in Windows Store applications)

Laurent Bugnion has a detailed blog post about how to attach Visual Studio debugger to Blend to debug a Windows Store application at design time so i won’t repeat it here, the reason of this post is to integrate it with another step required when you use Visual Studio 2013 and Blend 2013.

Since with latest release PDB are no longer copied to cache location used by designer your simbols won’t be loaded and your attach procedure won’t work.

The solution is very easy, just point the debugger symbols to the proper PDB files of your application and everything will work as expected.

To point the PDBs just use: Tools –> Options-> Debugger

image

Then add the folder where your app’s PDB file resides.

Acronis True Image 2014 test drive

As a longtime Acronis user it just took me a second to accept the invite to test the 2014 release of True Image backup software.

For those who don’t know it True Image is a backup software solution that you can use to safely backup your files or entire partitions both locally or, with recent releases, also online using Acronis Cloud (5GB included with the product, other plans available)

While Windows includes it’s own backup solution, i can’t even compare it with the flexibility i get from True Image, using incremental backups i can backup my machine in about 5 minutes after initial full backup which takes indeed more than one hour (but i do it about every two months…)

I have lost the count of how many times this software saved my day, last was about two months ago, and each time i do some “risky” installation, a quick backup with True Image is the rule now, consider me “over conservative” but wasting time re-installing stuff because of a failure its something i hate doing and believe me or not, i rarely repave my machine.

About my experience with True Image 2014: I was running 2013 version and I run the setup without removing the previous version, setup properly took care of update without any problem, old backups configuration have been maintained and i backed up my machine in quite about the same “canonical” 5/8 minutes. Just to test compatibility i tried to open previous backups from True Image 2014 and everything went smooth.

Each time i install a new version i always update the USB key i use to boot my machine in case of a full restore, just in case.

Apart some UI changes which tend to keep the program “as easy as possible” relegating advanced features as “options”

image

i haven’t seen big differences compared to 2013 version, probably new features are on Cloud backup that i don’t use due to my poor upload bandwidth that it will take me days to backup and entire partition online.

I’ll keep using version 2014 in forthcoming months as my backup solution and rest assured I’ll keep you informed if something fails (which i really hope won’t happen and I have no reason to think it should indeed…)

Did i ever said that i also clone my machine into VHDs that i can later boot each time i need to install alpha/beta or stuff that will deliberately compromise your Windows installation using Backup Conversion tool? (love it!)

image

If you’re looking for a compete backup solution that’s fast, realiable and (why not?) cheap I always recommend, and I’ll keep recommending, Acronis product. I know that there are many alternatives out there but when i was in pain with a non booting machine, Acronis always saved me, and that’s what I finally need from a software like that.

Blend can’t locate types in external assemblies

While developing a Windows Store app I run into a Blend issue that caused me some headache.

I tend to define common converters in external assemblies in order to reuse them in other projects, so i added a reference to a Windows Store library project containing the converters I needed then swiched to Blend to use them from Create DataBinding dialog, and here’s what i got:

image

Problem: My library was not listed.

Really weird since here’s what I got doing the same from Visual Studio 2012

image

My MvvmHelper library is listed. Confused smile

Using Visual Studio to add the assembly resulted in following Blend error:

image

Ok, i presume you probably want to know the reason (and how to fix it): The problem was caused by projects having different build configurations: that main project has a X86 configuration (required by Bing Maps component) while all referenced libraries where AnyCPU and looks like that Blend 2012 doesn’t like it.

Moving the entire solution to X86 solved the issue.

Blend team is working on having it fixed before Blend 2013 release.

Happy Blending!

Note: Many thanks to @unni for helping me on this.

Typescript Succinctly book review

Javascript has a sort of love-hate relationship with developers, everyone use it but no one, or I’d better say, “a few”, really love it.

Reason of this, comes from the fact that is a ‘scripting’ language, thus incomplete when compared with other languages like C# (no complete support for OOP concepts, partial type system) and from a characteritic tha represents one of its strength: being a dynamic language thus not allowing development tools like Visual Studio to provide compile time checking and full intellisense support (while getting better with each release)

You can imagine how happy I was when i first knew that Microsoft was working on fixing these language “weakness” with a new superset language called TypeScript that, not only add constructs like Class, Modules, Types with compile time checking but it also made it 100% compatible with existing Javascript using a process known as “Transpiling” a sort of code transformation, this means that what you get at the end is pure Javascript.

TypeScript-Succinctly

While C# is still my primary language I was really curious since it could alleviate my pain when moving from C# to Javascript programming, that’s why during the weekend I enjoyed reading “Typescript Succinctly” by Steve Fenton, a 82 page long Ebook part of a larger family of free ebooks that Syncfusion published online.

The book doesn’t pretend to make you a TypeScript guru but its a great introduction if you want seriously mastering it, it starts from what happens under the hood: how code is transformed into pure ECMASCRIPT compatible javascript and vice versa to how to start writing some code in Visual Studio after installing the required extension.

Chapter 3 is dedicate to language core concept like Types, Modules, Interfaces, Classes and so on while next introduces more advanced concepts like Module organization, scope, inheritance etc.

Following chapter goes more practical describing how to interact with existing Javascript code and how to apply Uniit tests to TypeScript projects.

Recent Generics addition is not covered, probably because book went out before TypeScript team released them.

I really enjoyed this ebook, reading goes fast and smooth and it uses a pratical approach, something not always true in language related books,  i got what expected: a broader view of what TypeScript is and how to begin using it.

Get the book for free here: TypeScript Succinctly or get browse the entire library here.

The remote procedure call failed. Exception from HRESULT: 0x800706BE issue in Windows Store apps

There are days where technology seems to be against you, yesterday was one of those.

It all started in the morning when I inadvertently pressed the sleep button on my Logitec keyboard and my notebook gone into sleep mode, something i do often indeed, but this time it was different because at resume all i got was a black screen. Since this happened a couple of times in the past I switched it off hoping to solve it soon, but after machine boot the black screen was still there. A voice inside of me started saying “is gonna be a hard day…”, so i started, without much faith honestly the: boot, safe mode, repair, try restore point ritual but, as always happened in my personal experience, without luck.

Since I really hate repaving my work machine, I’m a bit paranoid with backups: I do backup at least once/twice a week and before any important update. so I inserted the USB recovery key of my favorite’s backup tool: Acronis True Image and started a sector-by-sector restore of July 28th backup.

After a while my notebook was brought back to life, and nobody will ever know what happened on this bright July 30th morning, but who cares, it’s time to go back coding…

Since I’m working on a Windows Store app that interacts with Facebook I started digging into Facebook SDK documentation and in short time I wrote a test app that logins and retrieves user profile.

Time to test the code: I lanched the app, the login dialog appeared and successfully logged in, but, wait, there’s a an issue: the breakpoint I added to read the returned token didn’t fired and application seems never returning from Login method.

Ok, let’s find what’s wrong but starting from Facebook developer registration down to code everything looks fine.

Let’s try an old sample I wrote in the past I know was ok: same problem.

Let’s use WebAuthenticationBroker sample from Developer portal, it must work!: well it wasn’t.

Since I lost any idea I asked my friend @CristianCivera some hints and you can image my face when after some pair debugging he told me: “Know what? the sample works on my machine

Below my face as soon as I read the message:

Also my friend @imperugo confirmed: The only machine on earth where the WebAuthenticationBroker.AuthenicateAsync() method was not returning was mine…

Just to be 100% sure I started a remote debugging session with my tablet and everything was working as expected.

I started to getting nervous since I had no idead why that call wasn’t working on my PC.

While trying to find a solution i thought: And if problem isn’t in just WebAuthenticationBroker but in all async methods? So I opened the FilePicker example from Windows Store dev portal, launched it and put a breakpoint on yellow line:

image

Result: I can select the file, breakpoint doesn’t fire anyway,  but now Visual Studio reports an exception:

The remote procedure call failed. (Exception from HRESULT: 0x800706BE)"}

a search on Interned pointed me to several possible solutions but none was the right one, looks like async call for unknown reason never returns, even launching the standalone app..

I started realizing that can’t work on any Windows Store app until I get this fixed and wondered: Why didn’t got into this before?, I spend the day between async/await and breapoints always worked.

Tried another Windows Store app that uses async/await and breakpoints worked, so why some async calls raise the exception and others don’t?

After long thinking I realized that both OpenPicker.PickSingleFileAsync() and WebAuthenticationBroker.LoginAsync() deal with UI, former opens file selection while latter displays a dialog, so I started thinking about graphic drivers (don’t ask me why, maybe someone took pity on me…) so I updated my NVidia driver and restarted.

No way, problem still there…

Before starting to tear my hair (and remind me that I do not have…) i remembered that I also have a USB video driver that controls my 3rd monitor: A quick check and saw that it driver was outdated, so i installed the recent one. Rebooted the machine launched the sample and…

YESSSSSS!!! The problem gone! probably something in the driver was conflicting with WinRT causing the exception thus preventing the call to return.

To recap this long post: If your async calls seems not to return and you get weird: The remote procedure call failed. (Exception from HRESULT: 0x800706BE)" message: check your video drivers.

If all this sound unbeliveable, you’re right, IT IS! (while true…)

Hope this will save you working hours (and hairs) in future.

Older Posts »