Question

我通过设置DesignHeight =“300”和DesignWidth =“600”创建了Silverlight页面。当我恢复浏览器窗口时，页面的控件也会变小。

如果我将浏览器窗口的大小调整到更小，那么我页面上的控件就会消失。我需要提供一个滚动条，但是当我添加滚动条时，页面上没有任何内容显示。

<UserControl x:Class="ResourceCenter.SMTest.Planogram"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:UI="clr-namespace:VISZERA.UI.Controls;assembly=VISZERA.UI"  
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"  
    xmlns:doc="clr-namespace:VISZERA.UI;assembly=VISZERA.UI.DocumentViewer"  
    xmlns:ig="http://schemas.infragistics.com/xaml"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="1000">
    <ScrollViewer Background="AliceBlue">
        <Border x:Name="planoPage">
            <Grid x:Name="LayoutRoot" Background="White">
                <Grid.RowDefinitions>
                    <RowDefinition Height="20"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Border BorderBrush="#94A8C0" BorderThickness="2" Padding="5"/>
                <!--<Border BorderBrush="Gray" BorderThickness="1" Grid.Row="0" />-->
                <Grid Grid.Row="1">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="3*"/>
                    </Grid.ColumnDefinitions>
                    <Border BorderBrush="#94A8C0" BorderThickness="2" Padding="5" Grid.Row="1"/>
                    <!--<Border BorderBrush="Gray" BorderThickness="1" Grid.Row="1" />-->
                    <Grid Margin="10">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="30" />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <TextBlock Name="lblAssoProducts" Text="Associated Product" VerticalAlignment="Center" FontSize="13" HorizontalAlignment="Center" />
                        <ListBox Name="lstProducts" Grid.Row="1" />
                    </Grid>

                    <Grid Grid.Row="2" Grid.Column="1">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                        </Grid.ColumnDefinitions>
                        <!--Diplay Document Viewer in first Row of this Grid-->
                        <Border x:Name="brdCnt" BorderBrush="#94A8C0" BorderThickness="2" Padding="5"/>
                        <!--<Border x:Name="brdCnt" BorderBrush="Gray" BorderThickness="1" />-->
                        <doc:VISZERADocumentViewer x:Name="DocViewer" CanCutPages="False"></doc:VISZERADocumentViewer>
                        <Border BorderBrush="#94A8C0" BorderThickness="2" Grid.Row="1" />
                        <Grid Grid.Row="1" Margin="5">
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition />
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition />
                                <ColumnDefinition Width="100"/>
                            </Grid.ColumnDefinitions>
                            <!-- Labels-->
                            <TextBlock Name="lblCategory" Text="Category :" Height="20" HorizontalAlignment="Right" FontWeight="Bold"/>
                            <TextBlock Name="lblSubCategory" Text="Sub Category :" Grid.Row="1" Height="20" HorizontalAlignment="Right" FontWeight="Bold" />
                            <TextBlock Name="lblDC" Text="DC :" Grid.Row="2" Height="20" HorizontalAlignment="Right" FontWeight="Bold"/>
                            <TextBlock Name="lblFootage" Text="Footage :" Grid.Column="2" Height="20" HorizontalAlignment="Right" FontWeight="Bold"/>
                            <TextBlock Name="lblFileType" Text="File Type :" Grid.Row="1" Grid.Column="2" Height="20"  HorizontalAlignment="Right" FontWeight="Bold"/>
                            <TextBlock Name="lblReleasedOn" Text="Released On :" Grid.Row="2" Grid.Column="2" Height="20" HorizontalAlignment="Right" FontWeight="Bold"/>
                            <!--Input Controls-->
                            <TextBox Name="txtCategory" Grid.Column="1" Margin="2" Height="20"/>
                            <TextBox Name="txtSubCategory" Grid.Row="1" Grid.Column="1" Margin="2" Height="20" />
                            <TextBox Name="txtFootage" Grid.Column="3" Margin="2" Height="20"/>
                            <TextBox Name="txtFileType" Grid.Row="1" Grid.Column="3" Margin="2" Height="20"/>
                            <TextBox Name="txtReleasedOn" Grid.Row="2" Grid.Column="3" Margin="2" Height="20"/>
                            <telerik:RadComboBox x:Name="cmbDC" IsEditable="True" Grid.Row="2" Grid.Column="1" Margin="2" Height="20">
                                <telerik:RadComboBoxItem>CJ1</telerik:RadComboBoxItem>
                                <telerik:RadComboBoxItem>CJ3</telerik:RadComboBoxItem>
                                <telerik:RadComboBoxItem>CJ3</telerik:RadComboBoxItem>
                                <telerik:RadComboBoxItem>Excl</telerik:RadComboBoxItem>
                                <telerik:RadComboBoxItem>Sovereign</telerik:RadComboBoxItem>
                            </telerik:RadComboBox>
                            <!--Save & Delete Buttons-->
                            <telerik:RadButton Name="btnSave" Content="Save" Grid.Row="1" Grid.Column="4" Width="75" Height="25" ToolTipService.ToolTip="Save"/>
                            <telerik:RadButton Name="btnDelete" Content="Delete"  Grid.Row="1" Grid.Column="4" Width="75" Height="25" ToolTipService.ToolTip="Delete" Click="btnDelete_Click" />
                        </Grid>
                    </Grid>
                </Grid>
                <TextBlock Name="lblHeader" Text="Core Planogram" />
            </Grid>
        </Border>
    </ScrollViewer>
</UserControl>

Answer 1

根据设计，您的布局在Grid内的Border内有ScrollViewer。它们都默认为屏幕大小，因此ScrollViewer是多余的，不会显示滚动条。

要使ScrollViewer滚动，内容的大小必须大于ScrollViewer。这意味着在某些子元素上设置固定或至少最小的大小。

在您的情况下，您可以在边框上设置最小尺寸，例如：

<ScrollViewer Background="AliceBlue">
        <Border x:Name="planoPage" MinHeight="400" MinWidth="500">
            <Grid x:Name="LayoutRoot" Background="White">

或scor4er建议的列和行的最小尺寸，但我实际上建议对设计进行更流畅的更改，因为它不适合外部ScrollViewer。

我还注意到，您将在网格中嵌套多个网格，单个网格将在其中执行。例如，以下布局与您的类似，但只使用一个看起来像这样的网格： Layout Example

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.238*"/>
        <ColumnDefinition Width="0.762*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="20"/>
        <RowDefinition/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Border BorderBrush="#94A8C0" BorderThickness="2" Padding="5" Grid.ColumnSpan="2" Margin="0" Background="#FFECED5F"/>
    <Border BorderThickness="2" Padding="5" Margin="0" Grid.RowSpan="2" Grid.Row="1" Background="#FFDB69FF"/>
    <Border x:Name="brdCnt" BorderBrush="#94A8C0" BorderThickness="2" Padding="5" Margin="0" Grid.Column="1" Grid.Row="1" Background="#FF7595E4"/>
    <Border BorderBrush="#94A8C0" BorderThickness="2" Grid.Row="2" Margin="0" Grid.Column="1" Background="#FF40F1B4" />
</Grid>

然后在蓝色区域（可能是紫色和绿色区域）中有ScrollViewer是有意义的，因为这些是动态调整大小的唯一窗格。

您仍然可以在整个屏幕上使用外部ScrollViewer，在这种情况下结合上述建议。

Answer 2

您可以尝试将"*"高度或MinWidth的RowDefinitions的MinHeight属性设置为ColumnDefinitions width "*"宽度。如果页面大小小于限制，则会出现滚动条。

例如：

<RowDefinition Height="*" MinHeight="500"/>

或者：

<ColumnDefinition Width="*" MinWidth="300"/>

Silverlight 5中的滚动条问题

2 个答案: