Question

您将如何编码此设计：

更新

这是我在的地方：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" MinWidth="200" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <!-- v-scroll on contents -->
    <StackPanel x:Name="sidebar" Grid.Column="0">
        <StackPanel x:Name="top-box" Margin="4, 4, 4, 4"
                    VerticalAlignment="Top" Background="#FFCECECE" />

        <StackPanel x:Name="bottom-box" Grid.Column="0">
            <StackPanel Margin="4, 4, 4, 4" />
        </StackPanel>
    </StackPanel>

    <controls:GridSplitter Grid.Column="0" Height="Auto" Width="2" 
                           HorizontalAlignment="Right" Background="Black" />

    <!-- no scroll -->
    <StackPanel x:Name="static-top-box" Grid.Column="1" Height="60"
                VerticalAlignment="Top" Background="AliceBlue">
        <StackPanel Margin="4, 4, 4, 4" />
    </StackPanel>

    <!-- v/h-scroll on contents -->
    <StackPanel x:Name="v-h-scroll-box" Grid.Column="1" Height="Auto"
                Margin="0,60,0,0" Background="Beige">
        <StackPanel Margin="4, 4, 4, 4" />
    </StackPanel>
</Grid>

Answer 1

包含两行和两列的Grid。单元格0,0中的一个控件，RowSpan为2.单元格1,0和1,1中的每个其他控件。第1行的大小为绝对值，第2行的大小为百分比。如何管理滚动条的显示取决于您的设计以及您在网格中托管的控件。

更新

我相信您只需要在StackPanel个实例中托管ScrollViewer个实例。这应该为您提供所需的滚动条。

Answer 2

我没有对此进行测试，因此可能会有一两个错字，但它应该指向正确的方向。 ScrollViewers将放置滚动条，并根据内容的大小确定是否显示垂直和水平滚动条。还有一些属性允许您指定是否要在每个方向上滚动条，但我发现自动检测通常效果最佳。

<DockPanel LastChildFill="True">
    <ScrollViewer DockPanel.Dock="Left">
        Left Pane Content
    </ScrollViewer>

    <TopPaneContent DockPanel.Dock="Top" />

    <ScrollViewer>
        Main Body Content
    </ScrollViewer>
</DockPanel>

我刚注意到Silverlight标签。要在Silverlight中使用DockPanel，您需要使用Silverlight Toolkit。有关如何添加它的说明是here，您可以找到它here。

三柱设计：一个静态标题，一个带v滚动的侧栏，一个带v / h滚动的中心盒

2 个答案:

更新