Monthly Archives: September 2011

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.

Advertisements
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 , , , , , , , , ,