Question

我创建了一个银光页面, 设置为 DesignH8=“ 300 ” 和 DesignWidth=“ 600 ” 。当我恢复浏览器窗口时, 该页面的控件也会变小。

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

<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

您设计的布局在 < code> 边境 < / code > 内有 < code > grid , 在 < code> scrollViewer 内有 < code> / code > 。它们都默认为屏幕大小, 所以 < code> scrollViewer 是多余的, 不会显示滚动条。

要制作滚动查看器卷轴,内容的大小必须大于滚动查看器的大小。这意味着为某些子元素设定一个固定的或至少最小的大小。

在您的情况中,您可以在边境上设定一个最小尺寸,例如:

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

或者按照Scor4er的建议,列和行的体积小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小于小

I also note you keep nesting multiple Grids within Grids where a single Grid will do. For instance the following layout is similar to yours, but using only one grid that looks like: 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 是有道理的,因为这些区域是唯一动态大小的平板。

您还可以为整个屏幕配备外部滚动查看器,也可以合并上述建议。

Answer 2

您可以尝试为行定义设置 MinH8 属性, 使用 < code> * " high 或 MinWidth 到列定义宽 < code> * " 宽度。如果页面大小变小, 则使用滚动条。

例如:

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

或者:

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

友情链接