Tag Archives: WinRT

Displaying Webcam Preview in a Metro App Using WinRT and XAML

Note: the WinRT XAML Toolkit library that I share here has a CameraCaptureControl that makes it simple to host the camera preview, take pictures or record videos.
Note: This article is based on Windows 8 Developer Preview version and it should still be relevant with Windows 8 RTM, but please let me know if that is not the case.

I was looking at the controls available in WinRT () and I’ve stumbled upon this control called – CaptureElement. What it does is it “Represents a media capture from a capture device, for example recorded video content.” I thought I’d give it a go and see if I can display the output from the webcam on screen – which could be useful for AR (Augmented Reality) applications or even just for fun. This is how you do a preview then…

Continue reading

Advertisements
Tagged , ,

GridSplitters – Part 3: Limiting the Range of a GridSplitter

Sometimes I look at what people search for when they hit my blog and see some trending questions that don’t seem to have easily findable answers. This one seems to be related to how to set the limit for moving a GridSplitter… Well – you don’t actually touch the GridSplitter to do that. You need to modify your RowDefinition or ColumnDefinition. In a similar way that you can define MinWidth/MaxWidth/MinHeight/MaxHeight on any FrameworkElement – you can do MinWidth/MaxWidth on a ColumnDefinition and MinHeight/MaxHeight on a RowDefinition. By setting these – you limit how much the GridSplitter will be able to resize them. I actually take these into account in my SimpleGridSplitter implementation, so if you have lots of rows or columns in your WPF app – you can use that one. Silverlight works fine there with its own GridSplitter.

Continue reading

Tagged , , , , ,

Beginning WinRT Development – Part 2: Learning Resources

This is just a short post that I will likely update in the future. A where to start/how to ramp up sort of link list on WinRT development.

Main Reference Resources

News & Blogs

Tagged , , , ,

Dissecting WinRT UserControl

UserControl seems to be one of the most commonly used controls in XAML languages. It most often is at the root of your XAML file structure and usually encapsulates reusable pieces of XAML. Let’s take a look at the class hierarchy and see if it is different than in Silverlight:

Object

DependencyObject

UIElement

FrameworkElement

Control

UserControl

An Object in WinRT (WinRT being my shorthand for Immersive/Metro Windows 8 apps) is just a .NET System.Object.

DependencyObject “represents an object that participates in the dependency property system. DependencyObject is the immediate base class of many important UI-related classes, such as UIElement, Geometry, FrameworkTemplate, Style, and ResourceDictionary.”. It is then the base class for all controls and is required base class for use with bindings, (property value-) animations etc.
Comparing to Silverlight it is missing the CheckAccess property which you can use in Silverlight to see if you are running on a dispatcher thread, but it does still have the Dispatcher property which then gives you CoreDispatcher.HasThreadAccess to possibly gain the same information. Otherwise it has identically named members in both WinRT and Silverlight – methods for clearing, getting and setting dependency property values that depend on default values, set values, bindings, animations and possibly property inheritance.

UIElement is a base class for most of the objects that have visual appearance and can process basic input in a user interface.”. It provides access to events for handling touch, drag&drop, focus, keyboard input, pointer/stylus input (not directly supported in Silverlight), methods for handling layout and a Transitions property that is new to WinRT.

Looking at the stylus events – I started playing with the CapturePointer method (it captures stylus input to only be handled by the specific UIElement) which reminded me of a non-default way of testing WinRT apps – by using a Simulator. You go to project properties/Debug and switch Target Device to Simulator, then simply hit F5.

image

It looks a bit like a Surface or Windows Phone simulator, runs as a remote desktop connection to another session on your own machine and helps when you want to monitor VS Output window while running a full-screen immersive app…

image

Tagged , ,

Beginning WinRT development

I finally found some time to take a look at Windows 8 development + a shiny Build edition Samsung Series 7 Slate device, so it is time to start taking apart this WinRT development thing.
I am starting by setting up my development and blogging environment. I installed Live Essentials to use my usual Live Writer, which took a while since it first had to enable .NET 3.5… Well, it is good to know 3.5 is alive and kicking! 🙂

Now I still haven’t figured out the best way to paste code in Live Writer – VS Paste plugins output weird frames, while copying through Word looks nice, but it breaks quotes and some other characters, besides – I don’t have Office on this unit, which also means – I can’t use OneNote to do screen clippings. Well – I’ll figure something out I guess.

Creating a simple Windows 8 app

When you start Visual Studio 11 Express and start a new project you get to choose a couple of things:

image

First – the language – JS/VB/C#/C++. I chose C#. This is what I know best and while I believe it is worth learning something new – I still believe C# and .NET is in many ways better than JS+HTML5+CSS and what these are best is in attracting developers who already know these best.

Then – picking a project template – I just selected Application, since I want to focus on the basics first before I look at the cooler controls, whatever the temptation says.

I end up with the following minus the yellow rectangle that I added to see some content in the window and the one attribute per line formatting that I prefer:

<UserControl
    x:Class="Application1.MainPage"
    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"
    mc:Ignorable="d"
    d:DesignHeight="768"
    d:DesignWidth="1366">
    <Grid 
        x:Name="LayoutRoot" 
        Background="#FF0C0C0C">
        <Rectangle
            Fill="Yellow"
            Width="200"
            Height="200" />
    </Grid>
</UserControl>

When I hit F5 – I get the below image displayed on full-screen:

image

Great! A simple application is indeed very similar to Silverlight or WPF. I wonder why the default background is almost black… It looks pretty cool when I change my rectangle background to black – almost a screen test: Smile

image

I mentioned one attribute per line – this is my preference and recommendation in XAML development as it reduces the need for horizontal scrolling and makes reviewing and merging changes easier. It turns out it works just as well in VS11Express as it does in VS10 for Silverlight and WPF – just go to Tools/Options/Text Editor/XAML/Formatting/Spacing (yeah, just) – and click to “Position each attribute on a separate line” and uncheck “Position attribute on same line as start tag”:

image

Now while at it – also save yourself some time and go to XAML/Miscellaneous and check “Always open documents in full XAML view” – this gives you more space to code your XAML and prevents delays when VS loads the XAML designer.

image

It seems like the root control in XAML of a default screen type in WinRT is a UserControl – just like in Silverlight – another point for compatibility with Silverlight and against WPF where you usually deal with Window objects.

What is a UserControl? According to MSDN – it has same inheritance hierarchy as the one in Silverlight, though it throws in a bunch of interfaces – a side effect of WinRT’s close ties to C++ and cross-language support I guess:

image

Tagged , , , , ,

Image.NineGrid in WinRT

WinRT adds this sweet new property for an Image control called NineGrid. It simplifies using images as frames around a content that does not have predefined dimensions or when you want to use a simple image that is smaller than the end result frame, but is stretched in some parts.

 

The below sample has a reference, Image control with unscaled bitmap – a white 100×100 rectangle with a big circle aligned to all its borders and small circles in each of the corners. It also has a Grid with some sample controls within it, layed out with a margin of 50 on each side and an Image control as a background with the same bitmap used as in the reference image, but stretched in such a way, that the quarters (50×50) of the original big circle form corners of a frame and the frame sides are just stretched pixels from the vertical and horizontal cross sections of the bitmap crossing in the middle of the source bitmap.

<Grid
    x:Name="LayoutRoot">
    <!– Background –>
    <Rectangle
        Fill="White" />
       
    <!– Reference Image –>
    <Image
        Source="/Images/Frame.png"
        VerticalAlignment="Top"
        HorizontalAlignment="Left"
        Stretch="None" />
       
    <!– Grid containing the frame in the background and some controls inside –>
    <Grid
        VerticalAlignment="Center"
        HorizontalAlignment="Center"
        MinHeight="100"
        MinWidth="100">
        <!– Reference image –>
        <Image
            Source="/Images/Frame.png"
            NineGrid="50" />
        <!– Sample controls –>
        <StackPanel
            Margin="50"
            VerticalAlignment="Top"
            HorizontalAlignment="Left">
            <TextBlock>TextBlock</TextBlock>
            <TextBox
                Text="TextBox"/>
        </StackPanel>
    </Grid>
</Grid>

Result:

image

As you can see – the ornaments at the corners of the source image have preserved dimensions, while the frame can stretch to any size as long as it is bigger than 100×100. Note the MinWidth and MinHeight properties on the Grid – the image won’t stretch to be smaller than the frame of the nine grid!

Another place to look at a good description of a nine-grid is in another SDK – for Windows Media Center, that has a similar control – here.

Tagged , , , ,

Windows RunTime – Timeline of Influences

(Note – while I work for Microsoft, my team was not involved in developing the technologies mentioned below and the thoughts and opinions on this blog are mine only)

This is what Microsoft showed at Build:

image

Microsoft at its spirit – really trying to support everything and everyone – the slide is actually oversimplified, but the Desktop Apps part seems to encompass and indicate support for all the legacy apps, languages and APIs, while Metro style (or Immersive) Apps support the same languages on top of a new set of APIs. Whichever language you used before – you can still use it to create desktop or web applications as well as the new Metro style apps. The APIs are different, but seem to be highly influenced by the .NET technologies.

Thinking about the above made me think about all the influences that brought the above to life. Here’s a timeline I came up with:

image

Complicated? You bet!

Timeline: the blocks should be placed fairly chronologically top to bottom.
Dates: were picked arbitrarily from Wikipedia based on dates of initial public appearance or if available – on release dates of the APIs/frameworks/host environments.
Colors:
L
ight blue (aqua) blocks represent languages, with the shaded ones being the languages available for use with WinRT.
Purple blocks represent Windows API and frameworks that wrap its UI components.
Dark blue blocks show DirectX, DX-based WPF and WPF derived Silverlight (desktop and mobile).
Arrows indicate successors (eg. Winforms –> WPF), dependencies (eg. DX –> WPF) or influences successors (eg. VCL –> WinForms).

Tagged , , , , , , , , ,
Advertisements