Posts Tagged ‘ Windows Phone ’

Creating Buttons in Expression Blend

When I create an application, I am thinking about making the UI as appealing to the user as possible. The first thing the user sees from my application is the little icon in a long list of applications. Let’s assume the user likes this icon. Then most likely the user will read the description, and when I am lucky the user likes it. The next thing the user does is checking out the screenshots. And only then the user is convinced to download my application or not. It helps a lot if the UI looks appealing.

Now, most applications have buttons. In Visual Studio the options of creating buttons are limited. That’s why for this blog post I am going to show how easy it is to create a button in Expression Blend.

I am just going to start with launching Expression Blend and creating a new project:

File –> New Project –> Select Project Type (Windows Phone) –> Windows Phone Application.

I give it a name and choose the language (C#), the version (7.1) and the location where my project is going to be saved at.

Then I am going to add a Button control from the ToolBox to the LayoutRoot. Now I am going to create a custom style for my button. In order to do that I am editing the default button template. ‘ReTemplating’ or ‘Styling’ is one of the most powerful features of Silverlight. What that means is being able to completely replace the ‘look and feel’ of UI elements.

Let’s do that. I right-click on the selected button and select ‘Edit Template’ –> ‘Edit a Copy’.

On the ‘Create Style’ resource dialog I give the style a name and click ‘OK’:

In the Object tree I can see that a Button of multiple parts is composed. With a ‘Template’ I have the ability to replace these parts. With a ‘Style’ I can only change the appearance from outside by changing public properties. ‘Styles’ consists of property setters and when you apply a style it sets the properties on the element to the styles’ values:

Before I continue, I write down the default size of my button, so I remember it later.

Now I add three rectangles to the Grid of the Template and name them:

Now I select “dropShadowRect” and change the rectangle to a rounded rectangle. I do that by changing the Radius settings in the Appearance panel:

I do the same for the other two elements.

Now it is time to apply a solid color (black) to the ‘dropShadowRect’:

If you don’t see the element you are currently working on, you can use the Show/Hide property on the ‘Object and Timeline’ panel:

Now I am going to modify the ‘reflectiveRect’ and give it a linear gradient brush, that goes from a bright color at the top, then gets darker three quarters down and finally brightens up again at the end. I use the ‘Gradient Tool’ from the Tools panel:

Note: It is important to set the ‘Stroke’ property of this ‘reflectiveRect’ rectangle to “No brush”.

For the ‘transparentRect’ I select the right GradientStop, apply a linear gradient brush fill, remove the Stroke and make the rectangle transparent by adjusting the ‘Alpha’ to 0%:

Note: With a dark background canvas I cannot see the changes to my transparent element. I solve this problem by applying a bright solid fill.

Finally I need to add the “ControlPresenter” back:

That was easy. I just created my button:

 

To be continued…

 

 

Image Background, Orientation Changes, Control Visibility

I have been thinking about getting an app out into Marketplace myself. I have come up with a few ideas. I don’t know, yet, if I can make them work, but I am going to give it a shot for sure.

Of course, with that idea in the background, there is still so much to learn about developing for Windows Phone 7. But, with what I have learned so far, I think, I could actually give it a try.

I will, of course, report every step here on my blog.

Anyway, before I can start that, I need to have a look at a few little things. Like how to style the background of my app using an image. After all, I want to give it an unique look. Otherwise it’s going to be another application with just a black background.

Another thing I want to look at is what happens when I turn the emulator. Will my application be displayed right? And if not, how can I make it right? And how does that change the layout of my application?

So, there still are a few things, that I need to know before I really can get started working on a real application.

So, I am just going to create another project in Visual Studio.

First thing I want to do is running the app and rotating the emulator:

Well, that’s not going to work. Everything is locked in places. The way to fix that is a simple property on the Application page:

I am changing that property in the property window:

This is going to change the Orientation property in XAML, and I can turn the emulator either way when running the application:

Now everything flips into place, depending on how I turn the emulator, or later the device.

Let’s move on and set a background. Now, the easy thing to do, if I want to move away from that black background is, of course, to change the background color. But I want an image background.

Here is how I do that: I put my mouse cursor in the LayoutRoot Grid and then I can go to the property window where I can change the background property from Transparency to the image I choose as my background:

So far, so good. Let’s run it:

It is re-orienting itself when I turn the emulator. The only thing left here is to set the proportions right. I do that by changing the Stretch property of that image from Fill to UniformToFill.

Now I drag and drop a Textblock control into my main form:

The problem now is that I have to make sure that my text is readable with the image in the background. A useful control for that is the Rectangle control. Let’s drag and drop one right on the Textblock control. I am going to edit that a little in my XAML. What I want is the Rectangle control behind the Textblock control but in front of the image itself. First thing I do here is to modify the opacity of the Rectangle control.

When I run it now and turn the emulator I am yet running into another problem:

Both my Textblock and my Rectangle do not stretch to the entire width of my emulator when it is in landscape mode. In order to fix this I am setting the Horizontal Alignment of both controls to “Stretch” and set the left Margin setting of both controls to “0”. Finally I am going to remove the Width property for both controls completely:

When I run it now my Textblock and my Rectangle nicely fill the width:

Let’s move on.In one of my ideas for an application I need to allow the user to edit values that at this point are read-only. I want the Textblock to flip into a Textbox. There is a little trick. Let’s drag and drop a Textbox onto the designer:

I am going to set the Textbox properties equal to the Textblock properties in the XAML. I am also clearing out the text property of the Textbox. The text property of the Textblock I am changing to “Hello World”.

Now I need one more control, a button:

Now I have to write some code inside my event handler. When somebody clicks the “Edit” button I want the Textblock to flip to the Textbox and back to Textblock when the button is clicked a second time:

What I am doing here, is first checking if the Textbox is visible. If so, then the first codeblock (“if”) is executed. If not, then the second codeblock (“else”) is executed. So basically I am toggling between the Visibility of the Textbox and the Textblock. When somebody clicks the Edit button then I want to retrieve the value of the Textbox and put them back in the Textblock. One more thing to do. In my XAML I am going to set the initial Visibility of the Textblock to “Visible” and the initial Visibility of the Textbox to “Collapsed”:

Let’s see this in action. When I click the Edit button the application hides the Textblock, opens up the Textbox and puts in the value so that I can edit it:

When I click the “Save” button it collapses the Textbox, opens up the Textblock again and puts the value from the Textbox back in the Textblock.

To sum it up, I have set an image background, I made sure that the proportions are right both in portrait mode and in landscape mode, I made sure that my text stays readable with an image in the background and I allow the user to edit values.

With that said I think it is time to start working on an application.

 

To be continued…

 

 

GPS, Location API and Calling Web Services

The Windows Phone 7 is equipped with a GPS interface and couples that with the Windows Phone Location Service API within the .NET Framework class library. It can be used to determine the Latitude and Longitude for the application run on a Windows Phone device. It can be used for some pretty creative purposes.

As a matter of fact there are some companies that use Geo Location, e.g. that big coffee chain from Seattle (not mentioning the name here), allowing “check-ins”.

I am going to have a look at how this works. Unfortunately, since the Windows Phone Location Service API relies on a phone’s physical hardware for the GPS, and I, in this example, will only work with the emulator, I might not get a completely satisfying result, But I am going to try it anyway.

I am going to try and retrieve the current location of the phone, or in this case the emulator, through the Windows Phone Location Service API. At least I am going to show the approach how it can be done. I am going to use the Latitude and Longitude of a specific location, if indeed the application is running in an emulator as opposed to a physical device someday.

Then I am going to call a Web Service that will allocate the Latitude and the Longitude to a city, state and country.

A Web Service is just like a method that runs over the internet. Somebody hosts a Web Service and exposes the code block’s name (in a sense), what parameters are accepted and what it will return back. I can call that over the internet and then retrieve the result back and do something meaningful with it.

I create a new project with just a textblock, where I clear out the content, and a button where I change the content to “Find Me”:

I am just going to double click the “Find Me” button to get to the click event in my C# code.

The first thing I need to do is to get access to the Windows Phone Location Service API, which I currently don’t have. I don’t, because the way that .NET Framework class library is built, it is split up into a number of different dll files or assembly files. The reason for that is that I don’t have to load more of the library than I actually need. With so many classes available it would make it so overweight to keep it all in one place and make it all available at the same time. So, all I need to do is just to pick and choose all the pieces that I need, and include that particular dll file into my project.

If I open up the References folder, I can see all the dll files that are there already:

Those dll files have been automatically added when I created the new project. The template would add these. It kind of knew I would need some of those features in almost every application I build.

This is the first time that I’ve come across a feature that doesn’t fit inside one of these dll files. I am going to have to add a reference to that:

I now can see it in the list of dll files. Now I have to add a little using statement:

Now I should be able to add some code inside my button click event:

So, I either retrieve the latitude and longitude on the phone device. If I am not running the application on a physical device, but on the emulator, then I have defaulted it to a specific value, so that I get some satisfaction by running this example.

Now, that I have that location information I need to send it off to a Web Service in order to determine the city, state and country of either the retrieved latitude and longitude or the default value.

Again, a Web Service is like a method that communicates over the internet, usually over port 80 or rather over http, just like the rest of the internet.

The conversation between my client application and the web server that hosts the Web Service is in an XML format called SOAP (Simple Object Access Protocol). Fortunately I don’t  directly have to deal with the XML, rather the SOAP message. Visual Studio and the .NET Framework will hide those from me, so that I can work with the Web Service as if it were any other class or method in the .NET Framework class library. This is called a proxy class.

The proxy class is created, based on the information that Visual Studio initially retrieves from the Web Service’s definition the first time I try to connect to the Web Service using Visual Studio. The proxy class then handles all of the little details of working with that Web Service, so that I don’t have to.

Here you can find some Information about the Web Service I am going to use. I am choosing MSR MapsService WSDL, then there opens up a page with a list of all the methods that belong to that class. I need that Url : http://msrmaps.com/TerraService2.asmx.

Ok, now I right click on my project name in the properties window and add a Service Reference:

A window is going to pop up where I have to paste in that copied Url and then click on “Go”:

Now it is looking over the internet to find that Web Service and everything that belongs to it:

Eventually I rename that namespace to something friendlier. When I then click the OK button, Visual Studio is building that proxy class that I can access from that point on.

Now, I have to admit, at this point I ran into some trouble. I just kept getting some error messages, so I repeated the step of adding the Service Reference a few times. Nothing worked. I even started the whole project again from scratch. That didn’t change anything. I still kept getting those errors. Then I closed down Visual Studio, opened it up again, and added the Service Reference again. That did the trick. I am wondering if it was a bug in Visual Studio, or if it was my pc. Or was it my lack of knowledge? Anyway, if any of you want to try my example and you run into some trouble, then try to close and reopen Visual Studio.

Ok, let’s move on:

I am creating a reference to a “client” object. I am going to need to make what is called an asynchronous call. When I make a call over the internet it might take a long time, depending on the time of the day or if the user is going to make that call with the phone and has a bad connection. So, what happens while the application is waiting?

The phone is basically locked out of taking additional actions. Therefore in Silverlight, I can call some Web Services asynchronously, meaning that I listen for the event that fires once the application receives back the response from the Web Service, if it ever receives it back. Meanwhile then the application is free, and the phone is free to continue on working until that event happens. So, once I’ve told Silverlight that I am listening for the response in an event that I am going to create, then I am free to call the Web Service. It’s a two step process. I am going to send out the request, and while I go on doing what I want to do, at some point the response will be retrieved. In other words, the phone will not lock down while waiting for the response, it will continue to operate.

Fortunately again, Visual Studio makes this very easy. It creates an event that will handle the asynchronous call.

There is an event handler called “ConvertLonLatPtToNearestPlaceCompleted”. This is what I do:

When I type in “+=”, there pops up a bubble that’s going to create that new event handler by hitting the tab key twice:

Visual Studio is generating that event handler that is fired off whenever that event happens. It also threw in an exception. I don’t think I am going to need that exception, so I comment that out and add add this line of code there:

So far, so good. I have set everything up, but I have not really called the Web Service, yet.

Let’s do that. I am going to add this code inside the button click event handler:

What’s going to happen is that I am going to pass in the default Latitude and Longitude values in the creation of a new object of type LonLatPt. It’s what is reqired by this Web Service “ConvertLonLatPtToNearestPlaceAsync” in order to begin the asynchronous call to the Web Service.

Ok, let’s run it:

Well, the only issue seems to be that my default Latitude and Longitude values seem to be incorrect. I expected it to be Amsterdam, but it is close enough. This will do.

Of course, to run this application on a physical device, I need to make sure to have a data connection.

One more thing: I am looking forward to the release of the new Mango tools. I just read that with them I can test this application even better in the emulator.

So, I am pretty sure that there will be other blog entries about this topic.

 

To be continued…

 

 

 

 

 

Working with Isolated Storage, ListBox and DataTemplates

In my previous blog entry I was talking about how to write files to and read files from Isolated Storage. For this entry I want to dig a little deeper, for example I want to display a list that has been created in Isolated Storage. Each file in the list is going to be displayed in a hyperlink, so that I can click on it and then open up a second XAML page that will actually display the content of that file.

Let’s get started. I’ve created a new project and first of all I am going to add a ListBox that will list all of the files:

Within that ListBox I want to create something that is called Item Templates. So, I am going to create a new section called ItemTemplates. This is going to hold a definition for what every row in the list should look like. In this specific case I am going to create a DataTemplate, because I want to merge data together. Inside of this DataTemplate I am going to put a HyperlinkButton:

When the user clicks the fileLinkButton an event is fired off. I am not going to put a navigateUri for each item from the list into the XAML, instead I am going to capture the click event, then construct one and then pass it to the second page that I am also going to create at runtime. I am handling this event in the code behind.

In addition to the ListBox I am going to create a button. The button’s purpose is to load a series of three sample files into Isolated Storage:

The next thing I am going to do is to add a second page:

Now I am going to the code behind, I am navigating to my button click event handler and add some code:

This is the code to load the first sample file. Considering I need three of them, I better create a little helper method to keep my code as simple as possible:

So far, so good. But just creating those examples is not going to be enough to populate the ListBox. I have to take care of that myself. And I need to do that in two places.

First, whenever a sample file is created I want to make sure that it is bound into the ListBox. But also when the application first loads, I want to display the samples. In Order to do that I simply create a loaded event using the properties window. Then I am going to create a helper method called bindList where I am going to data-bind the names of each file in Isolated Storage. I am going to bind them to the ListBox:

Now that I have created the bindList helper method I want to put that into the loaded event and call it from my PhoneApplicationPage with that loaded event:

The line “bindList();” I now have to also put into the loadSamplesButton click event, immediately after where the files are created.

So, let’s have a quick look at my code. First whenever I click the loadSamplesButton and call the createSample helper method, this will create a new file with the defined fileName and fileContent to Isolated Storage. I am also making sure that the file doesn’t already exist in which case I wouldn’t want to overwrite it. If it doesn’t exist I create it. Then I am using a StreamWriter passing in that file reference, and then finally write to the file whatever was passed in to my helper method.

I create three files and then I call that bindList. What bindList does is simply going to appStorage and getting all the names of files that are in appStorage and stores them in an array of strings. Now that I have retrieved the fileNames I want to data-bind them to the ListBox.

Let’s see if it runs:

Nice, it just works. Now I have to make sure that the HyperlinkButtons work. With right-clicking on that fileNameLinkButton click event I can navigate to the event handler to take care of that action.

What I am going to do there is to construct a Uri on the fly and then pass it to that part of the Windows Phone API that knows how to navigate from one page to another. I am going to make use of a navigation service instead of the simple HyperlinkButton NavigateUri property:

I am just continuing to my SecondPage XAML code to add some controls there:

I have a TextBlock to display the content of each clicked HyperlinkButton and also a HyperlinkButton that is navigating me back to my MainPage. For this to work I have to create a loaded event here, too. Inside that loaded event I want to look for the file name, and then I am going to look on the flash drive of the phone in its Isolated Storage to retrieve the values that are inside of the passed in text file:

Let’s see if it works:

         

         

When I click a HyperlinkButton I am navigated to my SecondPage where the content of that just clicked HyperlinkButton is being displayed. Clicking on  the HyperlinkButton on the SecondPage brings me back to my MainPage. Just how it is supposed to work.

 

To be continued…

 

 

Understanding Isolated Storage

So far in my examples I allowed the user to input some information, but I’ve not done anything useful with that information.

So, today I am going to use the phone’s own storage capacity, its Flash drive to store the information.

In Silverlight applications I don’t get free access to the entire phone’s file system. The user is protected from portentous, malicious applications. And it does that by providing each application with its own personal storage area. That is called Isolated Storage. That makes sense, because each storage area is isolated from its ‘neighbor’ in applications.

So, how do I store to and retrieve data from Isolated Storage?

I am just creating a new project and I am going to add a few buttons and a textbox  into the content panel:

Now I am going to add some code to the event handler that is going to address the Isolated Storage. It is going to create a file and save, whatever the user typed into the textbox, into that file:

First I am creating a new instance of IsolatedStorageFile by creating a new variable called appStorage. GetUserStoreForApplication is going to retrieve a reference to an object that will allow me to interact with this specific application’s Isolated Storage area. “var” is a special keyword, called Local Type Inference. It allows C# to assign the data type when the application is compiled based on what the variable is initialized to. C# will figure out the data type that is returned from this method, GetUserStoreApplication, and create a reference, a variable called appStorage.

GetUserStoreForApplications returns a reference to this application’s Isolated Storage space, so that I could write and read files from it.

With the next line (string fileName = “simple.txt”) I am just hard coding the name of a file. This will be the file name that I am going to store on the phone.

The next line looks a little bit more complex:

using(var file=appStorage.OpenFile(fileName,System.IO.FileMode.OpenOrCreate, System.IO.FileAccess.Write))

I am telling C# the file name and the FileMode, in other words, I am telling C# how I want this file to be treated. If it exists, open it, if not, create it. And finally I am giving permission on what activity I want to perform on that file. In this case I am allowing access that data can be written on that file.

The keyword “using” in that context forces the file that I am working with (inside the open and close parenthesis) to close once the end of the code block is reached. This reduces the possibility that I accidentally leave that file open and accidentally corrupt that file somehow when I try to open it a second time and write more information into it. So, “using” defines a code block, and once the CLR is finished executing that code block, then the file will be closed automatically. Basically, what happens is, that reference (var file) will be set to Null, it will go out of scope and it will be removed from the phone’s memory.

In the next line of code I am creating a reference to a StreamWriter object:

using (var writer = new StreamWriter(file))

This is an object that knows how to write data into an open file.

Ok, let’s move on and add some code to the Clear button:

This just cleans out whatever text is already in that textbox.

Now I want to add some code to the Open button. The idea is, now that I’ve saved some data to the Isolated Storage I want to retrieve that “simple.txt” file from Isolated Storage and then display its content into my infoTextBox:

First I am getting a reference to the application’s Isolated Storage area. Then I am using a StreamReader to get a reference to the “simple.txt” file, and open it up for read only access. And finally I am using the StreamReader’s ReadToEnd method to take care of the details of retrieving the data from the “simple.txt” file, so that I can display it in the infoTextBox.

When I run it now, I can type in some data (1), I can save it (2), clear it (3), and by clicking the Open button (4) retrieve that data again:

Retrieving the data back by clicking the Open button would not work anymore if I would close down the emulator and start a new session. It only works for the current session.

To be continued…

Resources and Styles

For this blog entry I am just getting right to the point. I created a new project with just a button and immediately ran it. So I can change the theme in my emulator. I am setting the background to light, and the accent color to brown.

I want to find out how the application knows what color it should use. Does it even use another color?

Looking at XAML I can find this:

Inside the curly braces there are so called property bindings, or binding syntax.  What it means is that this command is binding the property values to various elements on this page, like the font or the foreground. It is binding values to static resources that have been defined by Microsoft. A resource is any reusable value in Silverlight that has been set in one place and then is used whenever and wherever it is needed.

In this case the application gets the foreground color from the selection I made in the theme screen.

In my little application I could programmatically retrieve the user’s color selection from this point on  by referencing that static resource named “PhoneForegroundBrush”.

But where is that “PhoneForegroundBrush” defined? It is not defined anywhere in my project. Well, there are embedded resource files that are already on a Windows Phone 7 device itself. They are referred to as “theme resources”. I can’t modify the themes or the style definitions within them, but as a developer I can choose which of the themes I want to use, or choose not to use any of them at all. Consequentially the themes are just simple XAML files, one for each combination of dark or light background along with each of the accent colors.

Here you can find a listing of all the various theme resources that have been created by Microsoft, and that I can pull from and use them within my application. Again, those are defined on the phone itself. I just make use of those resources by accessing them similarly to what I showed in the upper XAML screenshot of the binding syntax.

For this blog entry I am going to keep it simple. I am just using one of the resources that are defined on that website. The resource I am going to use is called PhoneAccentBrush. This is going to give me access to that brown accent color I selected earlier in the Windows Phone Emulator.

Suppose I would want to add an accent color to the button’s border. To accomplish this I have a couple of choices. The first is that I just could type the XAML directly into the code editor:

Looking at the visual portion of my designer I see that:

Now, that’s an interesting issue. I selected brown but I automatically get a blue binding around my button control. And also it still shows the dark background and not the selected light one. Why is that happening? Visual Studio uses some default settings in this case.

Running the application gives me the intended result though:

If anything, this just emphasizes the fact that Visual Studio and the Emulator work together but they’re two distinct applications that otherwise had no knowledge of each other.

Let’s move on to the property window. I am scrolling down to Foreground and right click on that little icon. A window is going to pop up where I select “Apply Resource…” Visual Studio then is going to show me a list of the various styles that I can choose from. I am choosing PhoneAccentBrush. Two things are happening. I can see that now the text on the button also shows up in blue:

The second thing that’s happening is that this property is added to my XAML code:

My button in the running application looks now like this:

For now I am resetting that Foreground property. That gives me the possibility to click that little arrow in order to select the wanted color:

This window has four tabs on the top. I can set a “Null Brush”, a “Solid Brush”, a “Gradient Brush” or a “Image Brush”. By default it is set to “Solid Brush” and the color white, everything set to 255, meaning that there is no alpha transparency at all. Anyway, there are lots of various possibilities to set the Foreground property. For now I want to use the “Gradient Brush”:

Remember, everything I do in the properties window will affect the XAML window somehow. My code for the Button Foreground property looks now like this:

It defines the StartPoint and then the GradientStop. When I run the application now, it will ignore the brown I chose before, but use the new defined Foreground property:

Assuming I would want to use the same LinearGradientBrush in other buttons that I want to add to my application, I can simply right click on that icon at the Foreground property again and select “Extract Value to Resource”. A window pops up where I can rename it and choose the destination where I want to save it:

If I want to use this GradientBrush color that I created only on this page, I would choose MainPage.xaml. If I want it to be available to the entire application I would choose app.xaml. Since I am only having that one page in my app I am going to choose MainPage.xaml.

Two things are happening again. First, the definition of the GradientBrush is gone, but I can see that the Foreground is now set to a StaticResource called Foreground1:

And when I scroll up to the PhoneApplicationPage I can see that there is now a Resource element as a child to the PhoneApplicationPage:

Let’s see how this works out. I am dragging a new button from the toolbox to my main form. In the properties window I scroll down to Foreground, right click that icon again and select “Apply resource”. I get a dialogue window where I can choose the defined “Foreground1” property:

Pretty cool, I think.

So, what if there are multiple properties for a given control, like my button control, that I want to apply to? For example, I not only want the text to be red, but also the border?

To do that, I am going to have to define a style, which is a collection of property setters.

First I am going to remove that LinearGradientBrush completely from my XAML code. Then I am going to define a style in XAML:

To use that style that I just created I simply need to remove the BorderBrush and the Foreground properties and then add that style to both of them:

Seems pretty simple.

 

To be continued…

The Image Control

The Image Control allows me to display images in my Silverlight Windows Phone 7 application. To have a first closer look at this control I just created a new project and dragged an Image Control to my main form. In my properties window I have a little helper, an ellipsis button next to the Source property. The source property is going to define where the image should come from that will be displayed:

I am going to click the ellipsis button to add a new image to my project:

When I click the Add button I can choose the image I want to display. So, let me go ahead and do that:

What happened is that Visual Studio created an Images folder in my Solution Explorer that contains my image:

The next thing is that that path  has kind of a strange look:

“/Images;” is going to refer to the deployment package. What comes after the semicolon will reference that file within the deployment package once it is loaded onto the phone.

This altogether, this path, is actually referred to as an URI, Uniform Resource Identifier. It’s kind of like an URL, except an URI can reference any location, not just a web based location. In this case it is referencing the location internally within a file.Anyway, when I am going to click the OK button, I see my image loaded in the Image Control in my main form:

There’s only one tiny, little problem. When I start moving the dimensions of the Image Control around, it stretches my image out of proportion:

 

How can I resolve that? In my properties window right under the Source property is the Stretch property. By default it is set to Fill, that means it fills the whole area of the Image Control. If I resize that control, it still fills that area completely regardless of the dimensions.

Let’s set it to Uniform. That will keep the perspective correct. But it only will honor either the horizontal or the vertical proportion of the image within the Image Control, but it will not crop it:

When I set it to UniformToFill, it will honor both the horizontal and the vertical proportion of the image:

Depending on how I adjust the size or the dimensions of the Image Control, there’s going to be a lot of clipping involved. So, it just depends on how I am planning on using that Image Control.

For now I am going to set it back to Uniform. For my purposes I can determine exactly how much space I want to give this image.

The next step is that I am programmatically going to change from this to another picture.

First of all I am going to need a button, because I want this to fire off when somebody clicks the button. So I am double clicking that button to get to my C# code.

Now I first have to add another image to my Images folder. For that I that little drop down arrow next to the “Add New Item” Button right under “Edit” in my menu and select “Add Existing Item”:

That will let pop up the “Add Existing Item” dialog and I am already in the images directory I navigated to earlier. I select the image I want, click the Add button and my image is added to the Images folder:

Now I want to create a new instance of an object that will essentially represent the new image I am going to load in. And then I am going to set the Source property to that instance of my Image object. The object that I am going to use is called a BitmapImage. In the constructor I am going to use this uriSource:

In other words, I am going to tell the location as I am creating a new instance of the BitmapImage where it can find the picture that I want to use.This is where I am going to create a new URI, and I am going to pass in the string that represents the location within the deployment package where Silverlight is going to be able to find that second image. Plus I am going to tell it what type of Url it is looking at. It’s a relative Url, it’s relative to the deployment package.

The second step of this process is to set the Source equal to myImage:

Let’s run the application:

 

Let’s go a step further and see how to allow the image to be zoomed in and how to allow the user to scroll around inside the image.

For that I go to my XAML page, and there I can surround my Image Control with a ScrollViewer. Then I remove the Margin of my image completely and change the Width to 800, and also the Height:

When I run the application I can use my mouse cursor to simulate a finger to scroll around in the image:

 

To be continued…

 

%d bloggers like this: