2015-11-30 6 views
2

У меня проблема с моими элементами в этой сетке, не охватывающей ширину экрана. Извините, если мой код неаккуратный. Немного новое в этом. Спасибо заранее!Внутренние элементы в сетке UWP не растягиваются

Не полный код - не был уверен, если он вам понадобится.

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

Почему вы связываете свои стили к свойству HorizontalAlignment? Это две совершенно разные вещи. – Bart

+0

благодарит Барта за ваш ответ, у меня есть горизонтальная сетка, содержащая кнопки и текстовые поля, поэтому я хочу растянуть ее с шириной экрана :( – miratum

+2

Помимо того, что сказал Барт, ваш объект 'HorizontalAlignment = Stretch' in * StackPanel * с горизонтальным ориентация не имеет смысла. Также какова цель Grid.Column в StackPanel? – Romasz

ответ

3

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> 

 Смежные вопросы

  • Нет связанных вопросов^_^