Monthly Archives: September 2015

XAML 101: Image and ImageBrush

FacebookTwitterGoogle+Share

Source code for this sample on GitHub: https://github.com/billreiss/xamlnative/tree/master/Xaml101/008_Images

Images are very important to many Windows apps. It could be a user’s avatar, a photo app, or just a way to add some visual appeal, or a hundred other things. There are several ways to add an image, we’ll look at two of them here.

First let’s look at the Image control. We need an image to display, and this can come from the internet, can be packaged with your app, or can come from some other source. First let’s look at an internet-based image. Let’s make the MainPage.xaml Grid look like this:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Image Source="http://xamlnative.com/wp-content/uploads/2015/09/healy.jpg"/>
</Grid>

This is a photo of my good friend and Microsoft Evangelist Joe Healy. Check out his blog at http://devfish.net. Let’s run the app like this and see how it looks:

image

Notice how the image fills the available space but is centered preserving the aspect ratio. This is controlled by the Stretch property, and defaults to Uniform. There are a few other options for this, we can change it to Fill:

<Image Source="http://xamlnative.com/wp-content/uploads/2015/09/healy.jpg" Stretch="Fill"/>

image

Now it fills available space without preserving the aspect ratio. There is also UniformToFill which fills the entire space and preserves aspect ratio but any extra is cut off. There is also “None”, which centers the image in the available space but doesn’t scale it at all.

So far the image takes up all the available space, but what if we want to show it as an avatar next to a tweet or something similar. We would then want to specify its size and have it fit that size.

For this let’s change the alignment of the Image to Left and Top, and set the width and height explicitly:

<Image Margin="10" HorizontalAlignment="Left" VerticalAlignment="Top" Width="70" Height="70" Source="http://xamlnative.com/wp-content/uploads/2015/09/healy.jpg" Stretch="UniformToFill"/>

Now we get something like this:

image

Thus far we’ve been accessing an internet resource for the image, but let’s say you want to make it available offline. One way to do this is to package it with your app. Let’s add a new folder to the project called Images, and then add an Existing Item to that new folder. In my case that is a local copy of healy.jpg.

image

Then in the Image control definition, I can change the Source property to not use a url, and instead use a relative path:

<Image Margin="10" HorizontalAlignment="Left" VerticalAlignment="Top" Width="70" Height="70" Source="Images/healy.jpg" Stretch="UniformToFill"/>

Run the app again and you should see the same result as before.

This looks like an avatar you would see in an app, but Microsoft has decided in their design language that people should be represented as circles. When we want an Image that’s not rectangular, we can use an ImageBrush. Let’s also introduce another control, the Ellipse.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Ellipse Margin="10" HorizontalAlignment="Left" VerticalAlignment="Top" Width="70" Height="70">
        <Ellipse.Fill>
            <ImageBrush ImageSource="Images/healy.jpg" />
        </Ellipse.Fill>
    </Ellipse>
</Grid>

So we have an ellipse the same size as the previous Image, and with the same properties for alignment and margin. The Ellipse has a Fill property which is similar to the Grid’s Background property. Here we specify an ImageBrush with an ImageSource where the ImageSource has the same value of our earlier Image control’s Source property. The ImageBrush also has the same Fill property options as the Image control. Here is the result:

image

That’s enough of Image and ImageBrush for now, we will see these again in later posts.

XAML 101: The LinearGradientBrush

Source code for this sample on GitHub: https://github.com/billreiss/xamlnative/tree/master/Xaml101/007_LinearGradientBrush

We will pick up where the last post left off where we had a red SolidColorBrush on the Grid for MainPage.xaml:

<Grid>
    <Grid.Background>
        <SolidColorBrush Color="Red"/>
    </Grid.Background>
</Grid>

There are other default Brushes available, and this post focuses on the LinearGradientBrush. What this Brush does is let you specify a sequence of colors that will be used to create a color gradient pattern.

NOTE: There is a RadialGradientBrush for creating a circular or elliptical gradient that was available in Silverlight and WPF, but it is not currently supported in UWP apps so we won’t cover it at this point. If you want RadialGradientBrush added to Windows 10 Universal Apps vote for it here: http://visualstudio.uservoice.com/forums/121579-visual-studio/suggestions/5890481-please-add-the-radialgradientbrush-to-windows-stor

Let’s change the Background to use a LinearGradientBrush:

<Grid>
    <Grid.Background>
        <LinearGradientBrush>
            <GradientStop Offset="0" Color="Red"/>
            <GradientStop Offset="1" Color="Blue"/>
        </LinearGradientBrush>
    </Grid.Background>
</Grid>

The first thing you will probably notice is the GradientStop elements. These values go from 0 to 1, and you can specify any value in between. We will see that soon. The result looks like this:

image

By default, the gradient goes from the upper left corner to the lower left corner. We can change this by modifying the StartPoint and EndPoint poprerties:

<Grid>
    <Grid.Background>
        <LinearGradientBrush StartPoint=".5,0" EndPoint=".5,1">
            <GradientStop Offset="0" Color="Red"/>
            <GradientStop Offset="1" Color="Blue"/>
        </LinearGradientBrush>
    </Grid.Background>
</Grid>

And the result is like this:

image

Here we changed the start point and end point so that the X value is .5, and the Y value goes from 0 to 1. The default is a start point of 0,0 and and end point of 1,1. We can do a gradient along the X axis like this:

<Grid.Background>
    <LinearGradientBrush StartPoint="0,.5" EndPoint="1,.5">
        <GradientStop Offset="0" Color="Red"/>
        <GradientStop Offset="1" Color="Blue"/>
    </LinearGradientBrush>
</Grid.Background>

image

You can have any number of gradient stops, let’s add another:

<Grid.Background>
    <LinearGradientBrush StartPoint="0,.5" EndPoint="1,.5">
        <GradientStop Offset="0" Color="Red"/>
        <GradientStop Offset=".5" Color="Yellow"/>
        <GradientStop Offset="1" Color="Blue"/>
    </LinearGradientBrush>
</Grid.Background>

image

The colors blend from one to the other between the gradient stops, but let’s say you wanted a sharp transition. We can do something like this:

<Grid.Background>
     <LinearGradientBrush StartPoint="0,.5" EndPoint="1,.5">
         <GradientStop Offset="0" Color="Orange"/>
         <GradientStop Offset=".5" Color="Red"/>
         <GradientStop Offset=".5" Color="Yellow"/>
         <GradientStop Offset="1" Color="Blue"/>
     </LinearGradientBrush>
 </Grid.Background>

By having 2 gradient stops at the same offset, the transition between those 2 colors is immediate and gives us a sharp change in color:

image

So far the StartPoint and the EndPoint have encompassed the entire surface. What if we change the EndPoint to halfway?

<LinearGradientBrush StartPoint="0,.5" EndPoint=".5,.5">
    <GradientStop Offset="0" Color="Orange"/>
    <GradientStop Offset=".5" Color="Red"/>
    <GradientStop Offset=".5" Color="Yellow"/>
    <GradientStop Offset="1" Color="Blue"/>
</LinearGradientBrush>

And this is the result:

image

There is another property on the LinearGradientBrush called SpreadMethod which determines what happens in the parts of the surface that the brush doesn’t cover. This deafaults to “Pad”, where the extra area is filled with whatever the last color was. There are a couple of other options, one is Reflect:

<LinearGradientBrush StartPoint="0,.5" EndPoint=".5,.5" SpreadMethod="Reflect">

image

Pretty cool. The other is Repeat:

<LinearGradientBrush StartPoint="0,.5" EndPoint=".5,.5" SpreadMethod="Repeat">

image

A long post, but there are a lot of options with this Brush. Be creative and try your own combinations.

Blend for Visual Studio 2015–A New Beginning

When doing XAML development, some things are just so much easier to do in Blend for Visual Studio (formerly called Expression Blend). These usually lean towards the designery side of things, creating styles and templates, adding animations and visual states, etc. This being said, Blend had some real drawbacks. It could be slow, especially on large solutions. It didn’t support solution folders and your solution would show up as a flat tree structure. The XAML source editor didn’t provide as much functionality as was available in the Visual Studio editor. Source control wasn’t fully featured, and a few other things.

This has all changed with Blend for Visual Studio 2015. It is now based on the same shell as Visual Studio, even though it still runs as a separate application. This means it can take advantage of what Visual Studio provides out of the box instead of implementing its own thing for the features above, and provides parity with Visual Studio 2015. On top of this it still provides its own unique feature set to help with all of the things it was good at before. Kind of like a best of both worlds scenario. If you haven’t looked at Blend in a while, it’s a good time to take another look. It will make you a much more productive XAML developer.

image

Now that the Blend team can focus on providing features instead of spending time duplicating what Visual Studio provides, I look forward to seeing what they come up with in the future to make XAML development easier. If there are any features you specifically want to see, go to the UserVoice site for Blend here and let the team know: https://visualstudio.uservoice.com/forums/121579-visual-studio/category/90110-blend-for-visual-studio

XAML 101: Colors and SolidColorBrush

Source code for this sample on GitHub: https://github.com/billreiss/xamlnative/tree/master/Xaml101/006_SolidColorBrush

Create a new “Universal Blank App” project, or use the HelloXaml project we created earlier. In MainPage.xaml, change the Grid to look like this:

<Grid Background="Red">
</Grid>

When we run this, we just get a red background for the page:

image

Looks pretty simple, but there is a bit more going on behind the scenes, and the UWP framework does some things for us to help out. First of all, Red is a predefined color. There are many of these, and it can be easier and more descriptive than specifying a hex value. That being said, this is equivalent to what’s above:

<Grid Background="#FFFF0000">
</Grid>

The first “FF” is the transparency value, and a value of “FF” is fully opaque. The the other pairs are red, green, and blue respectively. So we have full red, and no green or blue. The transparency value is optional if you want no transparency, so this is also equivalent:

<Grid Background="#FF0000">
</Grid>

 

Now if you look at the definition of the Grid.Background property, it looks like this:

image

So we see that Background is of type Brush, and not Color. Most places in XAML that take a color (backgrounds, border colors, foregrounds) are of type Brush. When a color is specified for Background, like Red, this value is converted automatically to a SolidColorBrush for you, so that you don’t have to use the longer form of specifying a SolidColorBrush of type Red, but we can do that:

<Grid>
    <Grid.Background>
        <SolidColorBrush Color="Red"/>
    </Grid.Background>
</Grid>

And this is exactly the same when it is drawn.

There are some more interesting brushes available and in the next post we will look at another of these, the LinearGradientBrush.