Search code examples
.netxamlwindows-phone-7line

How can I draw a horizontal line and center it?

Here's what I have so far.

When the phone is vertical:

enter image description here

When the phone is horizontal: enter image description here

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?

Solution

  • 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" />