Растущий ScrollView (Высота= "Auto" MaxHeight= " Stretch")


Чего я хочу: Я хотел бы иметь ScrollView в моем приложении Silverlight 4, который растет в высоту вместе с содержимым, но показывает полосу прокрутки, если она в противном случае будет расти выше, чем ее контейнер.

Решения, которые я нашел: Я нашел много задаваемых вопросов, где решение состояло в том, чтобы растянуть Scrollviewer, но это Не то, что я хочу. Scrollviewer всегда должен быть как можно меньше.

Моя Проблема: Делать это немного сложнее, сверху scrollviewer расположен заголовок, который представляет собой stackpanel со статической высотой.

Приближение Решения 1: Я попробовал его сначала с простым XAML, но я не могу понять, как это должно работать.

<Grid Height="Auto" x:Name="myGrid" >
    <Grid.RowDefinitions>
        <RowDefinition Height="100"/>
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <StackPanel Grid.Row="0" Background="AliceBlue">
        <!-- Dummy Header-->
    </StackPanel>

    <ScrollViewer Grid.Row="1" Height="Auto">
        <Button Width="100"  Height="50" Click="Button_Click" />
        <!-- onClick the button will switch between height="600" and height="50" 
            Code:
            private void Button_Click(object sender, RoutedEventArgs e)
            {
                if (sender is Button)
                {
                    Button btn = (Button)sender;
                    btn.Height = (btn.Height == 50) ? 600 : 50 ;
                }
            }
        -->
    </ScrollViewer>
</Grid>

Если вы нажмете на кнопку, она станет выше, и Scrollviewer будет обрезан, потому что он высок. Есть какие-нибудь сладости?

Подход К Решению 2: Затем я попытался установить * max * высоту ScrollViewer с помощью фактическая высота содержащего контейнера, поэтому я вставил StackPanel вокруг ScrollViewer. Это работает в конструкторе XAML VS2010, но не при выполнении кода. Я понятия не имею, почему...

<Grid Height="Auto" x:Name="myGrid" >
    <Grid.RowDefinitions>
        <RowDefinition Height="100"/>
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <StackPanel Grid.Row="0" Background="AliceBlue">
        <!-- Dummy Header-->
    </StackPanel>
    <StackPanel Grid.Row="1" x:Name="myStackPanel" Height="Auto" VerticalAlignment="Stretch">
        <ScrollViewer Height="Auto" MaxHeight="{Binding ElementName=myStackPanel, Path=ActualHeight}">
            <Button Width="100"  Height="50" Click="Button_Click" />
            <!-- onClick the button will switch between height="600" and height="50" 
                Code:
                private void Button_Click(object sender, RoutedEventArgs e)
                {
                    if (sender is Button)
                    {
                        Button btn = (Button)sender;
                        btn.Height = (btn.Height == 50) ? 600 : 50 ;
                    }
                }
            -->
        </ScrollViewer>
    </StackPanel>
</Grid>

Заранее спасибо!

1 8

1 ответ:

Решение находится в соответствующем использовании VerticalAlignment. Вы хотите, чтобы строка сетки, содержащая scrollview, была размером оставшегося пространства. Вы не хотите, чтобы Scrollviewer занимал все это пространство изначально, но он должен быть ограничен этим пространством. Значение по умолчанию VerticalAlignment из Stretch заняло бы весь доступный размер. Использование Top вместо этого приведет к тому, что он будет только настолько высоким, насколько это необходимо, пока сетка не ограничит его размер доступным пространством.

<Grid x:Name="myGrid" >
    <Grid.RowDefinitions>
        <RowDefinition Height="100"/>
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <StackPanel Grid.Row="0" Background="AliceBlue">
        <!-- Dummy Header-->
    </StackPanel>
    <ScrollViewer Grid.Row="1" VerticalAlignment="Top" VerticalScrollBarVisibility="Auto">
    </ScrollViewer>
</Grid>

Однако обратите внимание на VerticalScrollBarVisibility который вы не включаете в свой собственный xaml, несмотря на указания в вашем тексте, что он должен. Возможно, на самом деле это то, чем вы являетесь на самом деле все это время. С этим на месте удалите VerticalAlignment. В зависимости от остальной части вашего сценария вы можете обнаружить, что на самом деле иметь контурную границу полного экстента scrollviewer имеет больше смысла.