UWP Grid 中的内部项目不拉伸答案

【问题标题】：Inner Items in UWP Grid not stretchingUWP Grid 中的内部项目不拉伸
【发布时间】：2016-03-03 23:57:55
【问题描述】：

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

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

<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>

【问题讨论】：

为什么要将样式绑定到 HorizontalAlignment 属性？这是两个完全不同的东西。
感谢 Bart 的回复，我有一个包含按钮和文本框的水平网格，所以我想用屏幕宽度拉伸它:(
除了 Bart 所说的，你的项目在 StackPanel 中水平方向的HorizontalAlignment=Stretch 没有意义。 StackPanel 中 Grid.Column 的用途是什么？

标签： xaml uwp windows-10-universal

【解决方案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>

【讨论】：