Nice programing

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

nicepro 2020. 11. 1. 18:38
반응형

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


다음 WPF XAML에서 ScrollViewer는 작동하지 않습니다 (스크롤 막대가 표시되지만 스크롤 할 수없고 내용이 창에서 맨 아래로 이동 함).

외부 StackPanel을 Grid로 변경할 수 있으며 작동합니다.

그러나 다음 코드를 재현 한 응용 프로그램에는 외부 StackPanel이 필요합니다. ScrollViewer가 사용 가능한 스크롤바를 표시하도록하려면 StackPanel을 어떻게해야합니까? 예 : 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>

.NET Framework의 높이를 고정하지 않고서는 할 수 없습니다 StackPanel. 한 방향으로 무한히 성장하도록 설계되었습니다. 다른 Panel. 왜 겉옷이 "필요" StackPanel합니까?


이것은 잠시 동안 저를 괴롭 혔습니다. 트릭은 stackpanel을 scrollviewer에 넣는 것입니다.

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

때로는 깨닫지 못한 채 StackPanel이있을 수 있습니다. 제 경우에는이 코드가

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

잘 작동했습니다. 바인딩에 의해 참조되는 "페이지"는 정말 다르고 복잡한 UserControls였으며 일부에는 스크롤바 만 포함하고 싶었습니다. 그래서 scrollviewer를 제거했습니다.

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

그런 다음 ScrollViewer를 원하는 사용자 컨트롤의 최상위 요소로 설정했습니다. 그러나 이것은 작동하지 않았습니다. 콘텐츠가 페이지에서 방금 흘러 나왔습니다. 처음에는이 질문 / 답변이 나를 도울 수 있다고 생각하지 않았지만 ItemsControl의 기본 ItemPanel이 StackPanel이라는 것을 깨달았습니다. 그래서 StackPanel이 아닌 ItemsPanel을 지정하여 문제를 해결했습니다.

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

실제로 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>        

작동 방식 :

<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


Grid.Row = "1"을 StackPanel에서 ScrollViewer로 옮기면 완전히 해결되었습니다.

I had a long list of some 40 items to show in a StackPanel, but only the first 20 were showing.

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

Here's how I would do it if your stack panel is inside a grid:

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

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

반응형