En guide for å gjøre din Windows 8 app klar for publisering

Windows Store er markedsplassen for deg som ønsker legge ut dine apper for Windows 8.

Dette dokumentet hjelper deg med å registrere konto:

<sdrv.ms/VxlSPW> - Windows Store - Registration guidance.docx

 

Dette dokumentet inneholder tips når/før du skal sende inn din app:

<sdrv.ms/Sq9UJp> - Windows Store - App submission.docx

 

For at en app skal bli godkjent i Windows Store må du ha implementert noen minimumskrav til funksjonalitet og design:
   
1. Snapped og Landscape view
2. Settings charm og About(Om) side
3. Tilbake-knapp
4. Privacy Policy (Personvern)

5. Privacy Policy lenke fra Appens beskrivelse side i Windows Store

I tillegg til dette må appen følge retningslinjene for design av Windows 8 apper og ha en App Tile (“icon”) osv.

I denne guiden skal jeg legge til disse funksjonalitetene til en enkel app som du kan lage ved å følge denne guiden (10 min):
digitalerr0r.wordpress.com/2012/08/20/windows-8-development-1-getting-started-with-windows-8/

Du kan også starte et nytt prosjekt og legge til noen enkle kontrollere eller bilder, innholdet og funksjonaliteten av appen har ingenting å si. Dette er mitt utgangspunkt fra artikkelen over, og kan lastes ned i slutten av denne artikkelen:

image

 

1. Snapped og Landscape view
En Windows 8 app må kunne fungere i Snapped view. Dette betyr at appen må ha en funksjonalitet (trenger ikke være alt av funksjonalitet) som gjør at appen kan gi brukeren mulighet til å ha appen i Snap view.

image

Dette kan du gjøre gjennom View States. View States kan bl.a bestemme hvilke kontrollere som er synlige, og hvilke som er usynlige. På denne måten kan du designe et eget view som kun vises om du er i Snapped view, eller om du er i Portrait/Landscape view.

Det første vi trenger er å vite hvilken state vi er i, og hvilken state vi er på vei inn i da brukeren velger å snappe appen.

I MainPage.xaml.cs sin konstruktør legger vi inn en linje med kode som gjør at vi kan bestemme hva som skjer da appen er lastet inn (startet).

    1: public MainPage()
    2: {
    3:     this.InitializeComponent();
    4:     Loaded += MainPage_Loaded;
    5: }

Funksjonen som kalles da appen er lastet inn heter MainPage_Loaded i dette tilfellet, og ser slik ut:

    1: void MainPage_Loaded(object sender, RoutedEventArgs e)
    2: {
    3:     Window.Current.SizeChanged += Current_SizeChanged;
    4: }

Da appen er lastet inn ønsker vi å bestemme hva som skjer da størrelsen på vinduet endres (snapped mode osv).

Før vi kan implementere SizeChanged eventet må vi legge til en List som inneholder typen Control, slik at vi kan ha tilgang til denne/disse gjennom hele “livet” til appen.

    1: private List<Control> _layoutAwareControls;

I funksjonen Loaded henter vi controllen vi skal sette state på, bruker ApplicationView.Value til å hente nåværende state fra devicen og setter den som default. Vi lager også en instanse av _layoutAwareControls og legger controllen til her, slik at vi kan endre den på et senere tidspunkt:

    1: void MainPage_Loaded(object sender, RoutedEventArgs e)
    2: {
    3:     var control = sender as Control;
    4:     if (control == null) return;
    5:  
    6:     // Set the initial visual state of the control
    7:     VisualStateManager.GoToState(control, ApplicationView.Value.ToString(), false);
    8:     if (this._layoutAwareControls == null)
    9:     {
   10:         this._layoutAwareControls = new List<Control>();
   11:     }
   12:     this._layoutAwareControls.Add(control);
   13:  
   14:     Window.Current.SizeChanged += Current_SizeChanged;
   15: }

Da har vi det som trengs for å endre states til enhver tid, og kan implmenetere SizeChanged eventet:

    1: void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
    2: {
    3:     string visualState = ApplicationView.Value.ToString();
    4:  
    5:     if (this._layoutAwareControls != null)
    6:     {
    7:         foreach (var layoutAwareControl in this._layoutAwareControls)
    8:         {
    9:             VisualStateManager.GoToState(layoutAwareControl, visualState, false);
   10:         }
   11:     }
   12: }

Denne snutten tar controllerene vi skal endre state på og setter den til den nye staten.

 

Nå som appen er klar til å reagere på en endring av state kan vi bruke Blend for å lage de forskjellige view statene. Før vi kan implementere forskjellige states må vi legge til noen flere design elementer. Legg f.eks til en ny TextBlock med teksten “Snapped Mode” på toppen/venstre side av appen, og sett dens Visibility til Collapsed.

image

Gå så til States og legg til Snapped, FullScreenLandscape og Filled – viktig at du holder på disse navnene da det er disse som ligger i ApplicationView.Value. Du kan gjerne legge til flere også, og selv velge hvilken av statene den skal gå til ved hjelp av å sette GoToState til noe annet enn det ApplicationView.Value inneholder.

 

image

Det vi nå ønsker å gjøre er å gjemme layouten som eksisterer da vi går inn i snapped mode, og kun vise TextBlocken med “Snapped Mode” teksten. Trykk på “Snapped” staten slik at det røde lyset lyser (record mode). Alle endringene du nå gjør vil bli lagret i Snapped-staten.

image

Trykk på den usynlige TextBlocken du nettopp la til fra desing treet, og sett visibility til Visible:

imageimage

 

Så setter du HeaderTextBlock, WriteHereTextBox, ClickMeButton og backButton til Visibility til Collapsed.

Stopp opptaket ved å trykke på det røde lyset, og prøv appen.

Først vil du se appen normalt (Landscape view):

image

Så drar du appen til snapped view:

image

 

2. Settings charm og About side

En About side er et krav for å få appen godkjent, og den må befinne seg på Settings fanen av appen (About command).

Denne får en fram ved å få trykke på Settings i Charms-menyen:

image

Dette krever et par linjer kode, men går relativt for å implementere.

image

Det vi skal gjøre er å hente fram Settings menyen og legge til en command som viser en selvlaget User Control i flyouten.

I prosjektet ditt har du en folder som heter Common. Lag en ny klasse i den som heter SettingsFlyout (SettingsFlyout.cs) og legg til følgende using statements:

    1: using Windows.UI.Xaml;
    2: using Windows.UI.Xaml.Controls;
    3: using Windows.UI.Xaml.Controls.Primitives;

 

Deretter sørger du for at innholdet i klassen ser slik ut.

    1: class SettingsFlyout
    2: {
    3:     private const int _width = 346;
    4:     private Popup _popup;
    5:  
    6:     public void ShowFlyout(UserControl control)
    7:     {
    8:         _popup = new Popup();
    9:         _popup.Closed += OnPopupClosed;
   10:         Window.Current.Activated += OnWindowActivated;
   11:         _popup.IsLightDismissEnabled = true;
   12:         _popup.Width = _width;
   13:         _popup.Height = Window.Current.Bounds.Height;
   14:  
   15:         control.Width = _width;
   16:         control.Height = Window.Current.Bounds.Height;
   17:  
   18:         _popup.Child = control;
   19:         _popup.SetValue(Canvas.LeftProperty, Window.Current.Bounds.Width - _width);
   20:         _popup.SetValue(Canvas.TopProperty, 0);
   21:         _popup.IsOpen = true;
   22:     }
   23:  
   24:     private void OnWindowActivated(object sender, Windows.UI.Core.WindowActivatedEventArgs e)
   25:     {
   26:         if (e.WindowActivationState == Windows.UI.Core.CoreWindowActivationState.Deactivated)
   27:         {
   28:             _popup.IsOpen = false;
   29:         }
   30:     }
   31:  
   32:     void OnPopupClosed(object sender, object e)
   33:     {
   34:         Window.Current.Activated -= OnWindowActivated;
   35:     }
   36: }

Denne klassen gjør det mulig å vise en User Control i selve Flyouten ved å sende inn en UserControl som parameter i ShowFlyout funksjonen. Mer om dette senere.

Deretter går du i App.xaml.cs

image

 

og legger til denne kodelinjen i OnLaunched-funksjonen:

    1: SettingsPane.GetForCurrentView().CommandsRequested += App_CommandsRequested;

Dette gjør det mulig å selv bestemme hva som skjer da en bruker ønsker å sette i gang en command.

Så må vi implementere App_CommandsRequested funksjonen. Her lager vi en ny instanse av en kommando (About). Når kommandoen kjøres (noen trykker på About) vil den lage en ny SettingsFlyout instanse og i dette tilfellet vise AboutUserControl (som vi snart skal lage).

    1: void App_CommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)
    2: {
    3:     // Add an About command
    4:     var about = new SettingsCommand("about", "About", (handler) =>
    5:     {
    6:         var settings = new SettingsFlyout();
    7:         settings.ShowFlyout(new AboutUserControl());
    8:     });
    9:  
   10:     args.Request.ApplicationCommands.Add(about);
   11:  
   12: }

Da gjenstår det bare å lage selve About siden. Dette gjøres ved å lage en ny User Control som heter AboutUserControl.

Legg til denne i prosjektet ditt. En blank User Control blir da generert, med et tomt Grid element. I Grid elementet legger du inn denne koden:

    1: <StackPanel Background="#FF580101">
    2:     <TextBlock Text="Hello World App" FontFamily="Segoe UI" FontWeight="SemiLight" FontSize="26.667" />
    3:     <TextBlock Text="Trial Version" FontFamily="Segoe UI" FontWeight="SemiLight" FontSize="18" />
    4: </StackPanel>

Prøv å kjør appen nå, få frem Settings og trykk på About. Her burde du gjerne ha litt informasjon om appen, kontakt og versjon.

image

Denne appen har ingen spesielle settings, men om du har dette må du legge til en ny UserControl som f.eks heter PreferencesUserControl i prosjektet og legge denne til i App_CommandsRequested funksjonen:

    1: void App_CommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)
    2: {
    3:     // Add an About command
    4:     var about = new SettingsCommand("about", "About", (handler) =>
    5:     {
    6:         var settings = new SettingsFlyout();
    7:         settings.ShowFlyout(new AboutUserControl());
    8:     });
    9:  
   10:     var pref = new SettingsCommand("pref", "Preferences", (handler) =>
   11:     {
   12:         var settings = new SettingsFlyout();
   13:         settings.ShowFlyout(new PreferencesUserControl());
   14:     });
   15:  
   16:     args.Request.ApplicationCommands.Add(about);
   17:     args.Request.ApplicationCommands.Add(pref);
   18: }

3. Tilbake-knapp

Det er også et krav om at brukeren skal ha muligheten til å gå tilbake i appen. Dette gjelder apper som har flere enn en side å navigere mellom.

image

For å legge til en tilbake-knapp kan du bare bruke en vanlig knapp, med den innebyggede stilen som design:

    1: <Button
    2:     x:Name="backButton"
    3:     Click="GoBack"
    4:     IsEnabled="{Binding DefaultViewModel.CanGoBack, ElementName=pageRoot}"
    5:     Style="{StaticResource BackButtonStyle}" Visibility="Visible"/>

Som du ser krever dette at du implementerer Click eventet. Her ser den etter en funksjon som heter GoBack. Legg til denne kodesnutten i code-behind filen.

    1: private void GoBack(object sender, RoutedEventArgs e)
    2: {
    3:     // Tilbake logikk
    4: }

I denne legger du inn navigerings-logikk som f.eks GoBack() eller andre funksjoner som resetter og gjemmer/viser felter osv.

4. Privacy Policy (Personvern)  
Alle apper må ha en Privacy policy side som skal åpnes fra Settings charmen. Denne kan enten være en egen side (Page), eller som en UserControl slik vi lagde på About siden. Appen Cocktail Flow bruker en UserControl på samme måte som vi About.

imageimageimage

 

5. Lenke til Privacy Policy fra appens beskrivelseside i Windows Store

Alle apper må ha Privacy Policy informasjon på selve siden til appen (den som ligger i Windows Store).

Dette kan du lage ved å publisere et blogg-innlegg med appens Privacy Policy tekst, og legge inn lenke til denne i Privacy Policy tekst boksen du kan fylle ut da du utfører beskrivelsesprosessen da du publiserer appen:

image 

HelloWorldApp.zip