Generate multiple PNG images with Inkscape SVG for Windows 10 Universal UWP apps with Powershell

I’ve been using Inkscape for many of my projects, it’s a great open source SVG vector editor. Windows Universal apps support scaling to pixel density for multiple resolutions. I made this Powershell script to generate PNGs scaled to multiple resolutions from your vector SVG files, so your app can look pretty at all resolutions. Using it is very easy:

  1. Make sure Inkscape is in the PATH
  2. In Inkscape create separate SquareLogo.svg and WideLogo.svg files, and size each document to fit the logo.
  3. Run the script, and it’ll produce about 30+ rescaled images that you can use in Visual Studio manifest editor.
# create a set of tiles for Universal Windows apps
# with Inkscape
# 1. Add Inkscape folder to PATH
# 2. place SquareLogo.svg, WideLogo.svg, Splash.svg into $dir
# images will appear in $outDir
$dir = "C:\svg"
$outDir = "C:\svg\images"

$squareSizes = @(71,89,150,107,142,284,600,300,150,225,188,1240,620,310,465,388,176,88,44,66,55,256,48,24,16,200,100,75,63,50)
$wideSizes = @(1240,620,310,465,388)
$splashSizes = @(2480,1240,930,775,620)

# square images
foreach($size in $squareSizes){
    $res = $outDir+"\"+"SquareLogo-"+$size+".png"
    inkscape --export-png $res -w $size $dir"\SquareLogo.svg"
}

# wide images
foreach($size in $wideSizes){
    $res = $outDir+"\"+"WideLogo-"+$size+".png"
    inkscape --export-png $res -w $size $dir"\WideLogo.svg"
}

# splash
foreach($size in $splashSizes){
    $res = $outDir+"\"+"Splash-"+$size+".png"
    inkscape --export-png $res -w $size $dir"\Splash.svg"
}

Native Cross Platform UI Ideas for iOS, Android, Windows Phone with Xamarin

For many developers using C# and coming from the modern UI apps on Windows, developing cross-platform UI design with the best usability for Windows, iOS and Android presents an interesting challenge. First, they feel like they are coming to a more ‘traditional’ UI: let’s face it Microsoft team has created some very advanced and neat design concepts with the modern apps: with Modern design language, minimalism, panorama, motion animations and pivot. How do you translate that into iOS and Android?

Luckily, Xamarin team has done a lot of research porting and thinking through many of these ideas. Xamarin Forms are based on XAML and work on iOS, Android and Windows Phone natively. Here’s some interesting ideas to keep in mind building a cross platform app with Xamarin Forms:

Is cross-platform UI achievable and does it work fast and look native? Thanks to Xamarin team’s efforts the answer to this is yes! You can write UI code that will look and feel native with native speeds on iOS, Android and Windows Phone.

Things to remember: Forms markup uses XAML, but Xamarin team chose to use objects from iOS and Android stack. So instead of StackPanel you get StackLayout, TextBlock is Label. Attributes also resemble those of Android AXML: Visibility becomes IsVisible (we actually like that, it eliminates a converter which otherwise needs to be used on each boolean property). Background color property becomes BackgroundColor, Foreground property becomes TextColor, ForegroundColor etc depending on the context. In other words: instead of cut and paste from Windows Phone you need to really update your XAML. Which makes a lot of sense, Xamarin team chose to use Android/iOS UI elements in XAML.

Xamarin also figured out a very smart strategy wrapping native controls, while maximizing code re-use. On the screenshot below, Xamarin Forms maps control renders as a native Android, iOS and Windows Phone map on each platform.

 

Source: Xamarin: Controls Gallery