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

Discover how to focus on operators for Reactive Programming and how they are essential to react to data in your application.  Brought to you in partnership with Wakanda

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…


Learn how divergent branches can appear in your repository and how to better understand why they are called “branches".  Brought to you in partnership with Wakanda

Topics:

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

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

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

{{ parent.tldr }}

{{ parent.urlSource.name }}