basquang™ on clouds

September 26, 2013

Windows Store 8.1: Save visual element to bitmap image file

Filed under: Windows Store 8 — basquang @ 3:56 PM
Tags: , , ,

If you has already familiar with Windows Phone development. You may able to capture screen or visual element to image file using the Render method of WriteableBitmap object. When develop Windows Store app, the Render method will not exist at this time. If you are developing Windows Store 8.0 application, it will not easy for you to create a screen capture programmatically of saving visual element to image file. Fortunately with Windows Store 8.1, Microsoft provides the alternative object to do this case, that is RenderTargetBitmap object.

This method below allow you to saving visual element to file (it would saved to Local Storage or Library)


async Task SaveVisualElementToFile(FrameworkElement element, StorageFile file)
            string fileName = "customphoto.jpg";
            var renderTargetBitmap = new RenderTargetBitmap();
            await renderTargetBitmap.RenderAsync(element, (int)element.Width, (int)element.Height);
            var pixels = await renderTargetBitmap.GetPixelsAsync();

            using (IRandomAccessStream stream = await file.OpenAsync(FileAccessMode.ReadWrite))
                var encoder = await
                    BitmapEncoder.CreateAsync(BitmapEncoder.JpegEncoderId, stream);
                byte[] bytes = pixels.ToArray();
                                     (uint)element.Width, (uint)element.Height,
                                     96, 96, bytes);

                await encoder.FlushAsync();

NOTE: You cannot save visual element which in code (offscreen) to image file as mention here

Hope this help!

Windows Store RT: Access controls in other page

Filed under: Windows Store 8 — basquang @ 3:20 PM
Tags: ,

When develop Windows Store App, sometime you may want to access controls in another page. For example: In the MainPage, you are playing background music using MediaElment control. Your app has SettingsFlyout page to allow user enable/disable the background music via ToggleSwitch control. You want Application must stop/start music right from user switch toggleswitch control in SettingsFlyout page. The question is how to implement that case? You cannot override the event OnNavigatedFrom/OnNavigatedTo in both page, because they are not navigate anymore.

The solution is use “Window.Current.Content” to detect current page, then navigate to the control in that page. See example code bellow:


 public sealed partial class SettingsFlyoutPage : SettingsFlyout
        public SettingsFlyoutPage()
            toggleSwitchMusic.Toggled += toggleSwitchMusic_Toggled;

        void toggleSwitchMusic_Toggled(object sender, RoutedEventArgs e)
            Frame rootFrame = Window.Current.Content as Frame;
            //Detect the page need to access its control
            if (rootFrame.Content.GetType().Equals(typeof(MainPage)))
                MainPage mainPage = rootFrame.Content as MainPage;
                MediaElement backgroundMusic = mainPage.Content as MediaElement;
                backgroundMusic.IsMuted = !toggleSwitchMusic.IsOn;
                //mainPage.mediaElement.IsMuted = !toggleSwitchMusic.IsOn;

Hope this help!

Windows Store RT: Save game/application state when closing app via close gesture or Alt+F4

Filed under: Windows Store 8 — basquang @ 2:41 PM
Tags: , , ,

If you has already family with Windows Phone development. You may often saving application/game state by overriding MainPage’s OnNavigatedFrom event. But with Windows Store app (Windows RT). The event is not fire when user is closing application by “close gesture” or Alt+F4 keyboard function.

So the question is how to save application/game state in that case?

According to MSDN “When the user closes an app by pressing Alt+F4 or using the close gesture, the app is suspended for 10 seconds and then terminated. Windows notifies your app when it suspends it, but doesn’t provide additional notification when it terminates the app. That means your app must handle the suspended event and use it to save its state and release its exclusive resources and file handles immediately.”

Meaning that you should implement your code in the suspending event. So the process of saving application/game state when use close app via close gesture/Alt+F4 is:

  1. Handle Suspending event in the App.xaml.cs constructor. In the Suspending event, saving the application/game state to Application Data (ex: Windows.Storage.ApplicationData.Current.LocalFolder)
    public App()
                this.Suspending += OnSuspending;
    private async void OnSuspending(object sender, SuspendingEventArgs e)
                var deferral = e.SuspendingOperation.GetDeferral();
                //TODO: Save application state and stop any background activity
                await SuspensionManager.SaveAsync();
                await SaveGameState();
                await UpdateTile();
     async System.Threading.Tasks.Task SaveGameState()
            //Save application or game state to Windows.Storage.ApplicationData.Current.LocalFolder here
  2. In the MainPage.xaml.cs load the state from Application Data in the OnNavigatedTo event.
     protected async override void OnNavigatedTo(NavigationEventArgs e)
                //Load application/game state from Windows.Storage.ApplicationData.Current.LocalFolder here
                await LoadGameState();

July 9, 2013

Photo Location Viewer: Ứng dụng duyệt ảnh theo thời gian và hiển thị vị trí ảnh trên Windows 8

Filed under: Windows Store 8 — basquang @ 8:28 AM

Photo Location Viewer is simple photo viewer application. This application display all photos in your Picture Library. All photos will be group by the timeline, year and month. Each photo will be display with full information, includes Maps data if have. It’s easy for every one to keep track the photo history in details
•Photo timeline view
•Display photo location on Bing map if have
•Display photo info detail include Camera model, Date Taken…
•Sharing the photo via Email, Skydrive, Windows Phone

Mô tả:

Photo Location Viewer là một ứng dụng duyệt ảnh trên Windows 8 Metro App. Ứng dụng cho phép duyệt toàn bộ ảnh trong Picture Library, và hiển thị chúng theo giời gian được nhóm theo năm, và tháng. Mỗi bức ảnh sẽ được hiển thị thông tin chi tiết bao gồm: Camera Model, Data Taken,….Ngoài ra, với những bức ảnh được chụp từ di động đi kèm với thông tin về địa lý, ứng dụng sẽ hiển thị trên bản đồ của Bing maps.

Ứng dụng hỗ trợ các ngôn ngữ: Tiếng Anh, tiếng Pháp, tiếng Nhật và tiếng Trung Quốc và tất nhiên là cả Tiếng Việt.

Link tải về:

Dưới đây là một số hình ảnh của ứng dụng:

Tiếng Việt:

April 12, 2013

Applying DataTemplate programmatically in Windows 8 Store App

Filed under: Windows Phone,Windows Store 8 — basquang @ 12:04 PM

Sometime you want to apply dynamic layout and content for Windows Store app. For example, when user click on button or changing the windows orientation. In that case, you could use animation and StoryBoard. But sometime you could not and need to implement by code. In this article I will present to you how to apply DataTemplate for a FlipView control programmatically. You can write down the DataTemplate directly in code or loading from XML file.

To Apply DataTemplate directly from code

You similar following code to apply DataTemplate from code.

StringBuilder templateXml = new StringBuilder();
builder.Append("<DataTemplate xmlns=\"\">");
builder.Append("<!—your layout and content control defines here-->");
DataTemplate template = (DataTemplate)XamlReader.Load(templateXml.ToString());
flipView.ItemTemplate = template;

To Apply DataTemplate from XML file

First of all, your XML template file must be added to your project with Build Action as Content. And the format of the XML template file similar to:

<?xml version="1.0" encoding="utf-8"  ?>
<DataTemplate xmlns="">
<!—Your layout and content control defines here-->

Now in code you will read the xml file similar like this

string xmlTemplatePath = Path.Combine(Package.Current.InstalledLocation.Path, "Templates/DayDetailDataTemplate.xml");
XDocument templateXml = XDocument.Load(xmlTemplatePath);
DataTemplate template = (DataTemplate)XamlReader.Load(templateXml.ToString());
flipView.ItemTemplate = template;


I think this technical is not only used in Windows Store app, but it also can be used in Windows Phone app! Do you think so?

Blog at