3

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

不是完整的代码——不确定你是否需要它。

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

1 回答 1

4

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>
于 2015-11-30T11:14:31.023 回答