windows-phone-7 - 固定页面上的页眉和页脚？

Question

windows phone 页面上是否可以有固定的页眉和页脚？我使用的是纯 XAML，而不是使用任何第三方控件。

谢谢

Answer 1

当然，这是代码和布局

<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>

Answer 2

如果您想要可以反复使用的东西，我建议您创建一个自定义控件。您的任何页面都可以轻松使用此控件。

自定义控件：

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 来添加到此解决方案。您可以在此处找到有关自定义控件的更多信息。

Answer 3

确保页面上的默认网格是 2 行。使其 3.. 顶部和底部行设置为自动高度.. 中间设置为 *