ScrollViewer가 스택 패널 내부에서 작동하도록하려면 어떻게해야합니까?
-
03-07-2019 - |
문제
다음 WPF XAML에서 스크롤 브리 뷰어는 작동하지 않습니다 (스크롤 막대가 표시되지만 스크롤 할 수 없으며 내용은 창에서 바닥으로 이동합니다).
외부 스택 패널을 그리드로 변경할 수 있습니다.
그러나 다음 코드를 재현 한 응용 프로그램에서 외부 스택 패널이 있어야합니다. 스크롤 뷰어가 사용 가능한 스크롤 바를 보여주기 위해 StackPanel에 무엇을해야합니까? 예를 들어 수직 정렬 = "스트레치"높이 = "자동"은 작동하지 않습니다.
<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
. 한 방향으로 무기한으로 자라도록 설계되었습니다. 다른 것을 사용하는 것이 좋습니다 Panel
. 외부를 갖기 위해 "필요한"이유 StackPanel
?
다른 팁
이것은 나에게 한동안 나를 괴롭 혔습니다. 속임수는 스택 패널을 스크롤 뷰어에 넣는 것입니다.
또한 Scroll Viewer의 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>
잘 작동했습니다. 바인딩에 의해 언급 된 "페이지"는 실제로 다르고 복잡한 Usercontrols였으며, 그 중 일부에 스크롤바 만 갖고 싶었습니다. 그래서 스크롤 뷰어를 제거했습니다.
<ItemsControl ItemsSource="{Binding Pages}"/>
그런 다음 ScrollViewer를 내가 원하는 USERCONTROLS의 최상위 요소로 넣었습니다. 그러나 이것은 작동하지 않았습니다. 콘텐츠가 방금 페이지에서 흘러 나왔습니다. 처음에는이 질문/답변이 도움이 될 수 있다고 생각하지 않았지만 Itemscontrol의 기본 ItemPanel이 StackPanel이라는 것을 깨달았습니다. 그래서 스택 패널이 아닌 항목 패널을 지정하여 문제를 해결했습니다.
<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>
ScrollViewer의 높이를 Window의 내부 높이에 바인딩함으로써.
재조정의 논리는 요소 수정 높이를 제공하거나 렌더 높이를 사용하도록보기를 설계해야한다는 것입니다.
산출:
StackPanel에서 ScrollViewer까지 Grid.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>
스택 패널이 그리드 내부에 있으면 다음은 다음과 같습니다.
<ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto">
<StackPanel MaxHeight="{Binding Path=Height,RelativeSource={RelativeSource
AncestorType=Grid}}">
</StackPanel>
</ScrollViewer>