I am trying to make a control that displays a news item. There is an image that will be given in any size, but the control can crop to a square. There is also a headline and teaser.
The headline and image will be on the same vertical level. The teaser will be beneath them:
I want the control to stretch vertically to accommodate any teaser and headline text.
Also, if there is no image present, I would like the text to slide over to the right.
Here is the XAML I am currently using:
<Grid x:Name="LayoutRoot" Background="Transparent">
<Image x:Name="Thumbnail" Width="89" HorizontalAlignment="Left" VerticalAlignment="Top" />
<TextBlock x:Name="Headline" Margin="93,0,0,0" Style="{StaticResource PhoneTextAccentStyle}" TextWrapping="Wrap" HorizontalAlignment="Left" Width="299" FontSize="23.333" VerticalAlignment="Top" />
<TextBlock x:Name="Teaser" HorizontalAlignment="Left" Margin="4,100,0,0" Style="{StaticResource PhoneTextSubtleStyle}" TextWrapping="Wrap" VerticalAlignment="Top" Width="384"/>
</Grid>
Do I want to be controlling the layout with Grid
rows and columns? Or do I want to be using margins? If the headline is short, and there is no image, how can I be sure that the teaser text will slide up to fill up the empty space?
Using margins for layout is not recommended. You can just use a Grid with 2 columns and rows:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image ... />
<TextBlock Grid.Column="1" ... />
<TextBlock Grid.Row="1" Grid.ColumnSpan="2" .../>
</Grid>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.