كيف يمكنني الحصول على ScrollViewer للعمل داخل StackPanel?

Question

في WPF XAML على ScrollViewer لا يعمل (يعرض شريط التمرير ولكن لا يمكن التمرير و محتويات تذهب قبالة النافذة إلى أسفل).

يمكنني تغيير الخارجي StackPanel إلى الشبكة و أنه سوف يعمل.

ومع ذلك ، في طلبي من مستنسخة التالية التعليمات البرمجية, أنا بحاجة إلى أن يكون خارجي StackPanel. ماذا يجب أن تفعل StackPanel لجعل ScrollViewer تظهر للاستخدام التمرير? على سبيل المثالVerticalAlignment="تمتد" 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>

Answer 1

لا يمكنك دون تحديد ارتفاع StackPanel.انها مصممة أن تنمو إلى أجل غير مسمى في اتجاه واحد.أنصح باستخدام مختلف Panel.لماذا "يجب" أن يكون هناك الخارجي StackPanel?

Answer 2

هذا كان يزعجني لفترة من الوقت أيضا ، هو خدعة لوضع الخاص بك stackpanel داخل scrollviewer.

أيضا, كنت بحاجة للتأكد من أن قمت بتعيين CanContentScroll ممتلكات انتقل المشاهد الحقيقية, هنا مثال:

  <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>

Answer 3

لاحظ أنه في بعض الأحيان قد يكون لديك StackPanel دون أن يدركوا ذلك.في حالتي كان هذا الرمز

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

التي عملت غرامة."صفحات" المشار إليها من قبل ملزم كان حقا مختلفة ومعقدة UserControls و أردت أن يكون سوى التمرير على بعض منهم.إذا أزلت scrollviewer:

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

ثم أضع ScrollViewer كأهم عنصر في تلك usercontrols حيث أردت لها.ومع ذلك ، لم يكن هذا العمل.المحتوى فقط تدفقت خارج الصفحة.في البداية لم أكن أعتقد أن هذا السؤال/الجواب يمكن أن تساعد لي ، ولكن أدركت أن الافتراضي ItemPanel من ItemsControl هو StackPanel.لذلك أنا حل المشكلة عن طريق تحديد ItemsPanel أن لم يكن StackPanel:

<ItemsControl ItemsSource="{Binding Pages}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

Answer 4

والواقع أن طريقة حل هذه dileman كان لإزالة الخارجي كومة الفريق و بدلا من ذلك تعيين scrollviewer في موقف أردت داخل الشبكة الرئيسية.

        <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>        

Answer 5

هذا هو كيف يعمل:

<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 ارتفاع إلى النافذة ارتفاع الداخلي.

منطق إعادة التحجيم هو أننا بحاجة إلى إعطاء أي عنصر إصلاح ارتفاع أو تصميم عرض استخدام تجعل الارتفاع.

الإخراج:

Answer 6

تتحرك الشبكة.صف="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>

Answer 7

هنا هو كيف نفعل ذلك إذا كان لديك كومة الفريق داخل الشبكة:

<ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto">
    <StackPanel MaxHeight="{Binding Path=Height,RelativeSource={RelativeSource 
              AncestorType=Grid}}">
    </StackPanel>
</ScrollViewer>