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" 

  
  
                       VerticalAlignment="Top" 

  
  
                       HorizontalAlignment="Center" /> 

  
  
 

  
  
            <TextBlock Text="Top-Right" 

  
  
                       VerticalAlignment="Top" 

  
  
                       HorizontalAlignment="Right" /> 

  
  
 

  
  
            <TextBlock Text="Center-Left" 

  
  
                       VerticalAlignment="Center" 

  
  
                       HorizontalAlignment="Left" /> 

  
  
 

  
  
            <TextBlock Text="Center" 

  
  
                       VerticalAlignment="Center" 

  
  
                       HorizontalAlignment="Center" /> 

  
  
 

  
  
            <TextBlock Text="Center-Right" 

  
  
                       VerticalAlignment="Center" 

  
  
                       HorizontalAlignment="Right" /> 

  
  
 

  
  
            <TextBlock Text="Bottom-Left" 

  
  
                       VerticalAlignment="Bottom" 

  
  
                       HorizontalAlignment="Left" /> 

  
  
 

  
  
            <TextBlock Text="Bottom-Center" 

  
  
                       VerticalAlignment="Bottom" 

  
  
                       HorizontalAlignment="Center"  /> 

  
  
 

  
  
            <TextBlock Text="Bottom-Right" 

  
  
                       VerticalAlignment="Bottom" 

  
  
                       HorizontalAlignment="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

 
 


  
  
代码  

  
  
 

  
  
<phone:PhoneApplicationPage   

  
  
    x:Class="SilverlightWhatSize.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" 

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

  
  
    FontFamily="{StaticResource PhoneFontFamilyNormal}" 

  
  
    FontSize="{StaticResource PhoneFontSizeNormal}" 

  
  
    Foreground="{StaticResource PhoneForegroundBrush}" 

  
  
    SupportedOrientations="PortraitOrLandscape" Orientation="Portrait" 

  
  
    shell:SystemTray.IsVisible="True"> 

  
  
 

  
  
    <!--LayoutRoot is the root grid where all 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="SILVERLIGHT WHAT SIZE" 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" 

  
  
              SizeChanged="ContentPanel_SizeChanged"> 

  
  
            <TextBlock Name="txtblk" 

  
  
                       HorizontalAlignment="Center" 

  
  
                       VerticalAlignment="Center" /> 

  
  
        </Grid> 

  
  
    </Grid> 

  
  
   

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

  
  
    <!--<phone:PhoneApplicationPage.ApplicationBar> 

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

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

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

  
  
            <shell:ApplicationBar.MenuItems> 

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

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

  
  
            </shell:ApplicationBar.MenuItems> 

  
  
        </shell:ApplicationBar> 

  
  
    </phone:PhoneApplicationPage.ApplicationBar>--> 

  
  
 

  
  
</phone:PhoneApplicationPage> 
 
 

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