0

Xaml を使用して WinRT アプリのグリッドにスクロールバーを表示しようとしています。基本的なページ設定には、上部と中央のセクションのオーバー グリッドがあります。中央のセクション内に、2 行 2 列の別のグリッドを配置しました。そのグリッドの行 1 列 1 内に、表示するデータ内に別のグリッドを持つボーダーを配置し、ボーダー領域内にスクロール バーを配置したいと考えています。

私はこれについて頭を悩ませ、およそ3日間オンとオフを切り替え、ネット全体を検索しました

私はこれらの 2 つの方法を大まかに試しましたが、うまくいくと思いますが、うまくいきません。簡略化されていますが、テキスト ボックスのグリッドには、表示するテキスト ボックスのグリッドが約 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>

私が試した次の方法は、物事をより論理的なグリッドに単純化しましたが、それでも機能しません。TextBlock30 行の s を想像してみてください。ここでは、実行すると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     |                      |
| |===============|                      |
|========================================|
4

2 に答える 2

0

特に間違っているわけではないことがわかりました。それは、私が使用していた行/列の Auto 属性です。行が画面からはみ出すため (理由は不明)、スクロールバーは比較的無意味です。

基本的に、スナップを実行するために全体をやり直しましたが、スナップを変更せず、すべてのアライメントを処理しました。

于 2013-02-07T13:24:43.557 に答える
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>

于 2013-02-05T23:06:15.557 に答える