1

I am new to metro app development, I want a layout that is left side an image right side several lines containing the image info but the problems is the last line contains a long paragraph and it does not wrap the paragraph

Here is my 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>

As you see after the outer is a stack panel, that contains two items which is an image and a grid, i wish to list the lines inside the grid so I create eight rows, containing 4 information, the last information is a Description of a long text, but above XAML produces overlapping text beside the image.

Thanks.

4

2 回答 2

1

You should set Grid.Row property on TextBlock to move it to next row -

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

OR

Simply put them in stackPanel instead, it will automatically be vertically oriented -

<StackPanel>
   <Image/>
   <TextBlock/>
   <TextBlock/>
   <TextBlock/>
   <TextBlock/>
   <TextBlock/>
   <TextBlock/>
   <TextBlock/>
   <TextBlock/>
</StackPanel>
于 2013-11-10T14:08:20.107 回答
1

Hi for that you can assign width to your controll from cs file: XAML:

CS: this.InitializeComponent(); txt_disc.Width = Window.Current.Bounds.Width;

于 2013-11-10T14:34:42.587 回答