Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Image Background, Orientation Changes and Control Visibility

DZone's Guide to

Image Background, Orientation Changes and Control Visibility

· Mobile Zone
Free Resource

Download this comprehensive Mobile Testing Reference Guide to help prioritize which mobile devices and OSs to test against, brought to you in partnership with Sauce Labs.

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:

1


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:

SupportedOrientations="Portrait" Orientation="Portrait"


I am changing that property in the property window:

2

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

SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"



1a


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:

3


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

4                   4a


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:

4b


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.

5


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

5a


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:

<Rectangle Height="260"
           HorizontalAlignment="Stretch"
           Margin="0,6,0,0"
           Name="rectangle1"
           Stroke="Black"
           StrokeThickness="1"
           VerticalAlignment="Top"
           
           Fill="#56000000" />
<TextBlock Height="176"
           HorizontalAlignment="Stretch"
           Margin="0,6,0,0"
           Name="textBlock1"
           Text="Hello World"
           VerticalAlignment="Top"


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

6


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:

6a


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:

<Button Name="myButton"
        HorizontalAlignment="Stretch"
        Margin="0,200,0,0"
        VerticalAlignment="Top"
        Width="250"
        Content="Edit"
        Click="myButton_Click"
        />


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:

private void myButton_Click(object sender, RoutedEventArgs e)
{
    if (textBox1.Visibility == System.Windows.Visibility.Visible)
    {
        myButton.Content = "Edit";
        textBlock1.Text = textBox1.Text;
        textBox1.Visibility = System.Windows.Visibility.Collapsed;
        textBlock1.Visibility = System.Windows.Visibility.Visible;
    }
    else
    {
        myButton.Content = "Save";
        textBox1.Text = textBlock1.Text;
        textBox1.Visibility = System.Windows.Visibility.Visible;
        textBlock1.Visibility = System.Windows.Visibility.Collapsed;
    }


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”:

<TextBlock Height="176"
           HorizontalAlignment="Stretch"
           Margin="0,6,0,0"
           Name="textBlock1"
           Text="Hello World"
           VerticalAlignment="Top"
           Visibility="Visible"
           />
<TextBox Height="176"
         HorizontalAlignment="Stretch"
         Margin="0,6,0,0"
         Name="textBox1"
         Text=""
         VerticalAlignment="Top"
         Visibility="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:

7    7b    7c    7d


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…


Analysts agree that a mix of emulators/simulators and real devices are necessary to optimize your mobile app testing - learn more in this white paper, brought to you in partnership with Sauce Labs.

Topics:

Published at DZone with permission of Andrea Haubner, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}