Layout in xaml – basic layout in wp7 applications

There are lots of ways to layout your applications. But there might be something that you should know.

1.       Listbox cannot scroll under StackPanel. So, always be sure that you place Listbox under Gird.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

           <ListBox x:Name="MainListBox" Margin="0,0,-12,0" ItemsSource="{Binding}">

               <ListBox.ItemTemplate>

                   <DataTemplate>

                       <StackPanel>

                           ……

                       </StackPanel>

                   </DataTemplate>

               </ListBox.ItemTemplate>

           </ListBox>

        </Grid>

2.       You can use RowDefinition and Grid.Row to perfectly arrange your layout.

Firstly, define Rowdefinition under your LayoutRoot.

-          If you want to divide your page into 3 parts, you just have to define 3 RowDefinitions.

-          The parameter Height represents how much space you want to give for each part.

-            Auto:  By the height of its content.

-            72 or any other number: by pixel.

-            *: the rest. If you have two or more RowDefinitions having the * parameter, it means their height will be equal.

-            If you define two using 2* and 3*, it means one of them will be 2/5, the other will be 3/5.

-          Also, you can split the page horizontally by using ColumnDefinition.

<Grid x:Name="LayoutRoot" Background="Transparent">

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

            <RowDefinition Height="72"/>

        </Grid.RowDefinitions>

        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

            ……

        </StackPanel>

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

            ……

        </Grid>

        <StackPanel Grid.Row="2" Margin="12,0,12,0">

            ……

        </StackPanel>

    </Grid>

3.       In data binding, all of the layout properties can be bind.

<TextBlock Text="{Binding myText}" HorizontalAlignment="{Binding HAlignment}" Foreground="{Binding myForeground}" />

4.       HorizontalAligment will not work unless the parent object has width information.

<StackPanel Grid.Row="2" Margin="12,0,12,0">

        <TextBox HorizontalAlignment="Right"></TextBox>

    </StackPanel>

A color-changing LOGO picture based on CSS3 animation.

Recently I encountered with CSS3 and HTML5.

One of the charming feature of it is that we can now build animation without Flash!

So I decided to build a color-changing LOGO on my website www.xsight.com.cn.
- note that this page's content only works on web browser that support CSS3(ie. Chrome).

With the inspiration from Jsmix who built a breathing-light effect button looks like this:

Button

After his instruction, I built my own color-changing LOGO look like this:

Now I am going to tell you how to do it.

First of all, insert your logo picture where you want to place:

then give the specified ID a custom CSS like this:

#logo-img {
  width: 60px;
  height: 40px;
  margin-left: auto;
  margin-right: auto;
  -moz-border-radius: 20px;
  -khtml-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  -webkit-animation-name: logocolorchange;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes 'logocolorchange' { 
from { background-color: black; } 
50% { background-color: green; } 
to { background-color: black; }
}

The "border-radius" is used for preventing the background color overflows outside the picture, just like this(watch carefully at the edge of the picture):

Here are some other Properties you might find useful:

Property	value
animation-name	name
animation-duration	time
animation-timing-function	ease、linear ..
animation-iteration-count	infinite、number
animation-direction	normal | alternate
animation-delay	time

Reference:

• W3C --- Animations
• Safari Reference Library --- Animations