用导航框架填充整个内容区域答案

【问题标题】：Fill the whole content area with Navigation Framework用导航框架填充整个内容区域
【发布时间】：2011-04-08 11:37:13
【问题描述】：

在我的 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>

如何让页面填满剩余空间？

提前致谢，
弗兰克

【问题讨论】：

标签： silverlight

【解决方案1】：

找到了！

问题出在 ContentFrameTemplate 中。我使用它来将 ContentPresenter 更改为 TransitioningContentControl，方法是创建默认控件模板的副本并交换控件类型。 ContentPresenter 的 Vertical/HorizontalCONTENTAlignement 似乎是标准的 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>

我在他的 cmets 中的 Shawn Wildermuths Blog 上找到了它。

弗兰克

【讨论】：