Monday, March 12, 2012

Fixed layout for PhoneApplicationPage

As a beginner in WP7 I found some issues for my first applications.
One of those problems I had was the hated "fixed layout" of a page.

It's a topic already discussed (view the post for Android) but in this case, it's a bit different.

Suppose we want a "fixed header and footer" for every page, how do you do it?
I tried to extend PhoneApplicationPage class, create a Template in the StaticResources zone,  but none of these method worked.
The compiler doesn't like it.

And so I decided to make a UserControl (in this case made of other two UserControls where are defined header and footer).

<UserControl x:Class="MyApp.FixedLayout"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}" 
    xmlns:my="clr-namespace:MyApp"             
    d:DesignHeight="768" d:DesignWidth="480">

    <Grid x:Name="LayoutRoot"  Background="{StaticResource PhoneBackgroundBrush}"  >
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <my:Header Background="{StaticResource PhoneBackgroundBrush}" />

        <ContentControl Padding="0" x:Name="ContentPanel" Grid.Row="1" Height="580" VerticalAlignment="Top">

        </ContentControl>
        <my:Footer Style="{StaticResource Footer}" />
    </Grid>
</UserControl>

Then I just opened code behind part and provided this method:
public object ContentPanelTemplate
{
     get
     {
         return ContentPanel.Content;
     }
     set
     {
          ContentPanel.Content = value;
     }
}

Registered my usercontrol to the page and used it in this way:
  <my:LayoutTM x:Name="LayoutRoot">
        <my:LayoutTM.ContentPanelTemplate>
            <Grid x:Name="ContentPanel" ... >
                <TextBlock ....
                <Button ....
                <Button ....
                <Button ....
            </Grid>
        </my:LayoutTM.ContentPanelTemplate>
    </my:LayoutTM>

And this is how I did it.

Remeber that if you wanna retrieve controls (from the UC) by name you don't have to call this method
this.FindByName("txtTest");
but this one:
nameOfUserControl.FindByName("txtTest");

I end this post with a vital question:

Are there a simpler way to do this?


No time to find it :P
My requiem is finished!

No comments:

Post a Comment