Как я могу заставить ScrollViewer работать внутри StackPanel? - PullRequest
Новая
       46

Как я могу заставить ScrollViewer работать внутри StackPanel?

69 голосов
/ 29 апреля 2009

В следующем WPF XAML ScrollViewer не работает (он отображает полосу прокрутки, но вы не можете выполнить прокрутку, и содержимое уходит из окна вниз).

Я могу изменить внешнюю панель стека на сетку, и она будет работать.

Однако в моем приложении, из которого я воспроизвел следующий код, мне нужна внешняя панель StackPanel. Что мне нужно сделать со StackPanel, чтобы ScrollViewer отображал используемую полосу прокрутки? Например, VerticalAlignment = "Stretch" Height = "Auto" не работают. 

 <StackPanel>
        <ScrollViewer>
            <StackPanel>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
            </StackPanel>
        </ScrollViewer>
 </StackPanel>

Ответы [ 7 ]

56 голосов
/ 29 апреля 2009

Вы не можете без фиксации высоты StackPanel. Он предназначен для бесконечного роста в одном направлении. Я бы посоветовал использовать другой Panel. Зачем вам "нужен" внешний StackPanel?

55 голосов
/ 08 июля 2010

Меня это тоже некоторое время беспокоило, трюк в том, чтобы поместить вашу панель стека в просмотрщик прокрутки.

Кроме того, необходимо убедиться, что для свойства CanContentScroll средства просмотра с прокруткой установлено значение True, вот пример: 

  <ScrollViewer Grid.Row="1" Margin="299,12,34,54" Name="ScrollViewer1" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" Height="195" CanContentScroll="True">
        <StackPanel Name="StackPanel1" OverridesDefaultStyle="False"  Height="193" Width="376" VerticalAlignment="Top" HorizontalAlignment="Left"></StackPanel>
  </ScrollViewer>
8 голосов
/ 16 сентября 2011

Обратите внимание, что иногда у вас может быть StackPanel, не осознавая этого. В моем случае у меня был этот код 

<ScrollViewer>
  <ItemsControl ItemsSource="{Binding Pages}"/>
</ScrollViewer>

, который работал нормально. «Страницы», на которые ссылается привязка, были действительно разными, сложными пользовательскими элементами управления, и я хотел, чтобы на некоторых из них были только полосы прокрутки. Поэтому я удалил просмотрщик прокрутки: 

 <ItemsControl ItemsSource="{Binding Pages}"/>

А затем я поместил ScrollViewer в качестве верхнего элемента тех пользовательских элементов управления, где я их хотел. Однако это не сработало. Контент просто ушел со страницы. Сначала я не думал, что этот вопрос / ответ может мне помочь, но я понял, что по умолчанию ItemPanel ItemsControl является StackPanel. Поэтому я решил свою проблему, указав ItemsPanel, который не был StackPanel: 

<ItemsControl ItemsSource="{Binding Pages}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>
4 голосов
/ 13 января 2013

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

        <Grid Style="{StaticResource LayoutRootStyle}">
    <Grid.RowDefinitions>
        <RowDefinition Height="160"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>        

    <!-- Vertical scrolling grid used in most view states -->    

        <ScrollViewer Grid.Row="1" HorizontalScrollBarVisibility="Auto">
            <StackPanel Orientation="Horizontal">
                <GridView>
                ...
                </GridView>
            </StackPanel>
        </ScrollViewer>
3 голосов
/ 09 февраля 2016

Вот как это работает: 

<Window x:Class="TabControl.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        
    xmlns:local="clr-namespace:TabControl"
    Title="MainWindow"    Height="300"   
    DataContext="{Binding RelativeSource={RelativeSource Self}}"         
    >    
<StackPanel>
    <ScrollViewer Height="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Border}},Path=ActualHeight}" >
        <StackPanel >
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
            <TextBlock Text="This is a test"/>                <TextBlock Text="This is a test"/>
        </StackPanel>
    </ScrollViewer>
</StackPanel>

Привязывая высоту ScrollViewer к внутренней высоте окна.

Логика изменения размера заключается в том, что нам нужно задать для каждого элемента фиксированную высоту или создать представление для использования высоты визуализации.

Выход:

Scrollbar in Stackpanel

0 голосов
/ 22 января 2019

Вот как бы я это сделал, если ваша панель стека находится внутри сетки: 

<ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto">
    <StackPanel MaxHeight="{Binding Path=Height,RelativeSource={RelativeSource 
              AncestorType=Grid}}">
    </StackPanel>
</ScrollViewer>
0 голосов
/ 11 апреля 2014

Перемещение Grid.Row = "1" из StackPanel в ScrollViewer полностью решило это для меня.

У меня был длинный список из 40 предметов, которые нужно было показать в StackPanel, но показывались только первые 20. 

    <ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto">
        <StackPanel x:Name="ContentPanel" Margin="12,0,12,0">
        <TextBlock Text="{Binding Line1}" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        <TextBlock Text="" Margin="10,-2,10,0" Style="{StaticResource PhoneTextNormalStyle}" />
        ...
        </StackPanel>
    </ScrollViewer>
...