Tag Archives: UserControl

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

Advertisements
Tagged , , , , ,