How can I make a horizontal line and center it?

Question

Here is what I still have.

When the phone is upright:

When the phone is horizontal:

Here is my XAML markup:

<StackPanel Margin="19 0 19 5"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="110" /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Image Grid.Column="0" Source="{Binding ImageUrl}" Stretch="Uniform" Margin="0 10 0 10"/> <StackPanel Grid.Column="1" Margin="14 0 0 0"> <TextBlock Text="{Binding Title}" FontSize="30" /> <TextBlock Text="{Binding ReleaseDate}" FontSize="22" Foreground="#E0A655"/> <TextBlock Text="{Binding Synopsis}" FontSize="22" TextWrapping="Wrap"/> </StackPanel> </Grid> <Line StrokeThickness="4" Stroke="#434343" X1="0" X2="350" Y1="13" Y2="13" /> </StackPanel> 

I would like the line to be the same as it is now, but with the center. But also, when the phone is horizontal, the line should be slightly larger to access the wider space available to it.

Is it possible?

Answer 1

You can have this size using margin to size your content instead of line items.

If this is not possible with Line (I really haven't checked), you can try using 1 pixel (or 4). Rectangle.

EDIT: with code snippet:

 <Line HorizontalAlignment="Stretch" Margin="50, 10, 50, 10" Stroke="Black" StrokeThickness="4" /> 

Answer 2

You can use Stretch so that your Line spans the entire width of the container. You can also use the left / right margins to add a small space on each side:

 <Line X1="0" X2="1" Stretch="Fill" Margin="20,0,20,0"/> 

Answer 3

Perhaps a little surprising in the first view: Lines (as well as other shapes - Rectangle, Ellipse ...) are FrameworkElements. You can handle them in the same way as, for example, TextBlock, that is, set sizes, alignments, margins, opacity, transforms, etc. You can even animate / bind properties that define the form (like Line.X1), since they are all DependencyProperties.