我正在尝试使用Xaml在网格上获取WinRT应用程序的滚动条。基本页面设置有顶部和中间部分的整体网格。在中间部分我放了另外一个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 | |
| |===============| |
|========================================|
答案 0 :(得分:0)
从您呈现的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>
答案 1 :(得分:0)
事实证明,特别是我做错了。它更像我正在使用的行/列的Auto属性。它使行离开屏幕(不确定原因)因此滚动条相对没有意义。
基本上,重新做了整个你的快照而不是啪啪啪啪不同,并且已经完成所有的对齐。