W8 Metro Second Day Solving Stuff

Today I have learned a lot how to solve many stuff in metro release preview, here I post several tips to do not forget:

MVVM with data at design time

1.1 Create the Model with INotifyPropertyChanged

1.2 Create the ViewModel like:

public class SlotsViewModel : INotifyPropertyChanged
        public SlotsViewModel()
            GetSlotsCommand = new VMCommand<object>(GetSlots);

        public ObservableCollection<Slot> Slots { get; set; }

        public VMCommand<object> GetSlotsCommand { get; set; }

        void GetSlots(object obj)
            if (Slots == null)
                Slots = new ObservableCollection<Slot>();

            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs("Contacts"));

            Slots.Add(new Slot { ID = 0, Date = DateTime.Now });
            Slots.Add(new Slot { ID = 1, Date = DateTime.Now.AddDays(-1) });
            Slots.Add(new Slot { ID = 2, Date = DateTime.Now.AddDays(-2) });
            Slots.Add(new Slot { ID = 3, Date = DateTime.Now.AddDays(-4) });
            Slots.Add(new Slot { ID = 4, Date = DateTime.Now.AddDays(-6) });
            Slots.Add(new Slot { ID = 5, Date = DateTime.Now.AddDays(-10) });

            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs("Contacts"));

        public event PropertyChangedEventHandler PropertyChanged;

1.3 Now create the datacontext in design time:




1.4 Now let’s add some implementation of the data:

<GridView Margin=”0,60,0,0″x:Name=”ListSlots” ItemsSource=”{Binding Slots}”ItemsPanel=”{StaticResource ItemsPanelTemplate1}” />


The navigation service is different from Windows Phone. To create a Navigation Environment you must create the following:

2.1.- A Navigation Page with a frame inside:

<common:LayoutAwarePage x:Name=”pageRoot” x:Class=”MemCards.Views.NavigationPage” DataContext=”{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}”










<Storyboard x:Name=”EnterTitleSb”>

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=”(UIElement.Opacity)” Storyboard.TargetName=”pageTitle”>

<EasingDoubleKeyFrame KeyTime=”0″ Value=”0″/>

<EasingDoubleKeyFrame KeyTime=”0:0:0.3″ Value=”1″/>


<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=”(UIElement.RenderTransform).(CompositeTransform.TranslateX)” Storyboard.TargetName=”pageTitle”>

<EasingDoubleKeyFrame KeyTime=”0″ Value=”200″/>

<EasingDoubleKeyFrame KeyTime=”0:0:0.3″ Value=”0″>








<Grid Style=”{StaticResource LayoutRootStyle}”>


<RowDefinition Height=”140″/>

<RowDefinition Height=”1*”/>


<!– Back button and page title –>



<ColumnDefinition Width=”Auto”/>

<ColumnDefinition Width=”*”/>


<Button x:Name=”backButton” Click=”GoBack” IsEnabled=”{Binding Frame.CanGoBack, ElementName=pageRoot}” Style=”{StaticResource BackButtonStyle}”/>

<TextBlock x:Name=”pageTitle” Text=”{Binding Title, Source={StaticResource Strings}}” Grid.Column=”1″ Style=”{StaticResource PageHeaderTextStyle}” RenderTransformOrigin=”0.5,0.5″>


<CompositeTransform TranslateX=”-2″ TranslateY=”8″/>







<Frame x:Name=”RootFrame” Grid.Row=”1″>



<EntranceThemeTransition x:Name=”EntranceTransition” FromHorizontalOffset=”200″ />





2.2 As you see I created a Storyboard, that is because if I change the NavigationPage title, I woud like to create another EntranceTransition, that means:

  • Change the Main Title
  • Animate the title from the navigated frame.

To do this, it was hard to find:

2.3 Create a class with the resources:

public class GlobalStrings : INotifyPropertyChanged
        private string _title = "Remove this";
        public string Title
            get { return _title; }
                if (value != _title)
                    _title = value;

        private void Notify(string s)
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(s));

        public event PropertyChangedEventHandler PropertyChanged;

2.4 Add an instance of GlobalStrings in App.Xaml:


<ResourceDictionary >

<common:GlobalStrings x:Key=”Strings”></common:GlobalStrings>


<ResourceDictionary Source=”Common/StandardStyles.xaml”/>





2.5 Inside of mainpage.xaml.cs for instance:

public MainPage()
            (App.Current.Resources["Strings"] as GlobalStrings).Title = "Main Menu";

        protected override void OnNavigatedTo(NavigationEventArgs e)
            (((Frame.Parent as Grid).Parent as NavigationPage).Resources["EnterTitleSb"] as Storyboard).Begin();

And that’s all from now. I did not find any that worked with the release preview, that’s why I created all by my own. I hope it helps and it’s up to date.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s