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 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 に答える