Windows Phone 7 布局与大小

1、整体的布局

代码  

<phone:PhoneApplicationPage   

    x:Class="SilverlightCornersAndEdges.MainPage" 

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" 

    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" 

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 

    FontFamily="{StaticResource PhoneFontFamilyNormal}" 

    FontSize="{StaticResource PhoneFontSizeNormal}" 

    Foreground="{StaticResource PhoneForegroundBrush}" 

    SupportedOrientations="PortraitOrLandscape" Orientation="Portrait" 

    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768" 

    shell:SystemTray.IsVisible="True"> 

    <!--LayoutRoot contains the root grid where all other page content is placed--> 

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

        <Grid.RowDefinitions> 

            <RowDefinition Height="Auto"/> 

            <RowDefinition Height="*"/> 

        </Grid.RowDefinitions> 

        <!--TitlePanel contains the name of the application and page title--> 

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

            <TextBlock x:Name="ApplicationTitle" Text="CORNERS AND EDGES" Style="{StaticResource PhoneTextNormalStyle}"/> 

            <TextBlock x:Name="PageTitle" Text="main page" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> 

        </StackPanel> 

        <!--ContentPanel - place additional content here--> 

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

            <TextBlock Text="Top-Left" 

                       VerticalAlignment="Top" 

                       HorizontalAlignment="Left" /> 

            <TextBlock Text="Top-Center" 

                       HorizontalAlignment="Center" /> 

            <TextBlock Text="Top-Right" 

                       HorizontalAlignment="Right" /> 

            <TextBlock Text="Center-Left" 

                       VerticalAlignment="Center" 

            <TextBlock Text="Center" 

            <TextBlock Text="Center-Right" 

            <TextBlock Text="Bottom-Left" 

                       VerticalAlignment="Bottom" 

            <TextBlock Text="Bottom-Center" 

                       HorizontalAlignment="Center"  /> 

            <TextBlock Text="Bottom-Right" 

        </Grid> 

    </Grid> 

    <!-- Sample code showing usage of ApplicationBar  

    <phone:PhoneApplicationPage.ApplicationBar> 

        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True"> 

            <shell:ApplicationBarIconButton x:Name="appbar_button1" IconUri="/Images/appbar_button1.png" Text="Button 1"></shell:ApplicationBarIconButton> 

            <shell:ApplicationBarIconButton x:Name="appbar_button2" IconUri="/Images/appbar_button2.png" Text="Button 2"></shell:ApplicationBarIconButton> 

            <shell:ApplicationBar.MenuItems> 

                <shell:ApplicationBarMenuItem x:Name="menuItem1" Text="MenuItem 1"></shell:ApplicationBarMenuItem> 

                <shell:ApplicationBarMenuItem x:Name="menuItem2" Text="MenuItem 2"></shell:ApplicationBarMenuItem> 

            </shell:ApplicationBar.MenuItems> 

        </shell:ApplicationBar> 

    </phone:PhoneApplicationPage.ApplicationBar> 

    --> 

</phone:PhoneApplicationPage> 

HorizontalAlignment 水平布局属性

HorizontalAlignment 垂直布局属性

Margin 边缘布局属性

Padding 填充属性

2、大小的设定

xaml

    x:Class="SilverlightWhatSize.MainPage" 

    <!--LayoutRoot is the root grid where all page content is placed--> 

            <TextBlock x:Name="ApplicationTitle" Text="SILVERLIGHT WHAT SIZE" Style="{StaticResource PhoneTextNormalStyle}"/> 

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

              SizeChanged="ContentPanel_SizeChanged"> 

            <TextBlock Name="txtblk" 

                       HorizontalAlignment="Center" 

                       VerticalAlignment="Center" /> 

    <!--Sample code showing usage of ApplicationBar--> 

    <!--<phone:PhoneApplicationPage.ApplicationBar> 

            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/> 

            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/> 

                <shell:ApplicationBarMenuItem Text="MenuItem 1"/> 

                <shell:ApplicationBarMenuItem Text="MenuItem 2"/> 

    </phone:PhoneApplicationPage.ApplicationBar>--> 

cs

using System;  

using System.Collections.Generic;  

using System.Linq;  

using System.Net;  

using System.Windows;  

using System.Windows.Controls;  

using System.Windows.Documents;  

using System.Windows.Input;  

using System.Windows.Media;  

using System.Windows.Media.Animation;  

using System.Windows.Shapes;  

using Microsoft.Phone.Controls;  

namespace SilverlightWhatSize  

{  

    public partial class MainPage : PhoneApplicationPage  

    {  

        // Constructor  

        public MainPage()  

        {  

            InitializeComponent();  

        }  

        private void ContentPanel_SizeChanged(object sender, SizeChangedEventArgs e)  

            txtblk.Text = String.Format("ContentPanel size: {0}\n" +  

                                        "TitlePanel size: {1}\n" +  

                                        "LayoutRoot size: {2}\n" +  

                                        "MainPage size: {3}\n" +  

                                        "Frame size: {4}",  

                                        e.NewSize,  

                                        new Size(TitlePanel.ActualWidth, TitlePanel.ActualHeight),  

                                        new Size(LayoutRoot.ActualWidth, LayoutRoot.ActualHeight),  

                                        new Size(this.ActualWidth, this.ActualHeight),  

                                        Application.Current.RootVisual.RenderSize);  

    }  

} 

本文转自linzheng 51CTO博客，原文链接:http://blog.51cto.com/linzheng/1079250