Question

我是Metro应用程序开发的新手，我想要一个左侧图像右侧的布局包含图像信息的几行，但问题是最后一行包含一个长段并且它不包装段落

这是我的XAML

<StackPanel x:Name="imagePanel" Grid.Row="2" Orientation="Horizontal">
                <Image x:Name="displayImage" Source="{Binding ImagePath}"/>
                <Grid Margin="20,0,0,0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="20"/>
                        <RowDefinition Height="20"/>
                        <RowDefinition Height="20"/>
                        <RowDefinition Height="20"/>
                        <RowDefinition Height="20"/>
                        <RowDefinition Height="20"/>
                        <RowDefinition Height="20"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <TextBlock TextWrapping="Wrap" Text="Title" Style="{StaticResource CaptionTextBlockStyle}"/>
                    <TextBlock TextWrapping="Wrap" Text="{Binding Title}" Style="{StaticResource BodyTextBlockStyle}" Margin="10,0,0,30"/>
                    <TextBlock TextWrapping="Wrap" Text="Vintage" Style="{StaticResource CaptionTextBlockStyle}"/>
                    <TextBlock TextWrapping="Wrap" Text="{Binding Vintage}" Style="{StaticResource BodyTextBlockStyle}" Margin="10,0,0,30"/>
                    <TextBlock TextWrapping="Wrap" Text="Status" Style="{StaticResource CaptionTextBlockStyle}"/>
                    <TextBlock TextWrapping="Wrap" Text="{Binding Status}" Style="{StaticResource BodyTextBlockStyle}" Margin="10,0,0,30"/>
                    <TextBlock TextWrapping="Wrap" Text="Synopsis" Style="{StaticResource CaptionTextBlockStyle}"/>
                    <TextBlock TextWrapping="Wrap" Text="{Binding Description}" Style="{StaticResource BodyTextBlockStyle}" Margin="10,0,0,30" />
                </Grid>
            </StackPanel>

如你所见，外部是一个堆栈面板，它包含两个项目，一个图像和一个网格，我希望列出网格内的行，所以我创建八行，包含4个信息，最后一个信息是描述长文本，但在XAML之上会在图像旁边生成重叠文本。

感谢。

Answer 1

您应该在TextBlock上设置Grid.Row属性以将其移至下一行 -

<TextBlock  Grid.Row="1"/>
<TextBlock  Grid.Row="2"/>
<TextBlock  Grid.Row="3"/>

OR

简单地将它们放在stackPanel中，它将自动垂直定向 -

<StackPanel>
   <Image/>
   <TextBlock/>
   <TextBlock/>
   <TextBlock/>
   <TextBlock/>
   <TextBlock/>
   <TextBlock/>
   <TextBlock/>
   <TextBlock/>
</StackPanel>

Answer 2

您好，您可以从cs文件中为控件分配宽度： XAML：

CS： this.InitializeComponent（）; txt_disc.Width = Window.Current.Bounds.Width;

Metro App显示图像和信息

2 个答案: