Corrado's Blog 2.0

Online thoughts of a technology funatic

XAML relative binding trick

MVVM newcomers find creating a UI like this (a simple ListView containing a button that removes current row) quite intricated.

image

This because, while you can add a command to the item bound to each row, it’s more convenient to have a common DeleteCommand on parent ViewModel that accepts the Item to remove from the collection feeding the list.

Here’s our ViewModel:

public class MyViewModel { private RelayCommand<ReportUnit> deleteCommand; public MyViewModel() { this.Items = new ObservableCollection<ReportUnit>(); for (int i = 0; i < 10; i++) { this.Items.Add(new ReportUnit() { Name = $"Item {i}" }); } } public RelayCommand<ReportUnit> DeleteCommand { get { return this.deleteCommand ?? (this.deleteCommand = new RelayCommand<ReportUnit>((o) => { this.Items.Remove(o); })); } } public ObservableCollection<ReportUnit> Items { get; private set; } } public class ReportUnit { public string Name { get; set; } }

And here’s the page XAML:

<Page x:Class="DemoBinding.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Page.Resources> <Style x:Key="ListItemContainerStyle" TargetType="ListViewItem"> <Setter Property="HorizontalContentAlignment" Value="Stretch" /> </Style> </Page.Resources> <Grid x:Name="RootGrid"> <ListView ItemsSource="{Binding Items}" ItemTemplate="{StaticResource MyItemTemplate}" ItemContainerStyle="{StaticResource ListItemContainerStyle}"> </ListView> </Grid> </Page>

The “magic” is of course inside MyItemTemplate:

<DataTemplate x:Key="MyItemTemplate"> <Grid d:DesignWidth="568.775" Height="80" d:DesignHeight="100"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="100" /> </Grid.ColumnDefinitions> <TextBlock TextWrapping="Wrap" Text="{Binding Name}" VerticalAlignment="Center" FontSize="26.667" /> <Button Grid.Column="1" Content="Delete" HorizontalAlignment="Stretch" Command="{Binding DataContext.DeleteCommand, ElementName=RootGrid}" CommandParameter="{Binding}" VerticalAlignment="Stretch" Margin="5" /> </Grid> </DataTemplate>

As you see, the  button ‘steal’ the DataContext of RootGrid element and invokes MyViewModel’s DeleteCommand while passing its own DataContext as CommandParameter.

Simple and clean. Smile

Use IDEA IDE for Android UI design with Visual Studio and Xamarin

While Xamarin did a monster job integrating Android and iOS designers in both Visual Studio and Xamarin Studio as soon as your project becomes larger you’ll soon hit their limitations, that why many pro developers end up using native designers for UI design. This post is about how to use IntelliJ IDEA based IDEs for Android UI design together with Visual Studio, following the same approach we use with Blend for Windows development.

Step 1: install your favorite IDE: Android Studio or IntelliJ IDEA (they’re practically the same since Android Studio is based on IntelliJ IDEA)

Step 2: Install XamarIdea extension for Visual Studio, this extension, recently updated for Visual Studio 2015, will make integration between the two IDEs a lot faster, thanks to Egor Bogatov (@EgorBo) for sharing.
No idea if something similar exists for Xamarin Studio (sorry, I’m not an pro Xamarin Studio user)

Step 3: Create a new blank Android app using Visual Studio

image

and wait until initial project skeleton creation process ends.

Step 4: Right-click the Main.axml file inside Resources\layout folder and you should see a new option: Open in IDEA/Android Studio

image

click it and you’ll get an initial configuration dialog that should point to IDEA/Android Studio path, if not select it manually, together with other plugin options

image

click Ok, and you’ll see a warning dialog saying that your project needs some modifications:

image

These modifications are necessary since Android layout files use a different extension (.xml) and project structure is slightly different than Xamarin Android apps, just say yes; unfortunately these changes will prevent you to use the integrated Xamarin Android designer further unless you rename the layout file back to .axml. Click Yes, and you’ll get a final dialog reminding you to recompile your project inside Android IDE and that plugin options are available under Visual Studio’s Tools menu:

image

Step 5: Switch to IDEA IDE and, for sure, rebuild the project

image

On the left you’ll see the project structure, under app node expand the Resources folder and you’ll see the familiar Android folder structure together with your renamed main.xml file.

image

Double click it to open the designer.

image

I won’t go into design detail since there are lots of demo tutorials on JetBrains’s site, just want you to see some of the plus of IDEA and why it is more productive than Visual Studio’s integrated editor/designer.

Step 5: Design

-Select and delete the autogenerated button from design surface.
-Let’s change root LinearLayout to a RelativeLayout using the Component tree window in the upper right corner.

image

-Drag a Plain Text to design surface until top tooltip shows CenterVertical/CenterHorizontal

image

-Set layout_width to match_parent using Properties window (hint: if you need to search for a property just start typing to select matching properties Smile)

-Let use xml editor to add left and right margins: Switch to text, select the EditText and start typing: ma, YES! full intellisense to the rescue!

image

-Do you want to create a style that you can reuse with others EditTexts? just right click the edit text and use Refactor –> Extract Style menu

image

Select the properties you want to export (this dialog will look familiar to Reshaper users) and click OK

image

the layout xml has been changed to:

<EditText android:id="@+id/editText" style="@style/MyEditTextStyle"/>

and a styles.xml file has been created for you under values folder:

image

Of course you can edit the styles.xml file with full intellisense / editors support

image

Step 6-Back to Visual Studio

Save the project and switch back to Visual Studio, your main.xml file is automatically updated, but unfortunately the new files that have been added to the project, like styles.xml in our demo, must be added manually to the project.

Add styles.xml under values folder, compile and continue developing your app using Visual Studio.

Closing:

I’ve just scratched the surface of IDEA design productivity features, I encourage you to give it a try, I’m sure you’ll love it.

Have fun exploring!

PS: Did I tell you that IDEA renders AppCompat’s widgets instead of a boring dark gray box? Winking smile

Fixing SDWebImage issue on Xamarin.iOS

Loading an image into an ImageView control using Xamarin.iOS is a straightforward process:

  • Add a ImageView to a ViewController and give it a name (e.g: MyImage)
  • Add an image to Resources folder (e.g Users.png) and be sure that related Build Action is set to BundleResource.
  • And add this code:
        public override async void ViewDidLoad() { base.ViewDidLoad(); MyImage.Image=UIImage.FromBundle("Users.png"); }

      And you’re done, as alternative you can also use UIImage.FromFile, in this case the call is asynchronous and doesn’t use caching, while former is synchronous and does caching.

      Ok, but what if I want to show an image from a web url? things gets more complicated since you have to do the entire downloading process manually, something like:

      public async Task<UIImage> FromUrl(string imageUrl) { var httpClient = new HttpClient(); var contents = await httpClient.GetByteArrayAsync(imageUrl); return UIImage.LoadFromData(NSData.FromArray(contents)); }

      And use it this way:

      MyImage.Image = await this.FromUrl("http://thechromenews.com/wp-content/uploads/2015/11/Apple-Logo-4.png");

      Cool, but what if I want to use caching, show a placeholder or fire some code when downloading completes? well, that’s more code to write and since this is a quite common task you’ll be happy to know that there’s a component that does that for you.

      Look for SDWebImage on Xamarin Component Store and add it to your project:

      image

      Doing that adds to ImageView control a SetImage extension method that accepts a Uri and does all the work for you, usage is very easy, just write something like:

      NSUrl url=new NSUrl("http://thechromenews.com/wp-content/uploads/2015/11/Apple-Logo-4.png"); MyImage.SetImage(url,null,null);

      If you try this code you’ll discover that it doesn’t work, why? is the component buggy? well no, if you try it on older iOS versions it works fine.

      Also this quite common alternative raises an exception on iOS 9.x

      private UIImage FromUri(string uri) { using (var url = new NSUrl(uri)) using (var data = NSData.FromUrl(url)) return UIImage.LoadFromData(data); }

      Ok, so what is the problem? well Apple decided that starting from iOS 9.0 all communications must use ATS (app transport security) and if you want to change this behavior you have to add an entry into info.plist file.

      This blog post describes ATS in detail and I encourage you to read it: http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/

      To cut a long story short: Add this entry to your info.plist

      <key>NSAppTransportSecurity</key> <dict> <key>NSAllowsArbitraryLoads</key> <true/> </dict>

      And everything will work as expected. Smile

      HTH

      Change ListView RowHeight programmatically in Xamarin Android

      Here’s a quick code snippet that allows you to change the row height of an Android ListView in Xamarin

      public override View GetView(int position, View convertView, ViewGroup parent) { View view = convertView ?? this.context.LayoutInflater.Inflate(Android.Resource.Layout.ActivityListItem, null); if (view.LayoutParameters == null) { view.LayoutParameters = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MatchParent, 300); } else { view.LayoutParameters.Height = 300; } ...other code here... return view; }

      Code resides inside ListView adapter, as you see, the magic is acting on view LayoutParameters property.

      Hope it helps.

      Genymotion issue with Windows 10 10586

      I use Genymotion for my Xamarin Android development, I know that both Xamarin and Microsoft provide their own emulator but, for my machine configuration Genymotion is the one I like most at the moment.

      This post is to help you find a solution in case the virtual device doesn’t boot on a machine after the upgrade to TH2 aka build 10586, with this message:

      image

      obviously the message is meaningless, digging into device log file located at %LocalAppData%\Genymobile\Genymotion\deployed\  I’ve discovered that error depends on a network issue:

      0:00:01.362237 VMSetError: Failed to open/create the internal network ‘HostInterfaceNetworking-VirtualBox Host-Only Ethernet Adapter #4′

      After doing several test and internet search I finally found the reason of the problem: no idea why but an option in the adapter settings was not selected:

      image

      The option is: VirtualBox NDIS6 Bridged Networking adapter, if not selected, select it and try again, your emulator should now work (or at least, it worked for me)

      works-on-my-machine-starburst

       

      Hope it works for you too, otherwise good luck finding the solution, if you find it please share, Genymotion support for free licenses is far than optimal.

      Dynamic localization of Windows Store apps

      Localizing a Windows Store app is a fairly easy task thanks to the x:UId attribute introduced with WinRT.
      If you need to create a Multilanguage application just add to your Visual Studio solution a folder named Strings and below it add a folder for each language you want to support using the two letter ISO language as name.
      In this picture I have a solution that support Italian and American English

      image

      Inside each folder I’ve added a resource file and note that there’s a Resource.resw file just below Strings folder, it represent the default fallback resource language file that will be used in case your app will be executed on a system whose language is different than America English or Italian.

      Inside each Resource.resw add the property of the control to localize, in our case we want to localize the Text property of a TextBlock, so the file content for each will be:

      en-US folder

      image

      it-IT folder

      image

      Now to localize the Text property of our TextBlock all we need to to is use this XAML:

      1 <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 2 <TextBlock x:Uid="WelcomeMessage" 3 VerticalAlignment="Center" 4 Foreground="BlueViolet" 5 Text="..." 6 HorizontalAlignment="Center" 7 FontSize="48" /> 8 </Grid>

      Here’s what you’ll see when the code is executed on an Italian pc:

      image

      Very easy isn’t it? Smile

      This approach let you do more than just localize Text, if you want to dig more into it you can read this article

      Ok, but imagine you have this mandatory requests:

      • 1-Application language can be unrelated to machine language (French app running on an Italian machine)

      2-Language switching should not require an application reboot

      3-You must use a MVVM friendly solution

      Ok, things can get a little more intricate here  and since I haven’t found a standard solution I solved this way:

      Step 1: Since we’ll deal with text only let’s rename resources inside .resw files from WelcomeMessage.Text to just WelcomeMessage (see below)

      image

      Step 2: Let’s create a ViewModel (yes, MVVM always requires a ViewModel…) and let’s add the necessary code to load the strings dynamically:

      1 public class MyViewModel : INotifyPropertyChanged 2 { 3 private ResourceContext resoureContext; 4 5 public MyViewModel(string language) 6 { 7 this.UpdateCulture(language); 8 } 9 10 public void UpdateCulture(string language) 11 { 12 this.resoureContext = ResourceContext.GetForCurrentView(); 13 this.resoureContext.Languages = new List<string> { language }; 14 } 15 16 public string GetResource(string stringResource) 17 { 18 try 19 { 20 var resourceStringMap = ResourceManager.Current.MainResourceMap.GetSubtree("Resources"); 21 return resourceStringMap.GetValue(stringResource, this.resoureContext).ValueAsString; 22 } 23 catch (Exception ex) 24 { 25 return $"?{stringResource}?"; 26 } 27 } 28 29 ... 30 }

      The magic here is inside UpdateCulture and GetResource methods, if we name the TextBlock in previous XAML snippet MyTextBlock we can dynamically change its text using this code:

      1 public sealed partial class MainPage : Page 2 { 3 public MainPage() 4 { 5 this.InitializeComponent(); 6 this.MyTextBlock.Text = new MyViewModel("it-IT").GetResource("WelcomeMessage"); 7 8 } 9 }

      But since we’re using MVVM we want to use databinding for that instead of code and we need a smart solution otherwise localization can become tedious, solution is not very far: just use an indexer:

      Just add this line of code to the ViewModel

      1 public string this[string key] => this.ApplicationController.GetResource(key);

      And let’s inform binding that our indexer property need to be refreshed so that all texts will be reloaded when user changes the UI language at runtime modifying the UpdateCulture method this way:

      1 public void UpdateCulture(string language) 2 { 3 this.resoureContext = ResourceContext.GetForCurrentView(); 4 this.resoureContext.Languages = new List<string> { language }; 5 this.OnPropertyChanged("Item[]"); 6 }

      Note the trick of using “Item[]” as property name to signal that the class indexer has changed.

      So let’s bind TextBlock’s Text property to viewmodel indexer using this syntax, and you’re done.

      1 <TextBlock x:Name="MyTextBlock" 2 VerticalAlignment="Center" 3 Foreground="BlueViolet" 4 Text="{Binding [WelcomeMessage]}" 5 HorizontalAlignment="Center" 6 FontSize="48" />

      You can find a complete example here.

      Have fun!

      Blend 2015: Cannot add additional fields to a type… error

      Yesterday repaved my machine and installed Windows 10 and Visual Studio 2015, I then loaded one of the projects I’m working on and I’ve a been shocked to discover that none of my views was rendering in Blend 2015 because of this error: “Cannot add additional fields to a type that does not have a constructor”

      image

      Thanks to Blend team I was pointed to a workaround that fixed it (at least for me)

      Go to Tools->Options->XAML designer and check the option: Run project code in XAML Designer (if supported) and reload the project

      image

       

      Hope it helps.

      Adding a splash screen to Xamarin Forms apps

      Every Xamarin Forms app should ship with a splash screen, it is the first thing a user see and it contributes to reduce the perceived application boot time.

      Adding one is quite easy, let’s go from simpler to harder.

      The simpler: Windows Phone

      Just replace SplashScreenImage.jpg (720×1280 pixels) with your own app launch image in the Windows Phone project and you’re done.

      image

      The harder: iOS

      If you follow iOS documentation you’ll know that adding your own launch screen is just a matter of adding the proper images to the project via info.pList options.

      image

      unfortunately once you do that you’ll still see the blue background with Xamarin Logo at startup, to fix it delete the content of Launch Storyboard option into info.pList and you’re done (no idea why template adds that storyboard inside Resources folder)

      image

      The hardest: Android

      Adding a splash screen requires following steps:

      image

      1-Add the splash screen image into Resources\drawable folder (and all the variants you want to support) in previous screenshot file is named splash.png

      2-Create a new folder under Resources and name it values

      3-Add an xml file into values folder (name is not important, in my case I named it Styles.xml)

      4-Add this content to xml file

      <?xml version="1.0" encoding="utf-8" ?>
      <resources>
          <style name="Theme.Splash" parent="android:Theme">
              <item name="android:windowBackground">@drawable/splash</item>
              <item name="android:windowNoTitle">true</item>
          </style>
      </resources>

      5-Add a new activity to the project and add this code (of course you can safely remove the delay before StartActivity method)

      [Activity(Theme = "@style/Theme.Splash", //Indicates the theme to use for this activity
                   MainLauncher = true, //Set it as boot activity
                   NoHistory = true)] //Doesn't place it in back stack
          public class SplashActivity : Activity
          {
              protected override void OnCreate(Bundle bundle)
              {
                  base.OnCreate(bundle);
                  System.Threading.Thread.Sleep(3000); //Let's wait awhile...
                  this.StartActivity(typeof(MainActivity));
              }
          }

      6-Remove the MainLauncher=true from original activity since this is the new activity that will be launched at startup.

      Hope this helps…

      Application wide resources (reloaded)

      Back in September 2014 I blogged about adding application wide resources to Xamarin Forms applications, that technique is no longer needed since starting from v 1.3 Xamarin added support to app wide resources into Xamarin Forms core.

      So what it this post about? It is about adding (and using) them in a more user-friendly way.

      Since v 1.3 you can create a resource that can be reachable from all pages this way:

      public class App : Application
          {
              public App()
              {
                  this.Resources = new ResourceDictionary
                  {
                      {"TextColor", Color.FromHex("00FF00")}
                  };
      
                  // The root page of your application
                  this.MainPage = new MainView();
              }
          }

      And use the resource from a XAML page this way:

      <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                   xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                   x:Class="App1.MainView">
          <Label Text="Hello from Xamarin Forms" 
                   VerticalOptions="Center" 
                   HorizontalOptions="Center" 
                   TextColor="{StaticResource TextColor}" />
      </ContentPage>

      Ok, It works but is not very friendly, resource name is not listed in XAML Intellisense (powered by Resharper of course) and as XAML lover I’d like to define my application resources in XAML the same way I do in a page.

      Luckily you can and it’s very easy:

      1- Delete App.cs file

      2-Add a new Forms XAML Page and name it App.cs

      image

      3-Make App.cs inherit from Application instead of ContentPage

      public partial class App : Application
          {
              public App()
              {
                  InitializeComponent();
              }
          }

      4-Replace the generated XAML with following one, don’t forget to substitute [YourNamespaceHere] with your own’s application namespace

      <Application xmlns="http://xamarin.com/schemas/2014/forms"
                       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                       x:Class="[YourNamespaceHere].App">
          <Application.Resources>
              <ResourceDictionary>
              </ResourceDictionary>
          </Application.Resources>
      </Application>

      Your project should now look like this:

      image

      and you can add your resources inside ResourceDictionary as in following example:

      <Application xmlns="http://xamarin.com/schemas/2014/forms"
                       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                       x:Class="[YourNamespaceHere].App">
          <Application.Resources>
              <ResourceDictionary>
                  <Color x:Key="TextColor">Red</Color>
              </ResourceDictionary>
          </Application.Resources>
      </Application>

      And now, your resource will work as expected but it will also be listed by Intellisense

      image

      Definitively more friendly than using code (IMHO)

      Hope to see this feature added to Xamarin Forms template soon.

      Visual Studio 2013: Fixing NuGet package install error in Xamarin Android projects

      Recently, quite often indeed, I’m facing an issue trying to add some NuGet packages to a Xamarin Android project, in this particular case I was trying to add Xamarin.Android.Support.RecyclerView package.

      image

      The error I get after clicking Install is:

      image

      Some search on the internet provided me some solutions, the one working for me is changing Android version option from:

      image

      to an explicit value (API 21 in my case)

      image

      after this change, all packages get installed properly.

      Older Posts »