Windows Phone 7 布局与大小 _大小  

1、整体的布局

 

  1. 代码  
  2.  
  3. <phone:PhoneApplicationPage   
  4.     x:Class="SilverlightCornersAndEdges.MainPage" 
  5.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  6.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  7.     xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" 
  8.     xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" 
  9.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  10.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  11.     FontFamily="{StaticResource PhoneFontFamilyNormal}" 
  12.     FontSize="{StaticResource PhoneFontSizeNormal}" 
  13.     Foreground="{StaticResource PhoneForegroundBrush}" 
  14.     SupportedOrientations="PortraitOrLandscape" Orientation="Portrait" 
  15.     mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768" 
  16.     shell:SystemTray.IsVisible="True"> 
  17.  
  18.     <!--LayoutRoot contains the root grid where all other page content is placed--> 
  19.     <Grid x:Name="LayoutRoot" Background="Transparent"> 
  20.         <Grid.RowDefinitions> 
  21.             <RowDefinition Height="Auto"/> 
  22.             <RowDefinition Height="*"/> 
  23.         </Grid.RowDefinitions> 
  24.  
  25.         <!--TitlePanel contains the name of the application and page title--> 
  26.         <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> 
  27.             <TextBlock x:Name="ApplicationTitle" Text="CORNERS AND EDGES" Style="{StaticResource PhoneTextNormalStyle}"/> 
  28.             <TextBlock x:Name="PageTitle" Text="main page" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> 
  29.         </StackPanel> 
  30.  
  31.         <!--ContentPanel - place additional content here--> 
  32.         <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> 
  33.             <TextBlock Text="Top-Left" 
  34.                        VerticalAlignment="Top" 
  35.                        HorizontalAlignment="Left" /> 
  36.  
  37.             <TextBlock Text="Top-Center" 
  38.                        VerticalAlignment="Top" 
  39.                        HorizontalAlignment="Center" /> 
  40.  
  41.             <TextBlock Text="Top-Right" 
  42.                        VerticalAlignment="Top" 
  43.                        HorizontalAlignment="Right" /> 
  44.  
  45.             <TextBlock Text="Center-Left" 
  46.                        VerticalAlignment="Center" 
  47.                        HorizontalAlignment="Left" /> 
  48.  
  49.             <TextBlock Text="Center" 
  50.                        VerticalAlignment="Center" 
  51.                        HorizontalAlignment="Center" /> 
  52.  
  53.             <TextBlock Text="Center-Right" 
  54.                        VerticalAlignment="Center" 
  55.                        HorizontalAlignment="Right" /> 
  56.  
  57.             <TextBlock Text="Bottom-Left" 
  58.                        VerticalAlignment="Bottom" 
  59.                        HorizontalAlignment="Left" /> 
  60.  
  61.             <TextBlock Text="Bottom-Center" 
  62.                        VerticalAlignment="Bottom" 
  63.                        HorizontalAlignment="Center"  /> 
  64.  
  65.             <TextBlock Text="Bottom-Right" 
  66.                        VerticalAlignment="Bottom" 
  67.                        HorizontalAlignment="Right" /> 
  68.         </Grid> 
  69.     </Grid> 
  70.       
  71.     <!-- Sample code showing usage of ApplicationBar  
  72.     <phone:PhoneApplicationPage.ApplicationBar> 
  73.         <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True"> 
  74.             <shell:ApplicationBarIconButton x:Name="appbar_button1" IconUri="/Images/appbar_button1.png" Text="Button 1"></shell:ApplicationBarIconButton> 
  75.             <shell:ApplicationBarIconButton x:Name="appbar_button2" IconUri="/Images/appbar_button2.png" Text="Button 2"></shell:ApplicationBarIconButton> 
  76.             <shell:ApplicationBar.MenuItems> 
  77.                 <shell:ApplicationBarMenuItem x:Name="menuItem1" Text="MenuItem 1"></shell:ApplicationBarMenuItem> 
  78.                 <shell:ApplicationBarMenuItem x:Name="menuItem2" Text="MenuItem 2"></shell:ApplicationBarMenuItem> 
  79.             </shell:ApplicationBar.MenuItems> 
  80.         </shell:ApplicationBar> 
  81.     </phone:PhoneApplicationPage.ApplicationBar> 
  82.     --> 
  83.  
  84.  
  85. </phone:PhoneApplicationPage> 

HorizontalAlignment 水平布局属性

HorizontalAlignment 垂直布局属性

Margin 边缘布局属性

Padding 填充属性

2、大小的设定

 

Windows Phone 7 布局与大小 _Windows Phone 7_02 

xaml

 

  1. 代码  
  2.  
  3. <phone:PhoneApplicationPage   
  4.     x:Class="SilverlightWhatSize.MainPage" 
  5.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  6.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  7.     xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" 
  8.     xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" 
  9.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  10.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  11.     mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768" 
  12.     FontFamily="{StaticResource PhoneFontFamilyNormal}" 
  13.     FontSize="{StaticResource PhoneFontSizeNormal}" 
  14.     Foreground="{StaticResource PhoneForegroundBrush}" 
  15.     SupportedOrientations="PortraitOrLandscape" Orientation="Portrait" 
  16.     shell:SystemTray.IsVisible="True"> 
  17.  
  18.     <!--LayoutRoot is the root grid where all page content is placed--> 
  19.     <Grid x:Name="LayoutRoot" Background="Transparent"> 
  20.         <Grid.RowDefinitions> 
  21.             <RowDefinition Height="Auto"/> 
  22.             <RowDefinition Height="*"/> 
  23.         </Grid.RowDefinitions> 
  24.  
  25.         <!--TitlePanel contains the name of the application and page title--> 
  26.         <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> 
  27.             <TextBlock x:Name="ApplicationTitle" Text="SILVERLIGHT WHAT SIZE" Style="{StaticResource PhoneTextNormalStyle}"/> 
  28.             <TextBlock x:Name="PageTitle" Text="main page" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> 
  29.         </StackPanel> 
  30.  
  31.         <!--ContentPanel - place additional content here--> 
  32.         <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" 
  33.               SizeChanged="ContentPanel_SizeChanged"> 
  34.             <TextBlock Name="txtblk" 
  35.                        HorizontalAlignment="Center" 
  36.                        VerticalAlignment="Center" /> 
  37.         </Grid> 
  38.     </Grid> 
  39.    
  40.     <!--Sample code showing usage of ApplicationBar--> 
  41.     <!--<phone:PhoneApplicationPage.ApplicationBar> 
  42.         <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True"> 
  43.             <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/> 
  44.             <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/> 
  45.             <shell:ApplicationBar.MenuItems> 
  46.                 <shell:ApplicationBarMenuItem Text="MenuItem 1"/> 
  47.                 <shell:ApplicationBarMenuItem Text="MenuItem 2"/> 
  48.             </shell:ApplicationBar.MenuItems> 
  49.         </shell:ApplicationBar> 
  50.     </phone:PhoneApplicationPage.ApplicationBar>--> 
  51.  
  52. </phone:PhoneApplicationPage> 

cs

 

  1. 代码  
  2.  
  3. using System;  
  4. using System.Collections.Generic;  
  5. using System.Linq;  
  6. using System.Net;  
  7. using System.Windows;  
  8. using System.Windows.Controls;  
  9. using System.Windows.Documents;  
  10. using System.Windows.Input;  
  11. using System.Windows.Media;  
  12. using System.Windows.Media.Animation;  
  13. using System.Windows.Shapes;  
  14. using Microsoft.Phone.Controls;  
  15.  
  16. namespace SilverlightWhatSize  
  17. {  
  18.     public partial class MainPage : PhoneApplicationPage  
  19.     {  
  20.         // Constructor  
  21.         public MainPage()  
  22.         {  
  23.             InitializeComponent();  
  24.         }  
  25.  
  26.         private void ContentPanel_SizeChanged(object sender, SizeChangedEventArgs e)  
  27.         {  
  28.             txtblk.Text = String.Format("ContentPanel size: {0}\n" +  
  29.                                         "TitlePanel size: {1}\n" +  
  30.                                         "LayoutRoot size: {2}\n" +  
  31.                                         "MainPage size: {3}\n" +  
  32.                                         "Frame size: {4}",  
  33.                                         e.NewSize,  
  34.                                         new Size(TitlePanel.ActualWidth, TitlePanel.ActualHeight),  
  35.                                         new Size(LayoutRoot.ActualWidth, LayoutRoot.ActualHeight),  
  36.                                         new Size(this.ActualWidth, this.ActualHeight),  
  37.                                         Application.Current.RootVisual.RenderSize);  
  38.  
  39.         }  
  40.     }  
  41. }