Archiv | Designer RSS for this section

Anleitung zur Planung einer App

Wie jeder gute Entwickler weiss, um gute Software zuschreiben benötigt es guter Planung. Dieses ist auch bei der Entwicklung von Apps für WP7 und WP8 nötig. Aber für die Windows Phone Plattform werden sehr gute Tools angeboten. Einen Vorschlag wie eine Entwicklung vonstatten gehen kann, zeigt der Blogbeitrag Metro App Diary.

Es werden verschiedene Tool mit angesprochen, schaut einfach diesen Post mal an.

Quelle:

Metro App Diary

 

Advertisements

Windows Phone Icons Maker

Nach langer beruflicher Umstellung und Projektwechsel, habe ich es mal wieder geschafft ein wenig für meinen Blog zu schreiben. Es hat sich viel getan im WP7 Lager und ich versuche wieder auf den Stand der Zeit zu kommen. Bei der Suche nach neuen netten Tools bin ich auch wieder fündig geworden

Wer wie ich auch kein Designer ist benötigt für App Bilder und um diese einfach und schnell herzustellen kommt jetzt auf Codeplex ein Tool daher das einen die Arbeit sehr vereinfacht.

heart.png

Abb. : Der Windows Phone Icons Maker.

Dieses Tool schneidet die Bilder Marketplace konform zu.

Quelle :

Codeplex ProjectSite

MetroFlow ein Control der neuen Generation

Wer Apps mit vielen Bildern oder Video Anzeige hat sollte sich mal das neue MetroFlow Control vom Coding4Fun toolkit beschäftigen. Auf WindowsPhoneGeek, wir in einem ersten Beispiel beschrieben wie dieses Control funktioniert.

Alles was benötigt wird ist die neuste Version des Coding4Fun Toolkits.

Mit nur wenigen Zeilen Code ist schon eine erste Anzeige des Controls möglich,

<c4f:MetroFlow>
    <c4f:MetroFlowData Title="Sample 1" />
    <c4f:MetroFlowData
                    ImageUri="Images/bmw1.jpg"
                    Title="BMW 1" />
    <c4f:MetroFlowData ImageUri="Images/bmw1.jpg"/>
</c4f:MetroFlow>
Xaml-Code

image

Abb.: Control in Action

Viele weitere Beispiel findet ihr unter den Ouellen

Quellen:

Coding4Fun Toolkit
 
Getting Started with the Coding4Fun toolkit MetroFlow Control
 

Navigation mit Service

Der NavigationService im MVVM ist für die Steuerung zwischen Views und ViewModel. Wie man diesen Service erstellt und einsetzt, dass kann man im  Rob Garfoot’s Blog in seinem aktuellen Post lesen.

Hier das grundliegende Interface:

public interface INavigationService
{
    void Navigate(string url);
}
Danach sollte die Class erstellt werden
public class NavigationService : INavigationService
{
    private readonly System.Windows.Navigation.NavigationService _navigationService;
    public NavigationService(System.Windows.Navigation.NavigationService navigationService)
    {
        _navigationService = navigationService;
    }
    public void Navigate(string url)
    {
        _navigationService.Navigate(new Uri(url, UriKind.RelativeOrAbsolute));
    }
}
Nun noch im ViewModel integrieren
public interface INavigable
{
    INavigationService NavigationService { get; set; }
}
und ein Navigator im ViewModel
public static class Navigator
{
    public static INavigable GetSource(DependencyObject obj)
    {
        return (INavigable)obj.GetValue(SourceProperty);
    }
    public static void SetSource(DependencyObject obj, INavigable value)
    {
        obj.SetValue(SourceProperty, value);
    }
   public static readonly DependencyProperty SourceProperty =
        DependencyProperty.RegisterAttached("Source", typeof(INavigable), typeof(Navigator), new PropertyMetadata(OnSourceChanged));
    private static void OnSourceChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        Page page = (Page) d;
        page.Loaded += PageLoaded;
    }
    private static void PageLoaded(object sender, RoutedEventArgs e)
    {
        Page page = (Page)sender;
        INavigable navSource = GetSource(page);
        if (navSource != null)
        {
            navSource.NavigationService = new NavigationService(page.NavigationService);
        }
    }
}
Hier noch ein wenig wie das im XAML eingesetzt wird:
<navigation:Page x:Class="SLNavigation.Page1"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           mc:Ignorable="d"
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           xmlns:SLNavigation="clr-namespace:SLNavigation"
           d:DesignWidth="640" d:DesignHeight="480"
           Title="Page1 Page"
           SLNavigation:Navigator.Source="{Binding}"
    >
Quelle:

Splash Screen mit ProgressBar und Backroundworker

hat auf seinem Blog debug mode….. einen Post erstellt, mit einem Designvorschlag für einen Splash Screen mit ProgressBar. Diese Vorgehensweise erlaubt es dem Entwickler seine benötigten Daten für die App geschickt zu verstecken und somit den User nicht nervt mit ständigen Nachladen von Daten. Diese vorgehensweise ist meist aber nur sinnvoll wenn es sich um eine Online App handelt.

image

Abb.: Aufbau des Design Vorschlags

Der Aufbau ist als Usercontrol implementiert, und recht einfach nachvollziehbar.

<Grid x:Name=“LayoutRoot“ Height=“800″ Width=“640″>
<Image Source=“waitsymbol.jpg“
Margin=“0,0,0,0″
VerticalAlignment=“Top“
Height=“650″
HorizontalAlignment=“Left“
Width=“400″
Stretch=“Fill“/>
<TextBlock
Text=“loading….“
HorizontalAlignment=“Left“
Style=“{StaticResource PhoneTextTitle2Style}“
Margin=“185,656,0,97″
/>
<ProgressBar x:Name=“SpalshScreenProgressbar“
Width=“380″
HorizontalAlignment=“Left“
IsIndeterminate=“True“
Margin=“49,707,0,74″ />
</Grid>

Das Control wird einfach in ein PopUp als Child Objekt hinzugefügt.

image

Nun noch den Backround Service einbauen und fertig ist Splash Screen.

clip_image001

Abb.: Fertiges Control im Einsatz

Quelle:

How to create Splash Screen with Progress Bar in Windows Phone 7

Fokus Trigger in Silverlight

Über Mark Monster hatte ich ja schon öfter mal einen Beitrag, heute beschreibt er wie man einen Focus Trigger in Silverlight aufbaut. Einen klassische Trigger sieht wie folgt aus:

public class FocusOnEvent : TargetedTriggerAction<Control>
{
    protected override void Invoke(object parameter)
    {
        Target.Focus();
    }
}

Dieser ist schnell implementiert. Aber sinnvoller ist ein Default Trigger aus dem TargetTriggerAction zu implementieren, dieser könnte wie folgt aussehen:

[DefaultTrigger(typeof(FrameworkElement), typeof(EventTrigger), "Loaded")]
public class FocusOnEvent : TargetedTriggerAction<Control>
{
    protected override void Invoke(object parameter)
    {
        Target.Focus();
    }
}
Und hier der XAML Beispielcode:
<i:Interaction.Triggers>
    <i:EventTrigger>
        <Behaviors:FocusOnEvent TargetName="TitleTextBox" />
    </i:EventTrigger>
</i:Interaction.Triggers>
Quelle:
Mark Monster Blog

 

Die Mango App, Microsofts Referenz App

Wie eine moderne App im Mangostyle inklusive Sql Server CE 4.0 Anbindung erstellt wird, hat jetzt das MSDN Magazin in einem Beitrag dagestellt.

Mangolicious Panorama Main Page

Abb.: App für Rezepte und Coktails

Um eine App noch aufzuwerten, ist ein XNA Spiel mit ins App integriert. Dieses ist wirklich eine super Idee und steigert sicher den Benutzerwert eine App. Weil fast jeder Smartphone Nutzter ein kleinen Spielsinn hat.

Hier noch ein Code Snippet wie die Datenbank eingebunden wurde.

public class MangoDataContext : DataContext 
{   public MangoDataContext()     : base("Data Source=isostore:/Mangolicious.sdf") { }     
 public Table<Recipe> Recipes;
   public Table<Fact> Facts;
   public Table<Cocktail> Cocktails; 
}

Hier noch eine Abbildung vom XNA Game.

The XNA Game in Progress

Quelle:

Building a ‚Mango‘ App

WP7 Cam als Backround Behavior

Eine nette Idee hatte Joost van Schaik, er hat ein Behavior geschrieben damit die Cam im Phone als Backround Video Streaming genutzt werden kann.

/// A behavior that shows a camera view on the background of a panel
  /// </summary>
  public class CameraViewBackgroundBehavior : Behavior<Panel>
  {
    private PhotoCamera camera;
    private PhoneApplicationFrame parentPage;
    private Uri pageSource;
    private VideoBrush backgroundBrush;

    // Setup and cleanup according to http://bit.ly/dZb6D9

    #region Setup
    protected override void OnAttached()
    {
      base.OnAttached();
      AssociatedObject.Loaded += AssociatedObjectLoaded;
      AssociatedObject.Unloaded += AssociatedObjectUnloaded;
    }
private void AssociatedObjectLoaded(object sender, RoutedEventArgs e)
    {
      DoInit();
    }
    #endregion

    #region Cleanup
    private bool isCleanedUp;

    private void Cleanup()
    {
      if (!isCleanedUp)
      {
        isCleanedUp = true;
        AssociatedObject.Loaded -= AssociatedObjectLoaded;
        AssociatedObject.Unloaded -= AssociatedObjectUnloaded;
        DoCleanup();
      }
    }

    protected override void OnDetaching()
    {
      Cleanup();
      base.OnDetaching();
    }

    private void AssociatedObjectUnloaded(object sender, RoutedEventArgs e)
    {
      Cleanup();
    }
    #endregion
  }

Quelle :

A behavior to show the Windows Phone 7 camera as background

HubTile Visual States Beispiel

Weil ich gerade sowieso damit in meiner aktuellen APP rumspiele, fand ich den Post auf WindowsPhoneGeek Blog sehr interessant.

Es geht um HubTiles und dem Visual State.

image

Diese Flipping und Expand States werten ein App wirklich auf.

image

Abb: Verschiedene State

Mit den Windows Phone Toolkit sind das nur wenige Zeilen Code. Hier ein Beispiel Code:

<StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" Orientation="Vertical">
        <toolkit:HubTile x:Name="hubTile" Background="Green" Source="wpglogo.png" Title="Hold Here" Message="This is HubTile message!" Margin="10"/>
        <Button x:Name="btnGoToExpanded" Content=" Go To Expanded State" Click="btnGoToExpanded_Click" />
        <Button x:Name="btnGoToSemiexpanded" Content="Go To Semiexpanded State" Click="btnGoToSemiexpanded_Click" />
        <Button x:Name="btnGoToFlipped" Content="Go To Flipped State" Click="btnGoToFlipped_Click" />
        <Button x:Name="btnGoToCollapsed" Content="Go To Collapsed State" Click="btnGoToCollapsed_Click" />
</StackPanel>

Und hier die Steuerung des Visual State Manager in C#:

private void btnGoToSemiexpanded_Click(object sender, RoutedEventArgs e)
{
    VisualStateManager.GoToState(this.hubTile, "Semiexpanded", true);
}

Quelle:

WindowPhoneGeek Blog
How to Programmatically Switch between the HubTile Visual States

HubTile Event Binding mit MVVM Light Toolkit

HubTiles sind im neuen WP7 Mango noch deutlich aufgewertet worden und der Developer hat viel mehr Möglichkeiten die UI seiner APP zu verbessern. Viele Entwickler benutzen wie auch ich das MVVM Light Toolkit um MVVM in der APP umzusetzen. Um nun im HubTile EventToCommand Binding richtig umzusetzen ist auf WindowsPhoneGeek ein Post erschienen wo beschrieben wird wie einfach das ist.

Ein Command erstellen:

 public ICommand TapCommand

    {
        get;
        set;
    }
Eine Action Methode:
private void HubTileTapAction(string param)
{
    string message = string.Format("{0} was tapped", param);
    MessageBox.Show(message);
}
Und ein wenig Code und XAML:
public MainPage()
{
    InitializeComponent();
    ICommand tapCommand = new RelayCommand<string>(this.HubTileTapAction);
    //...
}
<ListBox Grid.Row="0" x:Name="tileList">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <toolkit:WrapPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <toolkit:HubTile Title="{Binding Title}" Margin="3"
                             Notification="{Binding Notification}"
                             DisplayNotification="{Binding DisplayNotification}"
                             Message="{Binding Message}"
                             GroupTag="{Binding GroupTag}" Source="{Binding ImageUri}">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="Tap">
                        <cmd:EventToCommand Command="{Binding TapCommand}" CommandParameter="{Binding Title}" />
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </toolkit:HubTile>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>
Und hier das Ergebnis:
imageimage
Quelle:
WindowsPhoneGeek