Category Archives: XAML

How To: Use XAML and DirectX with C++ and create a compelling Windows Store app

One of the great benefits of using C++ to write Windows Store apps is the ability to mix and match various components and create compelling user experiences. There are a variety of apps that use XAML and DirectX together and have built delightful user experiences. For example, there is the FreshPaint app in the Windows Store that allows free form panting using touch or the OneNote app which allows for, as you know, note taking using a stylus (along with keyboard support).

However, if you want to take a look at code and learn from the experts and masters who have built such apps, there are very few options. One such code base is Project Austin which is a sample built by the C++ team to demonstrate using C++ (and CX) along with XAML and DirectX to build a great note taking app. Today’s post, however, is not about Project Austin. It is about a cool sample built by a colleague and C++ enthusiast, Thomas Petchel. Tom built a cool app named Weathr, which he describes as “3D weather app for Windows 8.1 using C++, DirectX, and XAML“. I cannot agree more. This is the best weather app I have seen in a long time and it shows in the user experience. Tom has also made the sources available for anyone to check out and play with. If you are serious about learning how to build such great experiences in your Windows Store apps, please check out the code. And if you make changes to the code, please ensure you contribute back the changes. This ensures that all the folks get the new stuff!!

I can talk about code and design, but I would leave that out for fellow programmers. The app is not on the Store though. So if you want to get the app, you have to build the sources J

Cheers and Happy Holidays!

-Sridhar

Will there be an update for “Modern C++ and Windows Store apps” for Windows 8.1?

With Windows 8.1 now released as a Consumer Preview enabling developers to try out and begin building apps for the new Operating System, I wanted to let folks know if there is an updated version of my book, “Modern C++ and Windows Store apps” under development.

When I began contemplating writing a book about Windows 8, I did not want to just show how to build Windows Store apps using C++ /CX and XAML. That would probably have been a great disservice to C++ developers since it would have restricted the scope of the book to just XAML. Don’t get me wrong. XAML is a great UX framework but I wanted to show how the power and flexibility of C++ and C++ /CX can be used to build a vide variety of apps that could be run both on the Desktop and Modern.

The more I thought about what to talk about in the book, the more my ideas began to crystallize around narrating the “C++ Renaissance” at Microsoft and in the industry. Discussing the “C++ Renaissance” is a vast topic in itself and I had to make a few hard decisions on the list of topics. After multiple deliberations, I ended up discussing the following topics:

  • Show the simplicity of developing Windows Store apps using C++ /CX
  • Important concepts of C++11
  • Introduction to C++ /CX
  • A High level tour of XAML
  • Using C++ /CX to combine XAML and DirectX
  • Advanced GPGPU Programming by using C++AMP in Desktop and Windows Store apps.
      • Under the covers of the Windows Runtime and the Windows Runtime Library (WRL)
      • Introducing the new native unit test support in VS2012.
      • Debugging tips for Windows Store apps
      • Performance tips for using XAML
      • Introduction to Windows Azure Mobile Services
      • A sneak preview of Windows Phone 8 “shared code”.

One of the ideas that I steadfastly took while developing samples and the narration was to focus explaining how C++ developers should be using XAML/DirectX interop techniques to make their apps stand apart from pure XAML or WWA counterparts. XAML/DirectX interop is really the “super pill” that can help C++ developers take full advantage of both the retained mode benefits of XAML and the immediate mode rendering provided by DirectX. When coupled with C++AMP, this has the added advantage of eking out maximum performance from the available hardware for all of your workloads.

With Windows 8.1, while XAML got a host of new controls, using those controls by itself is not an impossible task if you have already worked your way through my book. There simply is no point creating a new version of the book, when the fundamentals have already been discussed. All of the new updates are important but they are not breaking changes or stuff that is hard to incorporate. What is really interesting is the changes to the XAML/DirectX interop types. Does it warrant the creation of a new version of the book to explain 4 new interop types? I don’t think so. It, however, does merit explanation. So, going forward, I will begin posting content about the updated XAML/DirectX interop types. I will also update the samples from my book to show how to move code from Windows 8 to Windows 8.1. I hope that is of more value to readers instead of coming up with a new version of the book. What do you think? Please do let me know.

If you have noticed the topics I discussed in my book, attentive readers must have noticed that I did not discuss any communications or network API in the book. Is it a harbinger for things to come in future? Stay tuned for updates Smile

-Sridhar

What’s new in XAML for Windows 8.1?

//BUILD 2013 concluded last week and there was a ton of stuff to assimilate. I will attempt to summarize a few important changes for C++/XAML/DirectX developers in this blog post., focusing exclusively on the XAML/DirectX Interop scenarios.

If you are interested in knowing what is new with just the XAML framework (new controls, binding features etc), check out this great video from Tim Heuer.

New Stuff for XAML/DirectX interop scenarios using SwapChainPanel

1. A new SwapChainPanel control present in the Windows::UI::Xaml::Controls class.

2. In Windows 8, you were restricted to creating a full screen SwapChainBackgroundPanel and the swap chain had to be present at the root of your control hierarchy. The new SwapChainPanel controls removes these restrictions.

3. This does not mean you can have hundreds of SwapChainPanel controls in your app (Well, not even in the low double digits). Turns out using too many SwapChainPanel controls incurs a heavy cost. So restrict them to at the most 3 or 4. Do not go beyond that.

4. It is composable like any normal XAML element. You can have text layered below or above the control and have the XAML framework render content.

5. A Size Changed notification event provides for crisp re-drawing of content.

New Stuff for XAML/DirectX interop scenarios using the new SiS/VSiS

1. Has updated methods for faster D2D drawing by using drawing with a Direct2D DeviceContext.

2. Using the D2D DeviceContext allows the framework to batch the drawing requests.

3. Supports multi-threaded drawing.

4. Has new methods, SuspendDraw and ResumeDraw to enable you to suspend drawing operations and resume them later.

5. No longer needed to call BeginDraw on the XAML UI thread. In fact, BeginDraw, SuspendDraw and ResumeDraw can be called from any thread.

6. EndDraw should still be called on the UI thread. This allows the XAML framework to update the scene.

SwapChainPanel with Independent Input

1. The new SwapChainPanel now has support for processing touch, pen and mouse input on a background thread. This provides a path for low latency interactivity and high performance.

These are some of the high level changes. I encourage all of you to check out the excellent //BUILD 2013 talk by Bede Jordan,  a Senior Development Lead on the XAML team.

Enjoy the new C++/XAML/DirectX interop stuff in Windows 8.1

-Sridhar

A getting started template for creating XAML/DX apps using C++ and the SwapChainBackgroundPanel

This post comes courtesy of Wayne Ransier.

Start a XAML/C++ project in Visual Studio 2012 with the default Blank Template and replace the generated <Grid> element with a <SwapChainBackgroundPanel>

<SwapChainBackgroundPanel x:Name="DXSwapChainPanel">
</SwapChainBackgroundPanel>
If you build the solution now, the code compiles but the app crashes at runtime. The fix for the crash is simple.
Replace the OnLaunched method of your App class with the below code
void App::OnLaunched(Windows::ApplicationModel::Activation::LaunchActivatedEventArgs^ args)
{
    m_mainPage = ref new MainPage();    
    Window::Current->Content = m_mainPage;
    Window::Current->Activate();
}

 

The code to replace the OnLaunched method of the App class is missing from the step by step application tutorial of the DrawIt application.

You can get the complete details about why the crash happens here.
A simple project template with this fix applied can be found here.
Copy this project template (the zip file) to “C:\Users\<username>\Documents\Visual Studio 2012\Templates\ProjectTemplates” and re-start Visual Studio 2012.
A new template with the name SCBPCppProject will be listed when you select Visual C++ project type in Visual Studio 2012.
Another nifty tip to keep in mind and this is obtained from the DrawIt sample from “Modern C++ and Windows Store apps” book.
There are a few styles that I have created for the ApplicationBar and placed them in Styles.xaml. In the sample I do not use the default generated styles from StandardStyles.xaml.
You can see the change in app.xaml for the DrawIt project.
<ResourceDictionary.MergedDictionaries>

    <!-- 
        Styles that define common aspects of the platform look and feel
        Required by Visual Studio project and item templates
     -->
    <ResourceDictionary Source="Styles.xaml"/>
</ResourceDictionary.MergedDictionaries>

 

Merging only the resources your application requires, into the Resource Dictionary is a nifty optimization.
A version of the sample that supports multi-touch can be downloaded here.
-Sridhar

Purchase Modern C++ and Windows Store apps in India

Hi,

Wanted to provide a quick update on the availability of my book, “Modern C++ and Windows Store apps”, in India.

Get the eBook in Adobe PDF: http://www.infibeam.com/eBooks/modern-c-windows-store-apps-sridhar-poduri-pdf-ebook-download/9780989020800-BEPDF.html

Get the paperback edition: http://www.junglee.com/Modern-C-Windows-Store-Apps/dp/0989020800/ref=sr_1_1?ie=UTF8&qid=1364203192&sr=8-1

Thanks,

Sridhar

[Updated with purchase and discount links] Modern C++ and Windows Store Apps – A book about Modern C++ and native technologies

Over the past few months, I have been writing a book on developing apps using C++ and the various native technologies shipping as part of the Windows 8 wave. Some of these technologies include: C++11, C++ /CX, native XAML, the Windows Runtime, C++AMP, Windows Azure Mobile Services etc. I am happy to announce that the Kindle version of “Modern C++ and Windows Store apps” will be available shortly for purchase via the Amazon website. A paperback edition will also be available soon.

For purchasing the paperback edition of the book, please visit this link. You can use the discount code 5C56GCKN to get 20% discount off MRP.

For folks interested in an electronic edition, you can purchase a Kindle edition on Amazon

A quick update: This is just me self-publishing the book thereby bringing the work to its logical conclusion.

For the benefit of everyone, I am listing some of the topics that await anyone who picks up a copy of this book. For the more adventurous amongst us who would rather prefer to play with code, the book samples can be downloaded from the Downloads section of this blog.

The new native API
What is a Windows 8 App?
Quick walkthrough of a Windows 8 App

Hello Modern C++
Move semantics
Welcome to the Component Extensions
The C++ /CX Type System
Asynchronous Programming in C++ /CX
Building a WinRT component using C++ /CX and ISO-C++
Guidance on the use of C++ /CX

Introduction to XAML
Hello World with XAML and C++ /CX
Basic XAML Syntax
Using Panels to Layout UX
Basic XAML Controls
Windows 8 Signature XAML Controls
Handling Events
Markup Extensions
Data Binding
Binding to a Data Model
Building a XAML custom control
Using Animations in XAML Controls

Introduction to XAML + DirectX
SurfaceImageSource
VirtualSurfaceImageSource
Design considerations when using SiS and VSiS
SwapChainBackgroundPanel
The DrawIt Application – C++, XAML and DirectX

The C++ AMP Library
The ImageEffects application

Playing by the rules of the Windows Runtime
Introduction to the Windows Runtime Library
Hello World XAML App using Windows Runtime Library

Getting Started with Windows Store apps and Windows Azure Mobile Services
Creating a simple Windows Store app with Windows Azure Mobile Services
Supporting Push Notifications using Windows Azure Mobile Services

And more….

I had a lot of fun writing this stuff and learning along the way. I hope there are concepts that you can apply to your work as you build apps for the Windows 8 Store using C++.

Please send feedback on the book contents directly to win8book at sridharpoduri dot com

Binding WebView directly to Html Content using C++ /CX

This post is inspired by Tim Heuer’s Html Source extension property that uses the WebView’s NavigateToString method to bind webview directly to Html Content. Tim’s code is written using C#. I wanted a C++ version of the same for one of my sample projects and here it is. Feel free to use it in your projects and let me know when you use it. That would make me happy!

Typical Usage scenarios for this extension:

1. You use the SyndicationClient API from the Windows.Web.Syndication namespace and parse a RSS feed of interest.

2. Your UI is a GridView and each GridViewItem displays one article from the RSS feed parsed above.

3. You want to display formatted HTML content instead of unformatted HTML content as string.

For more information, look at this blog post by Soma.

http://blogs.msdn.com/b/somasegar/archive/2012/08/26/building-an-end-to-end-windows-store-app-part-1.aspx

WebViewExtension.h

#pragma once
#include "pch.h"

using namespace Windows::UI::Xaml;
using namespace Windows::UI::Xaml::Controls;
using namespace Windows::UI::Xaml::Interop;
using namespace Platform;

namespace Callisto
{	
	[Windows::Foundation::Metadata::WebHostHidden]
	public ref class WebViewExtension sealed
	{
	public:

		static String^ GetHtmlSource(WebView^ view)
		{
			if (nullptr == view)
				throw ref new Platform::InvalidArgumentException("view");

			return view->GetValue(HtmlSourceProperty)->ToString();
		}

		static void SetHtmlSource(WebView^ view, Platform::String^ value)
		{
			if (nullptr == view)
				throw ref new Platform::InvalidArgumentException("view");

			view->SetValue(HtmlSourceProperty, value);
		}
		
		
	private:
		static void OnHtmlSourcePropertyChanged(DependencyObject^ o, DependencyPropertyChangedEventArgs^ e)
		{
			auto view = dynamic_cast<WebView^>(o);
			if (nullptr == o)
			{
				throw ref new Platform::NotImplementedException("The HtmlSource attached dependency property is only valid for WebView instances.");
			}
			// Determine new HTML content
            auto newString = dynamic_cast<Platform::String^>(e->NewValue);
			auto newHtml = newString->IsEmpty() ? "<html></html>" : newString;				

            view->NavigateToString(newHtml);
		}

		static Windows::UI::Xaml::DependencyProperty^ HtmlSourceProperty;
	};
}

WebViewExtension.cpp

//
// Copyright (c) 2012 Sridhar Poduri
// Based on Tim Heuer's C-Sharp version available at
// https://github.com/timheuer/callisto/blob/master/src/Callisto/Extensions/WebViewExtension.cs
//
// Licensed under the Microsoft Public License (Ms-PL) (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//    http://opensource.org/licenses/Ms-PL.html
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//
// Derived from http://blogs.msdn.com/b/delay/archive/2011/04/14/quot-those-who-cannot-remember-the-past-are-condemned-to-repeat-it-quot-webbrowserextensions-stringsource-attached-dependency-property-makes-silverlight-windows-phone-wpf-s-webbrowser-control-more-xaml-and-binding-friendly.aspx
#include "pch.h"
#include "WebViewExtension.h"

using namespace Callisto;
using namespace Windows::UI::Xaml;
using namespace Windows::UI::Xaml::Controls;
using namespace Windows::UI::Xaml::Interop;
using namespace Platform;



Windows::UI::Xaml::DependencyProperty^ Callisto::WebViewExtension::HtmlSourceProperty = 
	DependencyProperty::RegisterAttached(ref new String(L"HtmlSource"),  TypeName(String::typeid), TypeName(WebViewExtension::typeid), 
	ref new PropertyMetadata(nullptr, ref new PropertyChangedCallback(OnHtmlSourcePropertyChanged)));


 

 

Once you have this header and cpp file in your solution, using them from XAML markup is pretty easy, such as the simple example below.

<WebView local:WebViewExtension.HtmlSource=”{Binding Content}” Grid.Row=”1″/>

Enjoy!

-Sridhar