Alex Yakhnin's Blog

Windows 8 store apps designs fiesta.

2013-01-11T00:03:25Z

If you are developing Windows 8 apps you'd be interested in these 50 (!) design templates:

http://blogs.msdn.com/b/malaysia/archive/2013/01/08/windows-8-design-templates-is-now-ready-for-all-the-developers.aspx

Better yet - they all come with the source code for both C#\XAML and JS\HTML!

Enjoy!

FeedPoint Window 8 Store app is released.

2012-10-29T16:24:00Z

My FeedPoint app for Windows 8 Store has been released. You can get it from here:

http://apps.microsoft.com/webpdp/en-US/app/feedpoint/19a4c655-5547-4f08-81e1-a67d8d87ad2a

Description

FeedPoint is not just another Google Reader client app. It's an app that lets you read the feeds in a convenient and intuitive way by utilizing the clean design and providing unparalleled simplicity and readability.

FeedPoint is a no compromise feed reader that allows you easily sift throw a number subscriptions without any distractions and interference.

The Trial version is fully functional with no time limit, except for presence of ads and ability to change a theme of the app.
Read less

Features

•Pin your tiles with the subscriptions to the Start Screen.
•Read your feeds conveniently in a snap view mode.
•Customize the look and feel of the app by selecting from a list of the themes in the Account settings.

Feel free to provide your feedback via Settings charm whether you find some bugs or would like to have some new functionality in the app.

Would you like to debug your apps on your Surface RT?

2012-10-26T21:43:51Z

Tim Heuer has got a blog post on how to do it:

http://timheuer.com/blog/archive/2012/10/26/remote-debugging-windows-store-apps-on-surface-arm-devices.aspx

Tip: How to avoid missing icon for your app in the store.

2012-10-25T11:37:52Z

When submitting your Windows 8 store app for certification don't forget to update the StoreLogo.png file otherwise it will come up as a default app icon (cross). In order to do that you just need to go to the last tab in the dialog for your Package.appmanifest and make sure that you have updated the Logo file:

Charts for your Win8 app.

2012-09-29T02:00:00Z

One of the Microsoft employees Mahmoud Medhat Mousse has created an open source project on codeplex.com which implements chart controls such as Pie Chart, Stacked Bar , Stacked Column , Stacked Line , Line Chart , Area Chart for the Modern UI which as you know were missing from a standard set of controls. You can pick them up here.

The video of the FeedPoint.

2012-09-17T01:23:17Z

I've made a good progress in my work to port the FeedPoint app for Win8. Functionality wise it should be 95% feature complete. I've recorded a short video of app's UX:

Excellent Win8 Labs for developers.

2012-09-11T11:52:00Z

An excellent labs for developers learning how to develop for Win8 have just been published. It's a step by step walk through on how to create Contoso Cookbook application. I've been using these labs for the last few months when working with customers and even for myself when I was starting to learn the Win8 development.

How to restore scroll position of the GridView when navigating back.

2012-09-09T14:04:00Z

When developing WinRT applications which utilize GridView or ListView controls you'd come to the situation when navigating back to a page, you need to restore the scroll position of aforementioned controls. The solution that you can employ in this case is to get access to the ScrollView control which is a visual child of these controls and then remember a current scroll offset. In order to find the ScrollView you can use the FindVisualChild method that you can get from this msdn page. You can call to this method in your page's Loaded event handler:

void ItemsPage_Loaded(object sender, RoutedEventArgs e)
{
this.gridScrollViewer = FindVisualChild<ScrollViewer>(this.itemGridView);
this.gridScrollViewer.ScrollToHorizontalOffset(App.ScrollOffset);
}

What's left to do is to remember the scroll offset when you navigate away from this page:

protected override void OnNavigatedFrom(NavigationEventArgs e)
{
App.ScrollOffset = gridScrollViewer.HorizontalOffset;

base.OnNavigatedFrom(e);
}

Happy Windows 8 coding!

Unity for WinRT

2012-08-23T01:12:43Z

If you're In need for a DI and IOC container framework, you can get a port of the Unity for WinRT here:

http://unity.codeplex.com/releases/view/92699

How to display charms on a top of the WebView.

2012-08-13T15:26:35Z

I've been moving along in my development of the FeedPoint app to WinRT. And as a good citizen of the Modern UI I needed to implement app contracts such as search, share and settings which become available for a user via charms. When displaying Accounts flyout in my app I've noticed that it doesn't show properly on the page that's using the WebView control because the flyout gets hidden behind the WebView:

This is happening because of the way the WebView control implemented and its internal drawing logic. This MSDN page suggests to use the WebViewBrush to overcome this issue by placing a rectangle with a snapshot on a top of the WebView. So I did the same. First I placed the Rectangle in my XAML after the WebView. This insures that the Rectangle will be on a top of the WebView:

Next, I've added SwitchWebView public method to the code behind of this page:

public void SwitchWebView(bool back)
{
     if (!back)
     {
         WebViewBrush brush = new WebViewBrush();
         brush.SourceName = "webViewContent";
         brush.Redraw();

         webViewContent.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
         webViewBrushRect.Visibility = Windows.UI.Xaml.Visibility.Visible;
         webViewBrushRect.Fill = brush;
    }
    else
    {
         webViewContent.Visibility = Windows.UI.Xaml.Visibility.Visible;
         webViewBrushRect.Fill = new SolidColorBrush(Colors.Transparent);
    }
}

This method creates a new WebViewBrush, assigns the source for it to be the name of the WebView control, changes visibility and assigns the brush to the Rectangle. This method needs to get called when a flyout becomes visible. It could be done in the constructor like this:

                  public AccountsUserControl()
        {
            this.InitializeComponent();

            if (App.CurrentFrame != null)
            {
                if (App.CurrentFrame.CurrentSourcePageType.Name == "FeedPage")
                {
                    var feedPage = (FeedPage)App.CurrentFrame.Content;
                    feedPage.SwitchWebView(false);
                }
            }
        }

        private void OnBackButtonClicked(object sender, RoutedEventArgs e)
        {
            if (this.Parent.GetType() == typeof(Popup))
            {
                ((Popup)this.Parent).IsOpen = false;
                if (App.CurrentFrame != null)
                {
                    if (App.CurrentFrame.CurrentSourcePageType.Name == "FeedPage")
                    {
                        var feedPage = (FeedPage)App.CurrentFrame.Content;
                        feedPage.SwitchWebView(true);
                    }
                }
            }
            SettingsPane.Show();
        }

Don't forget to switch it back when the back button is clicked. Here's the screenshot of the result:

How to emulate Navigating event in the WebView.

2012-08-08T02:53:00Z

While working on the Win8 version of the FeedPoint app, I've encountered the situation when I needed to be able to intercept a navigation in the WebView control via the link click from the user and show a full browser window instead. Unfortunately the WebView control in the WinRT currently does not implement Navigating event.

The workaround is based on the functionality in the WebView control which allows raising ScriptNotify event via the javascript code on the page. This javasript code needs to have a call: window.external.notify(a) and the ScriptNotify event will be raised in your managed app. So I added the code to parse the html for all links (<a>) and make it look like that:

<a href="blabla.htm" onclick="return OnLinkClick('blabla.htm')>Blabla Link</a>

Where the OnLinkClick is a simple javascript function:

You should notice that this function returns false. This is done in order to cancel default navigation of the WebView control. And here's how ScriptNotify event handler looked like in my app:

private async void webViewContent_ScriptNotify(object sender, NotifyEventArgs e)
{
// Launch external browser
await Windows.System.Launcher.LaunchUriAsync(new Uri(e.Value));
}

More details on how to use SQLite with Windows 8 apps

2012-08-08T02:33:28Z

Tim Heuer has posted a walkthrough on how to install the SQLite runtime package for your WinRT apps and how to use it from your managed or native code:

http://timheuer.com/blog/archive/2012/08/07/updated-how-to-using-sqlite-from-windows-store-apps.aspx

FeedPoint app for Win8 Metro.

2012-07-19T14:21:08Z

While on vacation I've finally found some time to start working on the FeedPoint version that runs on Win8 Metro. I've recently been involved into UX design and development of the Metro apps for the customer and decided to take this experience that I acquired during these engagements and apply this for the port of the FeedPoint to the Win8. Here's a screenshot of the feeds reading page:

SQLLite database for WinRT

2012-06-12T19:30:19Z

You should have probably noticed that when developing Metro apps for Win8, the WinRT currently doesn't include any access to embedded relational database such as SQL CE. However there's a light at the end of tonnel in the form of the SQLLite - an open source embedded database that you should be able to use in your Metro apps. Checkout this blog post by Tim Heuer:

http://timheuer.com/blog/archive/2012/05/20/using-sqlite-in-metro-style-app.aspx

FeedPoint for Windows 8.

2011-11-11T02:42:00Z

I've recently made an early holiday gift for myself - Samsung Series 7 Tablet. It looks great, with the excellent LED screen, good performance and I love it. Since I installed Windows 8 Preview bits on it, I couldn't pass an opportunity to learn the new platform. In order to do this I've decided to port my FeedPoint Windows Phone 7 app to the Windows 8 Metro. I'd assumed that been a Windows Phone developer, a lot of programming paradigms should be really familiar for me when developing Win 8 Metro apps (XAML, tiles, notifications, etc...) and learning curve shouldn't be that steep. So far I can say that my assumptions are correct. The app has been coming along pretty nicely. I am still working out the UX, but here're the screenshots so far:

FeedPoint updated for Mango

2011-10-27T01:43:57Z

I've finally published the update for my FeedPoint app for Mango. It's got a few bug fixes as well as Mango specific functionality such as ability to pin live tiles for your feeds which get updates via a background agent.

The tiles would get updated with the latest post's image as a backround tile. This is how the home screen would look like:

You can find the app in the Marketplace here:

http://www.windowsphone.com/en-US/apps/ec451fcf-7b10-e011-9264-00237de2db9e

ProfileItem control for WP7

2011-10-25T21:36:00Z

In the number of the applications that I'd worked on I had to create a screen to display information about a person such as phone, address, email etc... So the screen essentially'd look like the as profile in the people hub:

So I have created the contro to save a burden of implementing the functionality again and again and called it ProfileItem. Besides displaying the text "call mobile" for example and a phone number I wanted for this control to also support MVVM commanding that would react on when a control is clicked, therefore it'd implement Command property. This is how the XAML for the control looks like:

<UserControl x:Class="ProfileItemTest.Controls.ProfileItem"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
   >
    
    <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}">      
        <Grid Grid.Row="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <TextBlock Name="textBlockTitle" Grid.Row="0" HorizontalAlignment="Left"

 Style="{StaticResource PhoneTextExtraLargeStyle}" Text="engagement"  />
            <TextBlock Name="textBlockValue" Grid.Row="1" HorizontalAlignment="Left" Margin="14,-6,0,6"

 TextWrapping="Wrap" Text="(none)"  FontSize="22" />
            <toolkit:GestureService.GestureListener>
                <toolkit:GestureListener x:Name="listener"
                       Tap="OnTap"/>
            </toolkit:GestureService.GestureListener>
        </Grid>
    </Grid>
</UserControl>

And the code behind:

    public partial class ProfileItem : UserControl
    {
        private event EventHandler Click;
 
        public ProfileItem()
        {
            InitializeComponent();
            this.Click += (sender, e) =>
            {
                if (Command != null && Command.CanExecute(CommandParameter))
                    Command.Execute(CommandParameter);
            };
 
            this.Loaded += new RoutedEventHandler(ProfileItem_Loaded);
        }
 
        void ProfileItem_Loaded(object sender, RoutedEventArgs e)
        {
            if (this.Command != null)
            {
                textBlockValue.Foreground = (Brush)Application.Current.Resources["PhoneAccentBrush"];
            }
        }
 
        #region ICommand
 
        public static DependencyProperty CommandProperty =
       DependencyProperty.Register("Command",
                                   typeof(ICommand), typeof(ProfileItem),
                                   new PropertyMetadata(null, CommandChanged));
 
        private static void CommandChanged(DependencyObject source, DependencyPropertyChangedEventArgs args)
        {
            var button = source as ProfileItem;
            if (button == null) return;
 
            button.RegisterCommand(args.OldValue as ICommand, args.NewValue as ICommand);
        }
 
        private void RegisterCommand(ICommand oldCommand, ICommand newCommand)
        {
            if (oldCommand != null)
                oldCommand.CanExecuteChanged -= HandleCanExecuteChanged;
 
            if (newCommand != null)
                newCommand.CanExecuteChanged += HandleCanExecuteChanged;          
 
            HandleCanExecuteChanged(newCommand, EventArgs.Empty);
        }
 
        private void HandleCanExecuteChanged(object sender, EventArgs args)
        {
            if (Command != null)
                IsEnabled = Command.CanExecute(CommandParameter);
        }
 
 
        public ICommand Command
        {
            get { return GetValue(CommandProperty) as ICommand; }
            set { SetValue(CommandProperty, value); }
        }
 
        public static DependencyProperty CommandParameterProperty =
            DependencyProperty.Register("CommandParameter",
                                        typeof(object), typeof(ProfileItem),
                                        new PropertyMetadata(null));
 
        public object CommandParameter
        {
            get { return GetValue(CommandParameterProperty); }
            set { SetValue(CommandParameterProperty, value); }
        }
 
 
        #endregion
 
 
        public static readonly DependencyProperty TitleProperty = DependencyProperty.RegisterAttached("Title", typeof(string), typeof(ProfileItem), new PropertyMetadata(OnTitleValueChanged));
 
        public string Title
        {
            get
            {
                return (string)base.GetValue(TitleProperty);
            }
            set
            {
                base.SetValue(TitleProperty, value);
            }
        }
 
 
        public static readonly DependencyProperty ValueProperty = DependencyProperty.RegisterAttached("Value", typeof(string), typeof(ProfileItem), new PropertyMetadata(OnValueChanged));
 
        public string Value
        {
            get
            {
                return (string)base.GetValue(ValueProperty);
            }
            set
            {
                base.SetValue(ValueProperty, value);
            }
        }
 
 
        private static void OnTitleValueChanged(DependencyObject target, DependencyPropertyChangedEventArgs args)
        {
            ProfileItem item = (ProfileItem)target;
            item.textBlockTitle.Text = (string)args.NewValue;
        }
 
        private static void OnValueChanged(DependencyObject target, DependencyPropertyChangedEventArgs args)
        {
            ProfileItem item = (ProfileItem)target;
            item.textBlockValue.Text = (string)args.NewValue;
        }
 
        private void OnTap(object sender, Microsoft.Phone.Controls.GestureEventArgs e)
        {
            if (this.Click != null)
            {
                this.Click(this, EventArgs.Empty);
            }
        }
 
 
        private class ClickCommandBinding
        {
            private readonly ICommand command;
            private readonly ProfileItem button;
            private readonly Func<object> parameterGetter;
 
            /// <summary>
            /// 
            /// </summary>
            /// <param name="iconButton"></param>
            /// <param name="command"></param>
            /// <param name="parameterGetter"></param>
            public ClickCommandBinding(ProfileItem button, ICommand command, Func<object> parameterGetter)
            {
                this.command = command;
                this.button = button;
                this.parameterGetter = parameterGetter;
                this.button.IsEnabled = this.command.CanExecute(parameterGetter());
 
                this.command.CanExecuteChanged += this.CommandCanExecuteChanged;
                this.button.listener.Tap += this.ButtonClicked;
            }
 
            public void Detach()
            {
                this.button.MouseLeftButtonDown -= this.ButtonClicked;
                this.command.CanExecuteChanged -= this.CommandCanExecuteChanged;
            }
 
            private void ButtonClicked(object s, EventArgs e)
            {
                this.command.Execute(this.parameterGetter());
            }
 
            private void CommandCanExecuteChanged(object s, EventArgs ea)
            {
                this.button.IsEnabled = this.command.CanExecute(this.parameterGetter());
            }
        }
    }

I've also created a sample that would display a contact data on your phone. This is how the screen looks like in the sample:

You can download the code for the control and the sample from here.

Sketchflow for Windows Phone 7.

2011-06-09T16:48:29Z

Would you like to be able to create your scetchflow designs for the Windows Phone 7? Now you can:

http://www.uxmagic.com/blog/post/2011/06/08/Sketchflow-for-Windows-Phone-7.aspx

Reactive for Compact Framework.

2011-05-05T01:06:45Z

Have you heard about Reactive (Rx) Framework? If you have been developing for Windows Phone 7, Silverlight or a desktop and had to deal with asynchronous code, the Rx Framework has been a life saver for you. I love it's power and flexibilty. However, the Rx Framework has not been available for Compact Framework 3.5 and WM 5.x devices. But we can make this happen. The LiveLabs team responsible for Rx Framework would be able to release the build for .NET CF if enough people requested for it. You can make them to hear you thoughts in the Rx Fx related forum:

http://social.msdn.microsoft.com/forums/en-us/rx/thread/52276723-EBE1-414F-8295-1C62BAF8B388

FeedPoint updated.

2011-04-17T20:22:03Z

I've updated the FeedPoint app with the a few requested features:

- The feed list screen now has the "mark as read" button. You don't need to expand the menu for this.

- It now allows sorting the feeds by time they were created, such as "sort by newest" and "sort by oldest". This sort is set on the feed level and persisted across the execution of the application.

- You can change the theme from inside of the app itself to be either "light" or "dark".

Get it from here:

http://social.zune.net/redirect?type=phoneApp&id=ec451fcf-7b10-e011-9264-00237de2db9e

Avis app

2011-03-08T15:55:06Z

A few months ago I spend some time with folks from Avis to help them to get started on the development for Windows Phone 7. Their app has recently been published on the marketplace and has already gathered a very good reviews from the users.

The recent release of the Windows Phone Developer Tools January 2011 Update

2011-02-07T18:10:42Z

Here's some useful information from the documentation team:

The recent release of the Windows Phone Developer Tools January 2011 Update includes bug fixes, a new emulator, and utilities. Alongside the release of the tools we have also published an update to MSDN that focuses on documenting key aspects of this release, known issues/limitations and additional content for developers. The highlights of this release are listed below and also available in the What’s New topic on MSDN.

RELEASE HIGHLIGHTS

§ NEW DOCUMENTATION

o Release Notes for the January 2011 Update

o How to: Test Copy and Paste in Windows Phone Emulator

o Deploying and Testing on a Physical Windows Phone Device

o Troubleshooting Windows Phone Developer Tools

o Frame Rate Counters in Windows Phone Emulator

o New VB code samples

§ Keyboard Input Scope Sample

§ Model-View-ViewModel Pattern Sample

§ Silverlight Sound Sample

o Bing Maps Silverlight Control – Working with Pushpins in the Map Control

o Bing Maps Silverlight Control – Setting the Map View

§ UPDATED DOCUMENTATION

o Performance Considerations in Applications for Windows Phone

o Bing Maps APIs are now included in the class library reference

§ Microsoft.Phone.Controls.Maps

§ Microsoft.Phone.Controls.Maps.AutomationPeers

§ Microsoft.Phone.Controls.Maps.Core

§ Microsoft.Phone.Controls.Maps.Design

§ Microsoft.Phone.Controls.Maps.Overlays

§ Microsoft.Phone.Controls.Maps.Platform

Is ANID unique?

2011-01-13T22:36:00Z

When developing the FeedPoint app I needed to encrypt the user credentials in order to store them in the isolated storage. So, I used AesManaged class to encrypt and decrypt the data. As a password key, I've decied to use the anonymous ID that we can retrieve utilizing the UserExtendedProperties class and I used the following code:

string anid = UserExtendedProperties.GetValue("ANID") as string

After my application has been depoyed to the Marketplace, I started receiving reports from users saying that my application would just stop loading, unless it's re-installed. And so I set to try to reproduce the issue. After a few days of starting and closing, activating and deactivating the application I was finally able to reproduce the issue. It seems like my decryption code was failing to decrypt the values. After more digging into the issue I've discovered that value of the "ANID" had suddenly changed! So I've taken look at the MSDN documentation page and saw that "The string returned when querying for the anonymous ID by specifying the “ANID” property name contains the 32 character anonymous identifier as well as other information used by the system." and you need to exctract it like this:

string anid = UserExtendedProperties.GetValue("ANID") as string;
string anonymousUserId = anid.Substring(2, 32);

After I made a change in my app, the problem was gone. So, when using the ANID, please beware of this little nook. And of course RTFM :)

PS: The FeedPoint (version 1.2) the contains this fix has been deployed to the Marketplace. Due to the current bug in the marketplace, if you are using a trial version you will need to uninstall the app and then download and install the latest version

The Best of 2010

2011-01-05T02:10:00Z

It's time for a traditional most popular posts of 2010:

Creating a Splash Screen with a progress bar for WP7 applications.

Creating Scrollable TextBlock for WP7

Creating Progress Dialog for WP7.

Implementing Picker Box functionality on WP7

Creating List Picker for WP7.

Creating Image Round Button for WP7

Creating LINQ Data Provider for WP7

Deep Zoom on WP7

Happy New Year everybody! :)

FeedPoint app has been published.

2010-12-29T14:09:31Z

The feed reader app that I've been talking about in my previous posts has been published on the marketplace:

http://social.zune.net/redirect?type=phoneApp&id=ec451fcf-7b10-e011-9264-00237de2db9e

I've decided not to make it a free app (it just a dollar) due to marketplace restrictions for a free apps. The trial is a fully functional version except for a short message in the beginning. Initially I've created this app just for myself, but one of my friends convinced my to publish it. So here it is :). The latest walkthrough of the functionality is here:

http://www.youtube.com/watch?v=7MBy2mtDfTk

And I am planning to continue adding more features to my app.

Happy New Year and enjoy...