ScrollViewer가 스택 패널 내에서 작동하도록 하려면 어떻게 해야 합니까?

ScrollViewer가 스택 패널 내에서 작동하도록 하려면 어떻게 해야 합니까?

다음 WPF XAML에서는 Scroll Viewer가 작동하지 않습니다(스크롤 막대를 표시하지만 스크롤할 수 없으며 내용은 창에서 아래로 이동합니다).

외부 스택 패널을 그리드로 변경하면 작동합니다.

그러나 다음 코드를 재생산한 애플리케이션에는 외부 스택 패널이 필요합니다.ScrollViewer에 사용 가능한 스크롤 막대가 표시되도록 하려면 스택 패널에서 어떻게 해야 합니까? 예: VerticalAlignment="Stretch" Height="자동"이 작동하지 않습니다.

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

당신은 높이를 고정하지 않고는 할 수 없습니다.StackPanel한 방향으로 무한히 성장하도록 설계되었습니다.다른방을사는좋것다습니이하용법▁a다▁different▁using니습▁i좋'를 사용하는 것이 좋습니다.Panel이 "한가요?StackPanel?

이것 또한 한동안 저를 괴롭혔습니다. 요령은 스크롤 뷰어 안에 스택 패널을 넣는 것입니다.

또한 스크롤 뷰어의 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>

때때로 스택 패널이 인식하지 못할 수도 있습니다.제 경우에는 이 코드가 있었습니다.

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

그것은 잘 작동했습니다.바인딩에 의해 참조된 "페이지"는 정말로 다르고 복잡한 사용자 컨트롤이었고, 저는 그 중 일부에 스크롤 바만 가지고 싶었습니다.그래서 스크롤 뷰어를 제거했습니다.

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

그런 다음 Scroll Viewer를 사용자 컨트롤의 맨 위 요소로 사용했습니다.하지만, 이것은 효과가 없었습니다.내용이 페이지에서 방금 흘러나왔습니다.처음에는 이 질문/답변이 도움이 될 것이라고 생각하지 않았지만 항목 컨트롤의 기본 항목 패널이 스택 패널이라는 것을 알게 되었습니다.그래서 스택 패널이 아닌 항목 패널을 지정하여 문제를 해결했습니다.

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

사실, 제가 그 딜레마를 해결하는 방법은 외부 스택 패널을 제거하고 대신 스크롤 뷰어를 메인 그리드 내에서 원하는 위치에 설정하는 것이었습니다.

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

작동 방식은 다음과 같습니다.

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

Scroll Viewer의 높이를 Window의 내부 높이로 바인딩합니다.

크기 조정의 논리는 요소 고정 높이를 지정하거나 렌더 높이를 사용하도록 뷰를 설계해야 한다는 것입니다.

출력:

스택 패널이 그리드 안에 있으면 다음과 같이 수행할 수 있습니다.

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

그리드 이동.StackPanel에서 ScrollViewer까지의 Row="1"은 완전히 해결해 주었습니다.

스택 패널에 표시할 40여 개 항목의 긴 목록이 있었지만 처음 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>

<WrapPanel Orientation="Vertical">
        <ScrollViewer>
            <WrapPanel Orientation="Vertical">
                <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"/>
            </WrapPanel>
        </ScrollViewer>
    </WrapPanel>

WinUI 3, .Net6(StackPanel은 ScrollViewer 하위 항목을 기본적으로 수용할 수 없음)에서 이러한 문제가 발생했습니다.

이 수정은 WPF에서도 작동해야 하며 ScrollViewer의 상위 항목을 스택 패널로 유지할 수 있습니다.

1. xaml 창/페이지에서 다음과 같은 특성을 가진 요소*를 식별합니다.

• ScrollViewer에서 원하는 높이를 지정합니다.
• 높이가 고정되어 있습니다. 또는 할당된 그리드의 하위 항목입니다. RowDefinition Height="*"
• ScrollViewer 외부 요소입니다.
• ScrollViewer의 상위 항목일 수도 있고 아닐 수도 있습니다.
• 스택 패널이 아닙니다.

2. 찾은 Element*에 이름 집합이 있는지 확인합니다.

• 비슷한 것x:Name="myControlName"

3. ScrollViewer의 '높이'를 설정하여 해당 요소의 '높이' 또는 '실제 높이'를 상속합니다*.

• <ScrollViewer Height="{Binding ActualHeight, ElementName=myControlName}"/>

4. 이익!

언급URL : https://stackoverflow.com/questions/802821/how-can-i-get-scrollviewer-to-work-inside-a-stackpanel