Растущий ScrollView (Высота = "Авто" MaxHeight = "Растянуть") - PullRequest
8 голосов
/ 26 августа 2011

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

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

Моя проблема: Чтобы сделать его немного сложнее, поверх окна просмотра прокрутки расположен заголовок, представляющий собой панель стека со статической высотой.

Решение Приблизительно 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 Ответ

7 голосов
/ 26 августа 2011

Решение в правильном использовании VerticalAlignment. Вы хотите, чтобы строка Grid, которая содержит представление прокрутки, была размером оставшегося пространства. Вы не хотите, чтобы 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. В зависимости от остальной части вашего сценария вы можете обнаружить, что на самом деле иметь контурную границу полного экстента прокрутки имеет больше смысла.

...