Winrt & Xaml: Сетка с полосой прокрутки... пробовал Stackpanel, Scrollviewer, не вижу, чтобы заставить его работать
Я пытаюсь включить полосу прокрутки в сетке для приложения WinRT с Xaml. Базовая настройка страницы имеет общую сетку для верхней и средней секций. Внутри средней секции я положил еще одну сетку с 2 рядами и 2 столбцами. Внутри строки 1 столбца 1 этой сетки я хочу поместить Границу с другой сеткой внутри данных для отображения и иметь полосу прокрутки внутри области границ.
Я ломал голову над этим, примерно 3 дня, включал и выключал и искал по всей сети
Я грубо попробовал эти два метода, которые, я думаю, должны работать, но не работают. Упрощенно, но сетки текстовых полей имеют около 30 сеток текстовых полей для отображения.
<Grid x:Name="PersonViewContent" Grid.Row="1">
<ScrollViewer
x:Name="MainScrollViewer"
Grid.Row="1"
ZoomMode="Disabled"
IsTabStop="False"
VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto"
Padding="0,0,0,20">
<Grid>
<Grid.RowDefinitions>
<RowDefinition
Height="Auto" />
<RowDefinition
Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition
Width="Auto" />
<ColumnDefinition
Width="*" />
</Grid.ColumnDefinitions>
<Border
BorderBrush="Black"
BorderThickness="5"
HorizontalAlignment="Left"
Width="500"
Margin="10,10,10,10"
VerticalAlignment="Top">
<ScrollViewer
x:Name="PersonScroller"
Margin="0"
FontFamily="Segoe UI"
FontSize="20"
IsHorizontalRailEnabled="true"
IsHorizontalScrollChainingEnabled="False"
IsDoubleTapEnabled="False"
IsHoldingEnabled="False"
IsRightTapEnabled="False"
IsTapEnabled="False">
<StackPanel
Margin="0"
Width="490"
HorizontalAlignment="Left">
<Grid
Height="250"
Margin="10,10,10,10"
VerticalAlignment="Bottom">
<Image
Source="{Binding Image}"
AutomationProperties.Name="{Binding ImageSourceSubtitle}"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Stretch="{Binding ImageStretch}" />
<TextBlock
Text="{Binding Subtitle}"
Margin="0,180,0,0"
TextWrapping="Wrap"
Style="{StaticResource SubheaderTextStyle}"
MaxHeight="60"
FontSize="20"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
<Grid
Height="Auto">
<TextBlock
Text="Textblock"
Margin="5,10,0,0"
Style="{StaticResource BasicTextStyle}"
MaxHeight="60"
FontSize="20"
FontWeight="Bold" />
</Grid>
<Grid
Height="Auto">
<TextBlock
Text="Textblock: "
Margin="5,0,0,0"
Style="{StaticResource BasicTextStyle}"
MaxHeight="60"
FontSize="20" />
<TextBlock
Text="{Binding Name}"
Margin="152,0,0,0"
Style="{StaticResource BasicTextStyle}"
FontSize="20" />
</Grid>
<Grid
Height="Auto">
<TextBlock
Text="Textblock: "
Margin="5,0,0,0"
Style="{StaticResource BasicTextStyle}"
MaxHeight="60"
FontSize="20" />
<TextBlock
Text="{Binding Name}"
Margin="152,0,0,0"
Style="{StaticResource BasicTextStyle}"
FontSize="20" />
</Grid>
<Grid
Height="Auto">
<TextBlock
Text="Textblock: "
Margin="5,0,0,0"
Style="{StaticResource BasicTextStyle}"
MaxHeight="60"
FontSize="20" />
<TextBlock
Text="{Binding Name}"
Margin="152,0,0,0"
Style="{StaticResource BasicTextStyle}"
FontSize="20" />
</Grid>
<Grid
Height="Auto">
<TextBlock
Text="Textblock: "
Margin="5,0,0,0"
Style="{StaticResource BasicTextStyle}"
MaxHeight="60"
FontSize="20" />
<TextBlock
Text="{Binding Name}"
Margin="152,0,0,0"
Style="{StaticResource BasicTextStyle}"
FontSize="20" />
</Grid>
<Grid
Height="Auto">
<TextBlock
Text="Textblock: "
Margin="5,0,0,0"
Style="{StaticResource BasicTextStyle}"
MaxHeight="60"
FontSize="20" />
<TextBlock
Text="{Binding Name}"
Margin="152,0,0,0"
Style="{StaticResource BasicTextStyle}"
FontSize="20" />
</Grid>
<Grid
Height="Auto">
<TextBlock
Text="Textblock: "
Margin="5,0,0,0"
Style="{StaticResource BasicTextStyle}"
MaxHeight="60"
FontSize="20" />
<TextBlock
Text="{Binding Name}"
Margin="152,0,0,0"
Style="{StaticResource BasicTextStyle}"
FontSize="20" />
</Grid>
</StackPanel>
</ScrollViewer>
</Border>
</Grid>
</ScrollViewer>
</Grid>
Следующий метод, который я попробовал упростить вещи в более логичную сетку, но все еще не может заставить его работать. Представь TextBlockтам 30 рядов. Здесь, когда запустить, ScrollBar показывает, но ничего не делает, даже если текст явно находится за пределами области границы, и вы не можете видеть нижнюю часть области границы.
Теперь это пример кода непосредственно из моего кода, от верхней части страницы до нижней части рассматриваемой сетки:
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}" />
<TextBlock x:Name="pageTitle" Grid.Column="1" Text="text" Style="{StaticResource PageHeaderTextStyle}" />
</Grid>
<Grid x:Name="PersonViewContent" Grid.Row="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Grid.Row="0" Grid.Column="0" BorderBrush="Black" BorderThickness="5" Width="500" Margin="10,10,10,10">
<ScrollViewer>
<StackPanel>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="270" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.ColumnSpan="2" Margin="10,10,10,10" VerticalAlignment="Bottom">
<Image Source="text" AutomationProperties.Name="text" ScrollViewer.VerticalScrollBarVisibility="Disabled" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="text"/>
<TextBlock Text="text" Margin="0,180,0,0" TextWrapping="Wrap" Style="{StaticResource SubheaderTextStyle}" MaxHeight="60" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Text="text" Margin="0,215,0,0" TextWrapping="Wrap" Style="{StaticResource SubheaderTextStyle}" MaxHeight="60" FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
<TextBlock Grid.Row="1" Grid.ColumnSpan="2" Text="text" Margin="5,0,18,10" TextWrapping="Wrap" Style="{StaticResource SubheaderTextStyle}" MaxHeight="60" FontSize="30"/>
<TextBlock Grid.Row="2" Grid.ColumnSpan="2" Text="text" Margin="5,10,0,0" Style="{StaticResource ViewPersonTextDataHeaderStyle}"/>
<TextBlock Grid.Row="3" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="3" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="4" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="4" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="5" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="5" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="6" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="6" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="7" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="7" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="8" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="8" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="9" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="9" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="10" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="10" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="11" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="11" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="12" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="12" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="13" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="13" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="14" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="14" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="15" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="15" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="16" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="16" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="17" Grid.ColumnSpan="2" Text="text" Margin="5,20,0,0" Style="{StaticResource ViewPersonTextDataHeaderStyle}"/>
<TextBlock Grid.Row="18" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="18" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="19" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="19" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="20" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="20" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="21" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="21" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="22" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="22" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="23" Grid.ColumnSpan="2" Text="text" Margin="5,20,0,0" Style="{StaticResource ViewPersonTextDataHeaderStyle}"/>
<TextBlock Grid.Row="24" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="24" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="25" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="25" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="26" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="26" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="27" Grid.Column="0" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="27" Grid.Column="1" Text="text" Margin="5,0,0,0" Style="{StaticResource ViewPersonTextDataStyle}"/>
<TextBlock Grid.Row="28" Grid.ColumnSpan="2" Text="text" Margin="5,20,0,0" Style="{StaticResource ViewPersonTextDataHeaderStyle}"/>
<TextBlock Grid.Row="29" Grid.ColumnSpan="2" Text="text" Margin="5,0,0,0" Style="{StaticResource BasicTextStyle}" IsTapEnabled="False" IsRightTapEnabled="False" IsHoldingEnabled="False" IsDoubleTapEnabled="False" FontSize="16"/>
</Grid>
</StackPanel>
</ScrollViewer>
</Border>
Во всяком случае, крутя мои колеса на этом... надеясь на предложение
Отредактировано: Вот примерно эскиз схемы, которую я пытаюсь достичь:
|=========================================
|back button and title area |
| |
| |===============| |
| | | Grid View here for |
| | Picture area | other stuff that the |
| | | User can click on |
| | Start of text | |
| | data of all | |
| | textblocks | |
| | 30+ rows | |
| | textblock | |
| | textblock | |
| | textblock | |
| | textblock | |
| | textblock | |
| | textblock | |
| | textblock | |
| | textblock | |
| |===============| |
|========================================|
2 ответа
Что ж, оказывается, это не то, что я делаю неправильно, в частности. это больше атрибут Auto для строк / столбцов, которые я использовал. Это заставляет строку уходить с экрана (не знаю почему), поэтому полоса прокрутки относительно бессмысленна.
В сущности, заново все делали для того, чтобы сделать оснастку, а не щелкнуть иначе и позаботиться обо всем выравнивании.
Из представленного вами изображения ASCII кажется, что вы можете достичь желаемого макета, используя комбинацию Grid, StackPanel и ScrollViewer.
<Page
x:Class="App15.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App15"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="Gray">
<Grid.RowDefinitions>
<RowDefinition Height="140" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.ColumnSpan="2" Orientation="Horizontal" Background="DarkCyan">
<Button Style="{StaticResource BackButtonStyle}" />
<TextBlock Text="Go Back" Style="{StaticResource PageHeaderTextStyle}" />
</StackPanel>
<ScrollViewer Background="DarkOrange" Grid.Row="1">
<StackPanel Margin="20">
<Border Background="Crimson" Height="100">
<TextBlock Foreground="Black">Put picture here</TextBlock>
</Border>
<TextBlock>tb1</TextBlock>
<TextBlock>tb2</TextBlock>
<TextBlock>tb3</TextBlock>
<TextBlock>...</TextBlock>
<TextBlock>tb28</TextBlock>
<TextBlock>tb29</TextBlock>
<TextBlock>tb30</TextBlock>
</StackPanel>
</ScrollViewer>
<GridView Background="DarkViolet" Grid.Row="1" Grid.Column="1">
<GridViewItem>gvi1</GridViewItem>
<GridViewItem>gvi2</GridViewItem>
<GridViewItem>gvi3</GridViewItem>
</GridView>
</Grid>