ScrollViewer不起作用

时间:2017-08-03 19:15:54

标签: uwp uwp-xaml

无法理解为什么我的ScrollViewer不起作用......在我的XAML下面是:

<Page
    x:Class="Colibry.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Colibry"
    xmlns:controls="using:Colibry.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid x:Name="MainGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="WideState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="720"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="MainGrid.Margin" Value="24"/>
                        <Setter Target="MainGrid.RowDefinitions[1].Height" Value="auto"/>
                        <Setter Target="MainGrid.ColumnDefinitions[1].Width" Value="*"/>
                        <Setter Target="firstLayout.Margin" Value="0 0 6 0"/>
                        <Setter Target="secondLayout.Margin" Value="6 0 0 0"/>
                        <Setter Target="secondLayout.(Grid.Column)" Value="1"/>
                        <Setter Target="secondLayout.(Grid.Row)" Value="0"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="NarrowState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="MainGrid.Margin" Value="12"/>
                        <Setter Target="firstLayout.Margin" Value="0 0 0 6"/>
                        <Setter Target="secondLayout.Margin" Value="0 6 0 0"/>
                        <Setter Target="MainGrid.RowDefinitions[1].Height" Value="*"/>
                        <Setter Target="MainGrid.ColumnDefinitions[1].Width" Value="auto"/>
                        <Setter Target="secondLayout.(Grid.Column)" Value="0"/>
                        <Setter Target="secondLayout.(Grid.Row)" Value="1"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.Resources >
            <Style TargetType="Border" >
                <Setter Property="Padding" Value="0,25,0,0" />
            </Style>
        </Grid.Resources>
        <!-- Controls -->
        <controls:ColorPicker x:Name="firstLayout" Grid.Column="0" Grid.Row="0" />
        <Grid x:Name="secondLayout" Grid.Column="1" Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <ComboBox x:Name="comboColorModel" Header="Color model"  ItemsSource="{x:Bind colorModels}" SelectedIndex="{x:Bind SelectedColorModelIndex}" SelectionChanged="ComboColorModel_SelectionChanged" />
            <ScrollViewer Grid.Column="0" Grid.Row="1" VerticalAlignment="Stretch" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
                <Border x:Name="container" Height="900" />
            </ScrollViewer>
        </Grid>
    </Grid>
</Page>

我为Border设置了固定高度,但ScrollViewer只是忽略Border大小。我做错了什么?

2 个答案:

答案 0 :(得分:1)

您已经定义了 ScrollViewer 而没有指定 Height 并将 Auto 高度放入网格行 - 这不起作用。 ScrollViewer 必须知道它的高度(或能够计算它)。一种可能的方法是从行中删除auto并让scrollviewer显式拉伸或设置其高度。

<Grid.RowDefinitions>
    <RowDefinition/>
    <RowDefinition/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Column="0" Grid.Row="1" VerticalAlignment="Stretch" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">

答案 1 :(得分:0)

用此

替换你的secondlayout
    <Grid x:Name="secondLayout" Grid.Column="1" Grid.Row="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <ComboBox x:Name="comboColorModel" Header="Color model"  ItemsSource="{x:Bind colorModels}" SelectedIndex="{x:Bind SelectedColorModelIndex}" SelectionChanged="ComboColorModel_SelectionChanged" />
        <ScrollViewer Grid.Column="0" Grid.Row="1" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
            <Border x:Name="container" />
        </ScrollViewer>
    </Grid>