Gridview StackPanel对齐

时间:2016-02-14 20:48:46

标签: xaml gridview windows-10 win-universal-app

您好我正在开发UWP应用程序,并遇到了一些设计问题。我正在尝试将项目置于GridView中心,但每当我这样做时,我最终会在左侧和右侧浪费空间(如下图所示),并且滚动条朝向中心。如何在Gridview中居中,而不会在两侧浪费空间并且最右侧有滚动条。蓝色轮廓表示堆栈面板,灰色表示GridView。谢谢。

enter image description here

    <Page.Resources>
    <DataTemplate x:Key="FormulaTemplate" x:DataType="data:Formulas">
        <StackPanel HorizontalAlignment="Center">
            <Image Width="230" Height="150" Source="{x:Bind CoverImage}" Stretch="None"/>
            <TextBlock Text="{x:Bind Title}" HorizontalAlignment="Center" FontSize="12" TextWrapping="Wrap" />
        </StackPanel>
    </DataTemplate>
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Pivot Margin="0,0,0,0" Background="LightGray">
        <PivotItem Header="Formulas">
            <Grid Margin="0,0,-12,0">
                <GridView ItemsSource="{x:Bind formula}" ItemTemplate="{StaticResource FormulaTemplate}" HorizontalAlignment="Center" HorizontalContentAlignment="Center">
                    <GridView.ItemContainerStyle>
                        <Style TargetType="GridViewItem">
                            <Setter Property="Margin" Value="0, 0, 20, 20"/>
                        </Style>
                    </GridView.ItemContainerStyle>

                </GridView>
            </Grid>
        </PivotItem>

    </Pivot>
</Grid>

1 个答案:

答案 0 :(得分:1)

enter image description here

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Pivot Margin="0,0,0,0" Background="LightGray">
            <PivotItem Header="Formulas">
                <Grid>
                    <GridView HorizontalAlignment="Stretch" HorizontalContentAlignment="Center" Background="#FF983636">
                    <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <VariableSizedWrapGrid Orientation="Horizontal" />
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>
                    <x:String>One</x:String>
                    <x:String>Two</x:String>
                    <x:String>Three</x:String>
                    <x:String>Four</x:String>
                </GridView>
                </Grid>
            </PivotItem>

        </Pivot>
</Grid>

这里的关键是HorizontalAlignment="Stretch" 在GridView上。