How can I draw a horizontal line and center it?

Question

Here's what I have so far.

When the phone is vertical:

When the phone is horizontal:

Here's 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'd like a line that is the same width as it currently is, but centered. But also when the phone is horizontal, the line should be a bit bigger to address the wider space available to it.

Is this possible?

Answer 1

You can have that kind of sizing by using margin to size your content instead of positions.

If that's not possible with a Line (I haven't really checked), you might try to use a 1 pixel high (or 4 rather) Rectangle.

EDIT: with a code snippet:

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

Answer 2

You can use Stretch to make your Line occupy the full width of the container. You can also use left / right margins to add a little space at each side:

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