Question

我在Dock面板中有两个stackpanel。调整窗口大小时，顶部面板与底部面板重叠。

<Grid>
    <DockPanel DockPanel.Dock="Left" LastChildFill="True" Width="{Binding ActualWidth, ElementName=characterLength}">

        <!-- Batch information panel: Top -->

        <ScrollViewer DockPanel.Dock="Top"  VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" Margin="6,0,0,0">
            <StackPanel Orientation="Vertical"  Margin="6,0,0,6" >

                <TextBlock x:Name="ReadOnlyNoBatchesTextBlock"  

                       DockPanel.Dock="Top"
                       Text="no batch" 
                       FontSize="19" HorizontalAlignment="left" AutomationProperties.AutomationId="DipIn_BatchReviewView_NoBatches_Text"
                       FontWeight="Bold"

            />

                <TextBlock HorizontalAlignment="Left" FontSize="19" FontWeight="Bold" AutomationProperties.AutomationId="DipIn_BatchReviewView_BatchNumber_Text" />

                <TextBlock Text="status" HorizontalAlignment="Left" Margin="0,6,0,0" FontSize="16" FontWeight="Bold"  
                       AutomationProperties.AutomationId="DipIn_BatchReviewView_BatchSubmissionStatus_Text">

                </TextBlock>
                <TextBlock Text="submitted" FontSize="14" HorizontalAlignment="Left"  
                       AutomationProperties.AutomationId="DipIn_BatchReviewView_BatchSubmittedAt_Text">
                </TextBlock>

                <TextBlock Text="qeqweq" FontSize="14" HorizontalAlignment="Left" AutomationProperties.AutomationId="DipIn_BatchReviewView_BatchSubmittedBy_Text" />

                <TextBlock Text="ertert" FontSize="16" HorizontalAlignment="Left" Margin="0,6,0,0" FontWeight="Bold"  AutomationProperties.AutomationId="DipIn_BatchReviewView_BatchProgressed_Text">
                </TextBlock>

                <TextBlock Text="dsdfgfdg" FontSize="14" HorizontalAlignment="Left" AutomationProperties.AutomationId="DipIn_BatchReviewView_BatchProgressedAt_Text" >

                </TextBlock>


                <!-- Must be last item in the stack panel otherwise you get a vertical gap-->
                <TextBlock Grid.Column="0" x:Name="characterLength" Text="abcdefg" HorizontalAlignment="Left" Visibility="Hidden" FontWeight="Bold" FontSize="14" />
            </StackPanel>

        </ScrollViewer>
        <!-- Button panel: Bottom -->

        <StackPanel Orientation="Vertical" VerticalAlignment="Bottom">
            <!-- Content is set by a Style Trigger -->
            <Button Height="40" HorizontalAlignment="Stretch" Margin="0,0,0,3" AutomationProperties.AutomationId="DipIn_BatchReviewView_SetMarkerStandardised_Button" />

            <Button Height="40" HorizontalAlignment="Stretch" Margin="0,3,0,3"  

                    AutomationProperties.AutomationId="DipIn_BatchReviewView_AllocateNextStandardisationBatch_Button" />

            <!-- Content, Automation Id & Command is set by a Style Trigger -->
            <Button Height="40" HorizontalAlignment="Stretch" Margin="0,0,0,3" />

            <!-- Content is set by a Style Trigger -->
            <Button Height="40" HorizontalAlignment="Stretch" Margin="0,3,0,3"  AutomationProperties.AutomationId="DipIn_BatchReviewView_AutoProgressBatches_Button" />

            <!-- Content is set by a Style Trigger -->
            <Button Height="40" HorizontalAlignment="Stretch" Margin="0,0,0,3"  AutomationProperties.AutomationId="DipIn_BatchReviewView_BatchListFilter_Button" />

            <Button Height="40" HorizontalAlignment="Stretch" Margin="0,0,0,3"  AutomationProperties.AutomationId="DipIn_BatchReviewView_SubmitBatch_Button" />

            <Button Height="40" HorizontalAlignment="Stretch" Margin="0,3,0,3" AutomationProperties.AutomationId="DipIn_BatchReviewView_StartStop_Marker_Button">
                <TextBlock FontSize="14" Text="a" />
            </Button>
        </StackPanel>

    </DockPanel>
</Grid>

我需要在调整窗口大小时始终显示底部面板，并且顶部面板将显示滚动条。

我已经尝试了很多方法，但是仍然可以从此代码中得到相同的问题，最上面的一个将获得滚动条，但是只有当最下面的一个变得不可见时，

Answer 1

exports.listing = (req, res, next) => {
  MoviesModel.scan()
    .exec()
    .then(movies=> {
      if(movies.lastKey){
        MovieModel.scan().exec(function(err, movies){
          res.json(movies);
        });
      }  
     })
    .catch(err => next(err));
};

避免使用ScrollViewer，它将避免内容重叠。

Answer 2

您可以将Grid与两个RowDefinitions一起使用：

<DockPanel DockPanel.Dock="Left" LastChildFill="True" Width="{Binding ActualWidth, ElementName=characterLength}">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" Margin="6,0,0,0">
            <StackPanel Orientation="Vertical"  Margin="6,0,0,6" >
                ...
            </StackPanel>
        </ScrollViewer>

        <StackPanel Grid.Row="1" Orientation="Vertical" VerticalAlignment="Bottom">
            ...
        </StackPanel>
    </Grid>
</DockPanel>

如何避免码头面板中的内容重叠

2 个答案: