2012-07-25 42 views

回答

0

確定頁面上的默認網格是2行。讓3 ..設置爲自動高度..中間設置爲*頂部和底部行

5

當然,這裏是代碼和佈局

<Grid x:Name="LayoutRoot" Background="Transparent"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="100"/> 
     <RowDefinition Height="*"/> 
     <RowDefinition Height="100"/> 
    </Grid.RowDefinitions> 

    <TextBlock Text="I AM HEADER" Grid.Row="0" FontSize="56"/> 
    <StackPanel Grid.Row="1" > 
     <TextBlock Text="Main content goes here. Main content goes here. " TextWrapping="Wrap" FontSize="56"/> 
    </StackPanel> 
    <TextBlock Text="I AM FOOTER" Grid.Row="2" FontSize="56"/> 

</Grid> 

enter image description here

1

如果你想要的東西,你可以反覆使用,我會建議創建一個自定義控件。這個控件可以很容易地被你的任何頁面使用。

自定義控件:

public class HeaderFooterControl : ContentControl 
{ 
    public object Header 
    { 
     get { return (object)GetValue(HeaderProperty); } 
     set { SetValue(HeaderProperty, value); } 
    } 

    // Using a DependencyProperty as the backing store for Header. This enables animation, styling, binding, etc... 
    public static readonly DependencyProperty HeaderProperty = 
     DependencyProperty.Register("Header", typeof(object), typeof(HeaderFooterControl), new PropertyMetadata(null)); 

    public object Footer 
    { 
     get { return (object)GetValue(FooterProperty); } 
     set { SetValue(FooterProperty, value); } 
    } 

    // Using a DependencyProperty as the backing store for Header. This enables animation, styling, binding, etc... 
    public static readonly DependencyProperty FooterProperty = 
     DependencyProperty.Register("Footer", typeof(object), typeof(HeaderFooterControl), new PropertyMetadata(null)); 

    // TODO: Templates for Header and Footer 
} 

的XAML自定義控件:

<ResourceDictionary 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:controls="clr-namespace:MyLocalNamespace"> 
    <Style TargetType="controls:HeaderFooterControl"> 
     <Setter Property="Header" Value="Header info"/> 
     <Setter Property="Footer" Value="Footer info"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="controls:HeaderFooterControl"> 
        <Grid Background="{TemplateBinding Background}"> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="Auto"/> 
          <RowDefinition Height="*"/> 
          <RowDefinition Height="Auto"/> 
         </Grid.RowDefinitions> 

         <ContentPresenter Content="{TemplateBinding Header}"/> 
         <ContentPresenter Content="{TemplateBinding Content}" Grid.Row="1"/> 
         <ContentPresenter Content="{TemplateBinding Footer}" Grid.Row="2"/> 

        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</ResourceDictionary> 

你會然後使用控制,如果你頁面像這樣:

<phone:PhoneApplicationPage 
    xmlns:controls="clr-namespace:MyLocalNamespace" 
    <!-- Other parts of the page to declare (eg: FontSize, Foreground, etc) 
    <controls:HeaderFooterControl Header="Hello Header!" Footer="Bottom of page!"> 
     <!-- Other content for your page here! --> 
    </controls:HeaderFootControl> 

您可以添加到這個解決方案還有一個可以設置的HeaderTemplate和FooterTemplate。您可以瞭解更多關於Custom Controls here的信息。