UWP 网格中的内部项目未拉伸

Question

我在这个网格中没有跨越屏幕宽度的项目时遇到问题。抱歉，如果我的代码草率。这有点新鲜。提前致谢！

不是完整代码 - 不确定您是否需要它。

<Grid x:Name="grid" Margin="0,0,0,54" VerticalAlignment="Bottom" Height="39"  Style="{Binding HorizontalAlignment, ElementName=grid}" ScrollViewer.HorizontalScrollBarVisibility="Auto"  >


    <StackPanel Orientation="Horizontal" >

        <Button Margin="0,12,0,-2"  Height="32" Width="Auto"  HorizontalContentAlignment="Stretch">
            <Button.Content>
                <Image Source="images/icon1.png" Margin="-9.667,-3,-9.667,-1"/>
            </Button.Content>
        </Button>
        <Button Margin="0,12,0,-2"  Height="32" Width="Auto"  HorizontalContentAlignment="Stretch" >
            <Button.Content>
                <Image Source="images/icon2.png" Margin="-10,-3,-10,-1"/>
            </Button.Content>
        </Button>

        <Border Background="#d1d3d4" x:Name="typeHeader11" Grid.Column="1" Margin="0,24,0,9" RenderTransformOrigin="0.5,0.5" Width="17" HorizontalAlignment="Stretch">
            <Border.RenderTransform>
                <CompositeTransform ScaleX="-1"/>
            </Border.RenderTransform>
            <Image Source="images/like.png"></Image>
        </Border>
        <Border Background="#d1d3d4" x:Name="typeHeader" Grid.Column="2" Margin="0,24,0,9" Width="67" HorizontalAlignment="Stretch">
            <TextBlock Text="221" Width="20"  Margin="0,7,0,10"  FontSize="10.667" />
        </Border>
        <Border x:Name="typeHeader12" Grid.Column="1" Margin="0,24,0,9" RenderTransformOrigin="0.5,0.5" Width="17" HorizontalAlignment="Stretch">
            <Border.RenderTransform>
                <CompositeTransform ScaleX="-1"/>
            </Border.RenderTransform>
            <Image Source="images/dislike.png"></Image>
        </Border>
        <Border  x:Name="typeHeader2" Grid.Column="2" Margin="0,24,0,9" Width="56" HorizontalAlignment="Stretch">
            <TextBlock Text="221" Width="20"  Margin="0,7,0,10" Foreground="#FFFDF3F3" FontSize="10.667" />
        </Border>
        <Border x:Name="typeHeader13" Grid.Column="1" Margin="0,24,0,9" RenderTransformOrigin="0.5,0.5" Width="17" HorizontalAlignment="Stretch">
            <Border.RenderTransform>
                <CompositeTransform ScaleX="-1"/>
            </Border.RenderTransform>
            <Image Source="images/comment.png"></Image>
        </Border>
        <Border Background="#d1d3d4" x:Name="typeHeader3" Grid.Column="2" Margin="0,24,0,9" Width="57" HorizontalAlignment="Stretch">
            <TextBlock Text="221" Width="20"  Margin="0,7,0,10"  FontSize="10.667" />
        </Border>

    </StackPanel>
</Grid>

Answer 1

StackPanel 不拉伸，如果要将项目跨越到屏幕宽度，请使用 Grid 和 columns

<Grid x:Name="grid" ...>
     <Grid.ColumnDefinitions>
         <ColumnDefinition Width="Auto"/> // Auto adjust space
         <ColumnDefinition Width="Auto"/> // Auto adjust space
         <ColumnDefinition Width="*"/> // * = Stretch to fill
         <ColumnDefinition Width="Auto"/> // Auto adjust space
     </Grid.ColumnDefinitions>

     <Button Grid.Column="0" ... /> 
     <Button Grid.Column="1" ... /> 
     <Button Grid.Column="2" ... /> // This will now expand as you resize window
     <Button Grid.Column="3"  ... /> 
</Grid>

UWP 网格中的内部项目未拉伸

Inner Items in UWP Grid not stretching

xaml

uwp

windows-10-universal