2

Windows phone のページにヘッダーとフッターを固定することはできますか? サードパーティのコントロールを使用せずに、プレーンな XAML を使用しています。

ありがとう

4

3 に答える 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>

ここに画像の説明を入力

于 2012-07-25T19:50:15.197 に答える
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 も用意することで、このソリューションに追加できます。カスタム コントロールの詳細については、こちらをご覧ください。

于 2012-07-25T20:55:40.450 に答える
0

ページのデフォルトのグリッドが 2 行であることを確認してください。それを3つにします..上と下の行は自動高さに設定されます..中央は*に設定されます

于 2012-07-25T19:34:40.403 に答える