使用Navigation Framework填充整个内容区域

时间:2011-04-08 11:37:14

标签: silverlight

在我的Silverlight 4应用程序中,我使用导航框架来显示不同的页面。在一个测试页面中,我将网格分成两半,每个网格都有一个简单的文本框和一个矩形:

<Grid x:Name="LayoutRoot">
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width=".5*"/>
        <ColumnDefinition Width=".5*"/>
      </Grid.ColumnDefinitions>
    <Rectangle Fill="#FF9696DA"/>
    <Rectangle Fill="#FFDAC296" Grid.Column="1"/>
    <sdk:GridSplitter x:Name="GridSplitterTreeViewArea" HorizontalAlignment="Right" Width="5"/>
    <TextBlock TextWrapping="Wrap" Text="TreeView Area" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="16" Grid.RowSpan="2"/>
    <TextBlock TextWrapping="Wrap" Text="Main Area" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="16" Grid.Column="1"/>
</Grid>

我希望此页面填满屏幕的整个内容区域,换句话说......浏览器窗口的剩余空间。但它只是没有延伸,它与文本框需要显示的一样大。我检查了内容控件,但是(标准)设置为拉伸

    <Border x:Name="ContentBorder" Style="{StaticResource ContentBorderStyle}">
        <navigation:Frame x:Name="ContentFrame" Style="{StaticResource ContentFrameStyle}" Source="/EditorDisplayArea" Navigated="ContentFrame_Navigated" NavigationFailed="ContentFrame_NavigationFailed" Padding="1" Template="{StaticResource ContentFrameTemplate}">
            <navigation:Frame.UriMapper>
                <uriMapper:UriMapper>
                    <uriMapper:UriMapping Uri="" MappedUri="/Views/EditorDisplayArea.xaml" />
                    <uriMapper:UriMapping Uri="/{pageName}" MappedUri="/Views/{pageName}.xaml" />
                </uriMapper:UriMapper>
            </navigation:Frame.UriMapper>
        </navigation:Frame>
    </Border>

如何让页面填满剩余的空间?

提前致谢,
弗兰克

1 个答案:

答案 0 :(得分:1)

找到了它!

问题出在ContentFrameTemplate中。我使用它将ContentPresenter更改为TransitioningContentControl,方法是创建默认控件模板的副本并交换控件类型。看起来ContentPresenter的Vertical / Horizo​​ntalCONTENTAlignement是标准的Stretch,但不是TransitioningContentControl。所以解决方案是将这些添加到模板中。

<ControlTemplate x:Key="ContentFrameTemplate" TargetType="navigation:Frame">
    <Border Background="{TemplateBinding Background}"
        BorderBrush="{TemplateBinding BorderBrush}"
        BorderThickness="{TemplateBinding BorderThickness}"
        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
        VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
        <toolkit:TransitioningContentControl 
            Content="{TemplateBinding Content}"
            Cursor="{TemplateBinding Cursor}"
            Margin="{TemplateBinding Padding}"
            HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
            VerticalAlignment="{TemplateBinding VerticalAlignment}"
            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>

    </Border>
</ControlTemplate>

我在Shawn Wildermuths Blog的评论中找到了它。