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);
            GetSlots(null);
        }

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

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

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

            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:
xmlns:vm=”using:Mareinsula.ViewModel”>

<Page.DataContext>

<vm:SlotsViewModel/>

</Page.DataContext>

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}” />

Navigation

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}}”

IsTabStop=”false”

xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;

xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;

xmlns:local=”using:MemCards.Views”

xmlns:common=”using:MemCards.Common”

xmlns:d=”http://schemas.microsoft.com/expression/blend/2008&#8243;

xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006&#8243;

mc:Ignorable=”d”>

<common:LayoutAwarePage.Resources>

<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>

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

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

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

<EasingDoubleKeyFrame.EasingFunction>

<QuarticEase/>

</EasingDoubleKeyFrame.EasingFunction>

</EasingDoubleKeyFrame>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</common:LayoutAwarePage.Resources>

<Grid Style=”{StaticResource LayoutRootStyle}”>

<Grid.RowDefinitions>

<RowDefinition Height=”140″/>

<RowDefinition Height=”1*”/>

</Grid.RowDefinitions>

<!– Back button and page title –>

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width=”Auto”/>

<ColumnDefinition Width=”*”/>

</Grid.ColumnDefinitions>

<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″>

<TextBlock.RenderTransform>

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

</TextBlock.RenderTransform>

<TextBlock.Projection>

<PlaneProjection/>

</TextBlock.Projection>

</TextBlock>

</Grid>

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

<Frame.ContentTransitions>

<TransitionCollection>

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

</TransitionCollection>

</Frame.ContentTransitions>

</Frame>

<VisualStateManager.VisualStateGroups>…

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; }
            set
            {
                if (value != _title)
                {
                    _title = value;
                    Notify("Title");
                }
            }
        }

        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:

<Application.Resources>

<ResourceDictionary >

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

<ResourceDictionary.MergedDictionaries>

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

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</Application.Resources>

 

2.5 Inside of mainpage.xaml.cs for instance:

public MainPage()
        {
            this.InitializeComponent();
            (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.

Advertisements

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