Высота строки сетки Silverlight НЕ занимает полную высоту

Мы используем сетку для размещения навигационной панели поверх 75 пикселей и области содержимого ниже, которая должна занимать остальную высоту (мы используем подход с фреймовой навигацией).

Тем не менее, раздел содержимого сжимается до 100 пикселей и добавляется горизонтальная полоса прокрутки. Я добавил обтекание текстом, но это не помогло. Я поставил рамку вокруг раздела содержимого, и я вижу, что он не занимает все пространство под панелью навигации, что должно быть на всем экране.

Код выглядит следующим образом:

<UserControl 
  x:Class="DocRupert.Ui.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" 
  xmlns:uriMapper="clr-namespace:System.Windows.Navigation;assembly=System.Windows.Controls.Navigation"
  xmlns:dataControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.DataForm.Toolkit" 
  xmlns:login="clr-namespace:DocRupert.Ui.LoginUI"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">

    <Grid x:Name="LayoutRoot" Style="{StaticResource LayoutRootGridStyle}" ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="75" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid Style="{StaticResource NavigationOuterGridStyle}" Grid.Row="0">
            <Border>
                <Grid x:Name="NavigationGrid" Style="{StaticResource NavigationGridStyle}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1*" />
                        <ColumnDefinition Width="1*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="35" />
                        <RowDefinition Height="35" />
                    </Grid.RowDefinitions>
                    <Border x:Name="BrandingBorder" Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Style="{StaticResource BrandingBorderStyle}">
                        <StackPanel x:Name="BrandingStackPanel" Style="{StaticResource BrandingStackPanelStyle}">
                            <ContentControl Style="{StaticResource LogoIcon}"/>
                            <TextBlock x:Name="ApplicationNameTextBlock" Style="{StaticResource ApplicationNameStyle}" Text="{Binding Strings.ApplicationName, Source={StaticResource ApplicationResources}}"/>
                        </StackPanel>
                    </Border>
                    <Border x:Name="LinksBorder" Grid.Column="1" Grid.Row="0" Style="{StaticResource LinksBorderStyle}" VerticalAlignment="Top">
                        <StackPanel x:Name="LinksStackPanel" Style="{StaticResource LinksStackPanelStyle}">
                            <HyperlinkButton x:Name="MenuHome" Style="{StaticResource LinkStyle}" NavigateUri="/Home" TargetName="ContentFrame" Content="{Binding Path=Strings.HomePageTitle, Source={StaticResource ApplicationResources}}"/>
                            <Rectangle x:Name="Divider1" Style="{StaticResource DividerStyle}"/>
                            <HyperlinkButton x:Name="MenuAboutUs" Style="{StaticResource LinkStyle}" NavigateUri="/About" TargetName="ContentFrame" Content="{Binding Path=Strings.AboutPageTitle, Source={StaticResource ApplicationResources}}"/>
                        </StackPanel>
                    </Border>
                    <Border Grid.Column="1" Grid.Row="1">
                        <StackPanel x:Name="AuthenticationStatusPanel" Style="{StaticResource AuthenticationStatusPanelStyle}">
                            <login:LoginStatus/>
                        </StackPanel>
                    </Border>
                </Grid>
            </Border>
        </Grid>
        <Border x:Name="ContentBorder" Grid.Row="1" Style="{StaticResource ContentBorderStyle}" VerticalAlignment="Top">
            <navigation:Frame x:Name="ContentFrame" Style="{StaticResource ContentFrameStyle}" Source="/Home" Navigated="ContentFrame_Navigated" NavigationFailed="ContentFrame_NavigationFailed">
                <navigation:Frame.UriMapper>
                    <uriMapper:UriMapper>
                        <uriMapper:UriMapping Uri="" MappedUri="/Views/Home.xaml"/>
                        <uriMapper:UriMapping Uri="/{pageName}" MappedUri="/Views/{pageName}.xaml"/>
                    </uriMapper:UriMapper>
                </navigation:Frame.UriMapper>
            </navigation:Frame>
        </Border>
    </Grid>
</UserControl>

[EDIT] - Добавить XAML домашней страницы Вот XAML для домашней страницы, которая загружается во фрейм:

<Grid x:Name="LayoutRoot">
        <ScrollViewer x:Name="PageScrollViewer" Style="{StaticResource PageScrollViewerStyle}">
            <StackPanel x:Name="ContentStackPanel" Style="{StaticResource ContentStackPanelStyle}">
                <TextBlock x:Name="HeaderText" Style="{StaticResource HeaderTextStyle}" 
                           Text="{Binding Path=Strings.HomePageTitle, Source={StaticResource ApplicationResources}}"/>
                <TextBlock TextWrapping="Wrap" Text="Nulla tincidunt, arcu quis ultrices viverra, sapien enim gravida massa, aliquet mollis dolor neque in orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent blandit diam quis massa iaculis ut lobortis dui ornare. Morbi pulvinar rutrum justo, ut lacinia elit feugiat bibendum. Duis pharetra dictum mauris sit amet egestas. Suspendisse potenti. Vestibulum posuere velit a enim sollicitudin varius interdum erat scelerisque. Pellentesque blandit felis a diam euismod adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum nunc erat; rutrum vel mattis tincidunt, tincidunt id leo. Suspendisse a accumsan urna. Etiam felis nisi, vulputate vel volutpat nec, ultrices nec quam. Maecenas viverra, sapien consequat pharetra vehicula, est erat pretium ipsum, at tempus nunc justo a mauris. Quisque ac auctor eros.
                           Sed id sollicitudin ligula. Phasellus dictum mauris vel libero imperdiet dictum. Donec bibendum, magna sit amet vestibulum hendrerit, mi turpis tincidunt arcu, eget pellentesque mauris lacus luctus mi. Quisque id justo turpis. Curabitur sollicitudin massa fermentum nunc adipiscing tincidunt vitae non diam. Praesent venenatis aliquet orci sed tincidunt? Etiam tincidunt ligula nec felis dictum condimentum nec egestas urna. Pellentesque blandit diam quis lacus suscipit pharetra. Nunc diam ante, vestibulum ac bibendum venenatis, laoreet blandit eros. Proin eleifend felis velit, a varius leo. Aliquam erat volutpat. Maecenas varius nisl a arcu malesuada convallis. Vestibulum at ipsum turpis, nec pharetra ipsum.
                           Sed blandit ultrices pulvinar! Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris aliquam scelerisque sem sed tempor. Sed erat risus, tincidunt vitae pellentesque et, semper eu odio! Cras accumsan cursus urna a elementum. Vestibulum quam velit, sollicitudin sed posuere quis, ullamcorper ut purus. Pellentesque sollicitudin nibh vitae diam elementum eu convallis velit viverra. Maecenas convallis cursus porttitor. Pellentesque purus urna, ultricies sit amet tempor et, hendrerit at sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc in felis massa, ut congue leo. Maecenas in cursus massa!"></TextBlock>
                <TextBlock>hello world</TextBlock>
            </StackPanel>
        </ScrollViewer>
    </Grid>

person Jacques    schedule 17.08.2011    source источник


Ответы (1)


Какие элементы графического интерфейса вы используете на страницах с навигационным контентом? Я бы предложил использовать сетку в качестве основного элемента графического интерфейса и обеспечить его растяжение, чтобы оно занимало все доступное пространство. Чтобы убедиться, что вы делаете это правильно для всех своих страниц, я бы предложил использовать стиль, примерно такой:

<Style x:Key="NavigationContentGrid" TargetType="Grid">
    <Setter Property="VerticalAlignment" Value="Stretch"/>
    <Setter Property="HorizontalAlignment" Value="Stretch"/>
</Style>

для вашего корня навигации:

<Grid x:Name="LayoutRoot" Style="{StaticResource NavigationContentGrid}">
    <ScrollViewer x:Name="PageScrollViewer" Style="{StaticResource PageScrollViewerStyle}">
...
    </ScrollViewer>
</Grid>

Кроме того, я бы посоветовал, чтобы для ваших стилей LayoutRootGridStyle и NavigationOuterGridStyle были установлены одинаковые свойства VerticalAlignment и HorizontalAlignment.

person Steve Wranovsky    schedule 17.08.2011
comment
Глупый вопрос, а как развернуть сетку до полного размера? - person Jacques; 17.08.2011
comment
@Jacques: HorizontalAlignment и VerticalAlignment установлены на Stretch - person Gone Coding; 17.08.2011
comment
В моем примере кода у меня есть настройка стиля Border x: Name = ContentBorder как HorizontalAlignment и VerticalAlignment, установленная на Stretch, и, похоже, это не имеет никакого эффекта. Это нужно делать в сетке или это будет работать и с элементом границы? - person Jacques; 17.08.2011
comment
Я не думаю, что растяжение работает с границей, однако, если вы поместите его в сетку, сетка будет растягиваться так, что она будет расширена для использования полного размера в элементе границы. Сетка, безусловно, лучший элемент для использования в WPF / Silverlight для обеспечения использования всего доступного пространства. - person Steve Wranovsky; 17.08.2011
comment
Спасибо, Стив, ценю помощь. Я обнаружил, что переопределяю свойство vertical, поэтому style.xaml имеет stretch, а inline - верх. Что-то, что не изменилось, - это то, что текст не переносится. Может ли быть так, что ширина не ограничивается доступным недвижимым имуществом экрана? - person Jacques; 17.08.2011
comment
Да, TextBlock не обертка, вероятно, из-за того, что ширина не ограничена. Вы можете либо установить ширину текстового блока на определенное количество пикселей, либо посмотреть на ScrollViewer и посмотреть, можно ли ограничить его, чтобы он не прокручивался по горизонтали, чтобы вы использовали только пространство на странице. - person Steve Wranovsky; 17.08.2011
comment
Хммм, это сработало. Кажется странным, что это так работает. Спасибо за помощь - person Jacques; 17.08.2011