Blog

posts tagged with apps

TechFriyday videos

0 Comments
By Fons Sonnemans, 26-5-2015

Op de Microsoft TechBlog heeft Microsoft Nederland een reeks van video blogs geplaats onder de noemer Tech Friday. In deze videos interviewed Clemens Schotte (Microsoft Technical Evangelist) specialisten in het vak over verschillende onderwerpen. In twee van deze video's houdt Clemens een interview met Fons Sonnemans.

Mijn eerste Windows App ontwikkelen – TechFriday, aflevering 15

Hoe moet je beginnen en wat heb je nodig om je eerste Windows of Windows Phone app te ontwikkelen? Fons Sonnemans van Reflection IT maakt je wegwijs in Visual Studio bij het bouwen van je eerste app. Je kunt Windows of Windows Phone apps ontwikkelen in verschillende programeertalen, zoals C#, VB, C++ en JavaScript. De visuele opmaaktaal is XAML of HTML, door gebruik te maken van Blend (onderdeel van Visual Studio) kun je eenvoudig schermen ontwerpen met controls en zelfs animaties die je nodig hebt in je app. Je ontwikkelde app kun je gemakkelijk testen op je huidige apparaat, maar ook met de simulator voor bijvoorbeeld een tablet of telefoon.

Mijn app in de Windows Store plaatsen – TechFriday, aflevering 16

Om een app in de Windows Store te kunnen zetten moet je eenmalig een Windows developer account aanmaken. Je hebt dan een developer-licentie. In Visual Studio – waarin je je app ook hebt gebouwd- kun je gemakkelijk je app in de Windows Store plaatsen. Fons is nogmaals bij Microsoft te gast om dit proces door te nemen.

Tags: XAML, Apps

Windows XAML Tips - ResourceDictionary with CodeBehind

0 Comments
By Fons Sonnemans, 17-4-2015

I have created XAML solutions (WPF, Silverlight, Windows Phone, Windows 8) for about 7 years now. This week I learned a new feature which I thought wasn't possible. I learned how you can place DataTemplates with eventhandlers into ResouceDictionaries. I thought this wasn't possible because ResourceDictionaries don't have CodeBehind files to write the eventhandlers in. But I was wrong. You can add a CodeBehind to a ResourceDictionary but you will have to do it manually. This makes it possible to move more DataTemplates and ControlTemplates from Pages and UserControls to ResourceDictionaries which can help to avoid duplicate XAML code.

Demo App

My demo app is a Windows app developed using the MVVM design pattern. It contains a MainPage (view), a MainViewModel (viewmodel) class and a Product (model) class. The MainViewModel has a Products property which is a list of 3 hard coded products. The MainPage has a ListView which ItemsSource is DataBound to the Products property of the MainViewModel. The ItemsTemplate of the ListView is set to the ProductsDataTemplate which is a static resource of the Page. This DataTemplate contains an Image control which has 2 events (PointerEntered and PointerExited). In this example I changed the Opacity of the image when you hover over it using your mouse. It is a silly implementation which could also have been implemented using Behaviors in Blend.

MainPage.xaml

<Page x:Class="ResourceDictionaryWithCodeBehindDemo.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:ResourceDictionaryWithCodeBehindDemo"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:vm="using:ResourceDictionaryWithCodeBehindDemo.ViewModels"
      mc:Ignorable="d">

    <Page.Resources>
        <DataTemplate x:Key="ProductDataTemplate">
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding ImageUrl}"
                       PointerEntered="Image_PointerEntered"
                       PointerExited="Image_PointerExited"
                       Opacity="0.3"
                       Width="100"
                       Height="100" />
                <StackPanel Margin="20,0">
                    <TextBlock Text="{Binding Name}" 
                               FontSize="30"/>
                    <TextBlock Text="{Binding Price}"
                               FontSize="20" />
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </Page.Resources>

    <Page.DataContext>
        <vm:MainViewModel />
    </Page.DataContext>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <ListView Margin="50"
                  ItemsSource="{Binding Products}"
                  ItemTemplate="{StaticResource ProductDataTemplate}">
        </ListView>
    </Grid>
</Page>

The MainPage.xaml.cs file contains the MainPage class with the Image_PointerEntered and Image_PointerExited eventhandlers. They change the Opacity of the Image (sender).

public sealed partial class MainPage : Page {
    public MainPage() {
        this.InitializeComponent();
    }

    private void Image_PointerEntered(object sender, PointerRoutedEventArgs e) {
        var img = sender as Image;
        img.Opacity = 1.0;
    }

    private void Image_PointerExited(object sender, PointerRoutedEventArgs e) {
        var img = sender as Image;
        img.Opacity = 0.3;
    }
}

The MainViewModel.cs file contains the MainViewModel class which has the Products property. The Constructor adds 3 sample products to the List.

using System;
using ResourceDictionaryWithCodeBehindDemo.Models;
using System.Collections.Generic;

namespace ResourceDictionaryWithCodeBehindDemo.ViewModels {
    class MainViewModel {

        public List<Product> Products { get; set; }

        public MainViewModel() {
            this.Products = new List<Product>() {
                new Product { Name = "Computer", Price = 2000},
                new Product { Name = "Car", Price = 34000},
                new Product { Name = "Table", Price = 500},
            };
        }
    }
}

The Product.cs file contains the Product class with the Name, Price and ImageUrl properties.

using System;

namespace ResourceDictionaryWithCodeBehindDemo.Models {
    class Product {

        public string Name { get; set; }
        public double Price { get; set; }

        public string ImageUrl {
            get {
                return "http://lorempixel.com/150/150/technics/" + Name;
            }
        }
    }
}

Add ResourceDictionary

Now you can add a ResourceDictionary to the project. Created a folder Resources in the root of the Project in which you will add the ResourceDictionary file. Create this file in Blend and not in Visual Studio because Blend will add the MergedDictionary code to my App.xaml. I named my file MyDataTemplates.xaml.

Add new Item in Blend

MyDataTemplates.xaml will look like this.

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ResourceDictionaryWithCodeBehindDemo">
    
</ResourceDictionary>

Blend will also add the ResourceDictionary to the MergedDictionary of your Application in the  App.xaml.

<Application
    x:Class="ResourceDictionaryWithCodeBehindDemo.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ResourceDictionaryWithCodeBehindDemo">
    
	<Application.Resources>
		<ResourceDictionary>
			<ResourceDictionary.MergedDictionaries>
				<ResourceDictionary Source="Resources/MyDataTemplates.xaml"/>
			</ResourceDictionary.MergedDictionaries>
		</ResourceDictionary>
	</Application.Resources>

</Application>

Add CodeBehind to ResourceDictionary

Now you can create the MyDataTemplates.xaml.cs file in the Resources folder of the project. I do this in Visual Studio and not in Blend. In Visual Studio I have installed an the File Nesting extion (created by Mads Kristensen). This extension will automatically nest the codefile in the xaml file. It is not necessary but I like a clean solution. The complete structure of my Solution looks likes this:

Solution Explorer

Now you must add an x:Class attribute to the ResourceDictionary element in the MyDataTemplates.xaml file. This attribute points to the ResourceDictionaryWithCodeBehindDemo.Resources.MyDataTemplate class. Next you can move the ProductDataTemplate from the MainPage to the ResourceDictionary.

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="ResourceDictionaryWithCodeBehindDemo.Resources.MyDataTemplates"
        xmlns:local="using:ResourceDictionaryWithCodeBehindDemo">

    <DataTemplate x:Key="ProductDataTemplate">
        <StackPanel Orientation="Horizontal">
            <Image Source="{Binding ImageUrl}"
                   PointerEntered="Image_PointerEntered"
                   PointerExited="Image_PointerExited"
                   Opacity="0.3"
                   Width="100"
                   Height="100" />
            <StackPanel Margin="20,0">
                <TextBlock Text="{Binding Name}"
                           FontSize="30" />
                <TextBlock Text="{Binding Price}"
                           FontSize="20" />
            </StackPanel>
        </StackPanel>
    </DataTemplate>

</ResourceDictionary>

The MyDataTemplate class must be a partial class. You must also add a constructor (use the ctor snippet) to the class and call InitializeComponent(). This InitializeComponent method will be automatically generated if you set the x:Class attribute in the XAML. Finally you can move the eventhandlers from the MainPage to the MyDataTemplates class.

using System;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;

namespace ResourceDictionaryWithCodeBehindDemo.Resources {
    partial class MyDataTemplates {

        public MyDataTemplates() {
            this.InitializeComponent();
        }

        private void Image_PointerEntered(object sender, PointerRoutedEventArgs e) {
            var img = sender as Image;
            img.Opacity = 1.0;
        }

        private void Image_PointerExited(object sender, PointerRoutedEventArgs e) {
            var img = sender as Image;
            img.Opacity = 0.3;
        }
    }
}

The App.xaml must also be changed. You will have to register an extra xml namespace named res which holds the 'using:ResourceDictionaryWithCodeBehindDemo.Resources' value. In the MergedDictionaries element you must remove the MyDataTemplates ResourceDictionary and add an <res:MyDataTemplates /> element. This will instantiate an instance of the CodeBehind class. The constructor of the class will load the XAML in the InitializeComponent() method.

<Application
    x:Class="ResourceDictionaryWithCodeBehindDemo.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    
    xmlns:res="using:ResourceDictionaryWithCodeBehindDemo.Resources"
    
    xmlns:local="using:ResourceDictionaryWithCodeBehindDemo">
    
	<Application.Resources>
		<ResourceDictionary>
			<ResourceDictionary.MergedDictionaries>
				<!--<ResourceDictionary Source="Resources/MyDataTemplates.xaml"/>-->
                <res:MyDataTemplates />
			</ResourceDictionary.MergedDictionaries>
		</ResourceDictionary>
	</Application.Resources>

</Application>

The MainPage.xaml now doesn't have the ProductsDataTemplate.

<Page x:Class="ResourceDictionaryWithCodeBehindDemo.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:ResourceDictionaryWithCodeBehindDemo"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:vm="using:ResourceDictionaryWithCodeBehindDemo.ViewModels"
      mc:Ignorable="d">

    <Page.DataContext>
        <vm:MainViewModel />
    </Page.DataContext>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <ListView Margin="50"
                  ItemsSource="{Binding Products}"
                  ItemTemplate="{StaticResource ProductDataTemplate}">
        </ListView>
    </Grid>
</Page>

MainPage.xaml.cs now only contains the constructor.

public sealed partial class MainPage : Page {

    public MainPage() {
        this.InitializeComponent();
    }
}

Closure and download

I hope you like my solution it will open up a lot of extra possibilities to structure your XAML projects. You can download the sample project below.

Cheers,

Fons

Tags: XAML, Blend, Apps, CSharp

TechDays 2014 videos and presentations

0 Comments
By Fons Sonnemans, 31-5-2014

Op 16 en 17 april heb ik weer bij het TechDays 2014 event van Microsoft een aantal sessies gepresenteerd. Via deze blog wil ik de videos en presentaties met u delen.

What’s new in XAML and Tooling for Windows 8.1?

Channel 9 Video

SlideShare presentatie

Making money with Apps

Channel 9 Video

SlideShare presentatie

Designing XAML Apps using Blend for Visual Studio 2013

Channel 9 Video

SlideShare presentatie

 

Cheers,

Fons

Tags: TechDays, Apps, Blend, XAML

'Sudoku Free' eerste Nederlandse Windows 8 app

1 Comments
By Fons Sonnemans, 7-6-2012

Sudoku Free is het de eerste Nederlandse applicatie in de Windows 8 Store. Het spel is gebaseerd op de Windows Phone Sudoku app die in oktober 2010 in de Marketplace verscheen. Overigens ook als eerste Nederlandse app.

Bij de Windows 8 app heeft Flavour mij geholpen met de grafische vormgeving. Bij het ombouwen heb ik een hergebruik van 90% van de code gerealiseerd. De schermen (XAML) zijn door de grotere schermformaten redelijk veel gewijzigd.

In deze eerste week is de app al ruim 10.000 keer gedownload. De reviews zijn zeer positief. Ik ben dan ook van plan om diverse van mijn WP7 apps om te bouwen naar Windows 8.

Omschrijving

Speel standaard 9x9 Sudoku puzzels. Train en versterk uw hersenen in visueel scannen. Met drie moeilijkheidsgradaties, intuïtieve metro-stijl interface, en alle functies binnen handbereik, is dit Sudoku spel is zeker snel uw favoriet.

Mogelijkheden

    • 3 verschillende moeilijkheidsgradaties (eenvoudig, normaal, moeilijk)
    • willekeurige puzzel generator zodat u altijd een andere puzzel krijgt
    • automatisch opslaan (roaming)
    • ondersteunt touch, muis en toetsenbord
    • ongedaan maken, opnieuw en notities
    • valideren, hint, oplossen
    • Nederlands of Engels

    Download

    Als u de Windows 8 Release Preview geïnstalleerd heeft kunt u het spel nu al downloaden door op de onderstaande afbeelding te klikken.

    Screenshots

    Hoofdvenster Start van een normale puzzel Bij het oplossen kunt u gebruik maken van notities Controleer de puzzel vanuit de applicatiebalk Sudoku instellingen Puzzle opgelost Windows Store

    Groeten,

    Fons

    Tags: Windows 8, Apps

    Bloq for Windows Phone 7

    0 Comments
    By Fons Sonnemans, 12-6-2011

    In this very addictive game you have to select 4 bloqs of the same color to make a rectangle. The number of bloqs in this rectangle are added to your score. Win bonus time if a numbered bloq is in this rectangle.

    Features:

    • Fun, good looking and addictive
    • Local and online highscores (overall, daily and weekly)
    • Choose your favorite color theme
    • Choose small or large bloqs
      • Download

        You can download it for free from the WP7 Marketplace.

        Screenshots

        Cheers,

        Fons

    TechDays 2011 WP7 app

    0 Comments
    By Fons Sonnemans, 4-4-2011

    I have written a new WP7 application which is now available on the Marketplace.

    TechDays

    Description

    TechDays 2011 for Windows Phone delivers users scheduling and speakers information from Microsoft TechNet_Live, DevDays and GeekNight. It will be held on 26 - 29 April in the World Forum, The Hague, The Netherlands.

    This is an unofficial app developed by Fons Sonnemans (Reflection IT). Visit his DevDays sessions and learn how it was developed.

    Download

    You can download it for free from the Windows Phone marketplace.

    Cheers,

    Fons

    Mijn W-8BEN voor de Windows Phone 7 Marketplace

    1 Comments
    By Fons Sonnemans, 24-3-2011

    Om je inkomsten van je applicaties, die via de Marketplace verkocht worden, uitbetaald te krijgen, dien je een aantal stappen te ondernemen, zodat je niet dubbel belasting betaalt. Vanwege een verdrag tussen Amerika en Nederland is het mogelijk dat je in Amerika geen belasting betaalt over deze inkomsten, mits je de goede formulieren correct invult. Wel moet je in Nederland separaat aangifte doen over deze inkomsten.

    Ik heb op dit moment 6 applicaties in de WP7 Marketplace. Vanaf januari dit jaar betaalt Microsoft USA mij maandelijks mijn inkomsten uit. Hierbij houden zij geen belasting in omdat ik mijn W-8BEN formulier correct ingevuld en opgestuurd heb. In deze blogpost beschrijf ik hoe ik dat gedaan heb.

    Onlangs heeft Matthijs Hoekstra van Microsoft Nederland zijn 'Windows Phone 7 Marketplace, W7, W8, EIN, ITIN, hoe zit dat nou?' blogpost geschreven. Hierin geeft hij uitleg welke formulieren ingevuld moeten worden. In het artikel heeft hij daar een mooi schema opgenomen. Ik ontwikkel mijn applicaties vanuit Reflection IT BV (Besloten Venootschap) en heb dus ook een BTW nummer (VAT). Daarom heb ik dus de Form SS-4, EIN Number, Form W-8(BEN) route gevolgd.

    Form SS-4

    Om een EIN nummer aan te vragen heb ik eerst een SS-4 formulier ingevuld. Deze heb ik gebruikt om daarna deze gegevens telefonisch door te geven aan de US Tax Office (IRS). Dit omdat dit sneller gaat dan de post. Je krijgt namelijk dan direct het nummer en een paar dagen later via de post de bevestiging.

    Klik op de onderstaande afbeelding om de PDF versie van mijn ingevulde formulier te openen. Op een aantal plaatsen heb ik vraagtekens gebruikt om mijn persoonlijke gegevens te verbergen.

    Form SS-4

    Op de 'How to Apply for an EIN' pagina van de IRS staat het internationaal telefoon nummer (+1 267 941-1099) dat ik gebruikt heb. 5 Minuten later had ik mijn EIN en kon ik het W-8BEN formulier invullen.

    W-8BEN

    Klik op de onderstaande afbeelding om de PDF versie van mijn ingevulde formulier te openen. Let wel op dat ik bij vraag 3 ingevuld heb dat ik een Corporation ben (BV) waardoor er sprake is van loondienst. Ik weet niet wat een eenmanszaak of privé persoon dient in te vullen. Bij vraag 6 heb ik mijn EIN ingevuld.

    Form W-8BEN

    Je kunt tegenwoordig je W-8BEN formulier door Microsoft laten controleren voor dat je deze officieel indient. Stuur deze via een email bij naar mplcomm@microsoft.com. Zij melden dan of het goed is ingevuld. Dit heb ik zelf niet gedaan omdat deze service toen nog niet bestond.

    Dit formulier stuur je naar het onderstaande adres.
    Microsoft - Windows Phone Marketplace
    Attn: Finance Department
    29011 Commerce Center Drive
    Valencia, CA 91355
    USA

    Dit adres afkomstig van deze FAQ pagina is het correcte adres. Op deze pagina staat een ander adres wat nogal wat verwarring veroorzaakt. Indien dit laatste adres gebruikt wordt zal Microsoft deze post doorsturen naar het correcte adres.

    Helaas krijg je geen bevestiging van ontvangst of correctheid. Pas als je de eerste $200,- uitbetaald krijgt weet je of het goed gegaan is. Ook de App Hub site blijft melden dat er nog geen W-8BEN ontvangen is tot deze eerste uitbetaling. Je kunt jammer genoeg tussentijds niet controleren of je aanvraag goed terechtgekomen is.

    ITIN en W-7

    Omdat ik vorig jaar nog niet wist dat ik een EIN nodig had heb ik overigens ook een ITIN aangevraagd. Deze heb ik ook ontvangen maar daarna niet meer gebruikt. Om dit aan te vragen heb ik het W-7 formulier ingevuld en opgestuurd naar de IRS. Daarbij heb ik een gewaarmerkte kopie van mijn paspoort meegestuurd. Alleen een handtekening is echter niet voldoende, hierop moet duidelijk de naam van de ambtenaar van de burgerlijke stand bijgeschreven worden. Deze heb ik voor € 10,- verkregen bij het gemeentehuis. Je hoeft hiervoor dus niet naar een notaris of ambassade. Tot slot moet je ook deze brief (PDF) downloaden, afdrukken, ondertekenen en meesturen.

    Klik op de onderstaande afbeelding om de PDF versie van mijn ingevulde formulier te openen.

    Form W-7

    Ik heb daarna bijna 2 maanden moeten wachten op deze aanvraag waarna ik een net briefje ontving met daarin mijn ITIN.

    Disclaimer

    Het invullen van alle formulieren is een hele zoektocht geweest. Gelukkig heb ik daar geen fouten in gemaakt. Ik hoop dat deze informatie gebruikt kan worden om zelf ook deze formulieren in te sturen. Deze informatie is uitsluitend bedoeld voor algemene informatiedoeleinden en is niet bedoeld als advies. Reflection IT BV is niet aansprakelijk voor enige schade ten gevolge van het gebruik (of de onmogelijkheid tot het gebruik) van deze informatie.

    Cheers,

    Fons

    Tattoo Tester on YouTube

    0 Comments
    By Fons Sonnemans, 8-3-2011

      I have just published an YouTube video of Tattoo Tester for the Windows Phone. It also shows the new features added in version 1.1.

    New Features

    • 122 tattoos included grouped in categories: Tribal's, Animals, Signs, Flowers, Cartoons, Flags and Others
    • add another tattoo
    • mirror tattoo
    • import tattoo

    You can now design your own tattoo and import it into the app. Select a picture with a white or transparent background and use it as your custom tattoo. Skip to 2:20 in the video to see this in action.

    Download

    You can download a trial version or buy for $1.99 the full version. You can then choose from 101 extra tattoo's.

    Video

    Cheers,

    Fons

    Animal Sounds game for Windows Phone 7

    0 Comments
    By Fons Sonnemans, 1-3-2011

      I have just published an YouTube video of my new Animal Sounds game for the Windows Phone. Best of all it's free and doesn't contain any ads.

    Description

    Click on the animal that makes the sound you hear. A wild, fun, and educational game for young children (2-5 years).

    Download

    Video

    Cheers,

    Fons

    Tattoo Tester Windows Phone 7 App

    0 Comments
    By Fons Sonnemans, 12-2-2011

    I have written a new WP7 application which is now available on the Marketplace.

    Tatoo Tester

    Description

    Want to get a tattoo? Don't know exactly which tattoo to get or where to place it? Use Tattoo Tester to find out which tattoo is perfect for you. Take a photo of yourself, choose a tattoo and place it on your body. Move, pinch, stretch and rotate the tattoo for a right size and location.
    Save your picture so you can share it with friends.

    Download

    You can download a trial version or buy for $1.99 the full version. You can then choose from 90 extra tattoo's.

    Screenshots

    Cheers,

    Fons

    All postings/content on this blog are provided "AS IS" with no warranties, and confer no rights. All entries in this blog are my opinion and don't necessarily reflect the opinion of my employer or sponsors. The content on this site is licensed under a Creative Commons Attribution By license.