StackPanel to Grid

Question

Как конвертировать стековую панель в сетку?

            <DataTemplate >
              <Grid Margin="0,5">
                <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="Auto"/>
                  <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Image delay:LowProfileImageLoader.UriSource="{Binding image_uri}" Width="50" Height="50" VerticalAlignment="Top" Stretch="None" />
                <StackPanel  Grid.Column="1" >
                  <Line  Stroke="#4284B0" StrokeDashArray="4 2" X2="380"/>
                  <TextBlock  Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" Margin="{StaticResource PhoneHorizontalMargin}" MinHeight="20" Text="{Binding author_name}">
                <TextBlock.Foreground>
                    <SolidColorBrush Color="{StaticResource PhoneAccentColor}"/>
                </TextBlock.Foreground>
                  </TextBlock>
                  <TextBlock Text="{Binding text}"  Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" Margin="{StaticResource PhoneHorizontalMargin}" MinHeight="40" MaxHeight="180"/>
                  <TextBlock Text="{Binding Date_Time}" Style="{StaticResource PhoneTextSmallStyle}" Margin="{StaticResource PhoneHorizontalMargin}" Height="20" HorizontalAlignment="Left" Width="133"/>
                  <TextBlock Text="{Binding likes_count}" Style="{StaticResource PhoneTextSmallStyle}" Margin="181,-20,0,0" Height="20" Width="77" HorizontalAlignment="Left"/>
                  <TextBlock Text="{Binding comm_count}" Style="{StaticResource PhoneTextSmallStyle}" Margin="289,-20,0,0" Height="20" Width="77" HorizontalAlignment="Left"/>
                  <Image Height="21" Margin="154,-19,0,0" Source="/Images/like.png" HorizontalAlignment="Left" Width="20"/>
                  <Image Source="/Images/ico_comments.png" Stretch="Fill" HorizontalAlignment="Left" Width="21" Margin="264,-19,0,0" />
                </StackPanel>
              </Grid>
            </DataTemplate>

Я не знаю, как это сделать. Я попробовал:

<Grid  Grid.RowSpan="5" Margin="5,0,0,0" VerticalAlignment="Top" Width="380" >
                          <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                          </Grid.RowDefinitions>
                          <Line Grid.RowSpan="0" 

Но мой контент выглядит так, как будто он сошёл в кучу. Я хочу конвертировать, потому что мне нужно улучшить производительность.

Answer 1

Я предполагаю, что вы хотите, чтобы все, что было в StackPanel, теперь было в Grid.

<Grid Grid.Column="1">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <!--Add as many row definitions as you need-->
  </Grid.RowDefinitions>

  <Line Grid.Row="0" />
  <TextBlock Grid.Row="1" />

  <!-- The rest of your TextBlocks, Images etc. add a row number for each-->

</Grid>

Answer 2

Учитывая, что вы используете TextWrapping, и, похоже, для этого требуется динамическая высота, использование Grid не сильно отличается от использования панели стека.

И если вы не можете понять, как использовать Grid, я рекомендую вам прочитать учебник и, возможно, установить Expression Blend .

Это не совсем то место, где можно публиковать код, и ожидать, что люди конвертируют его для вас.

Answer 3

  <Grid x:Name="LayoutRoot" Background="Aqua" Margin="20" >
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Ellipse Fill="Red" Stroke="Black" MinWidth="75" MinHeight="75" Grid.Row="0" Stretch="Uniform"/>
        <Ellipse Fill="#FF57F61F" Stroke="Black" MinWidth="75" MinHeight="75"  Grid.Row="1"/>
        <Ellipse Fill="#FF3D13F0" Stroke="Black" Width="75" Height="75"  Grid.Row="2"/>

    </Grid>