Как я могу нарисовать горизонтальную линию и отцентрировать ее? - PullRequest
Новая
       0

Как я могу нарисовать горизонтальную линию и отцентрировать ее?

7 голосов
/ 31 мая 2011

Вот что у меня есть.

Когда телефон находится в вертикальном положении:

enter image description here

Когда телефон находится в горизонтальном положении: enter image description here

Вот моя разметка XAML: 

<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>

Мне бы хотелось, чтобы линия была такой же ширины, как сейчас, но по центру. Но также, когда телефон находится в горизонтальном положении, линия должна быть немного больше, чтобы охватить более широкое пространство, доступное для него.

Возможно ли это?

Ответы [ 3 ]

12 голосов
/ 31 мая 2011

Вы можете использовать Stretch, чтобы Line занимал всю ширину контейнера. Вы также можете использовать левые / правые поля, чтобы добавить немного места с каждой стороны: 

<Line X1="0" X2="1" Stretch="Fill" Margin="20,0,20,0"/>
11 голосов
/ 31 мая 2011

Вы можете выбрать такой размер, используя маржу для определения размера вашего контента вместо позиций.

Если это невозможно с линией (я на самом деле не проверял), вы можете попытаться использовать прямоугольник высотой 1 пиксель (точнее 4).

РЕДАКТИРОВАТЬ: с фрагментом кода: 

<Line HorizontalAlignment="Stretch" Margin="50, 10, 50, 10" Stroke="Black" StrokeThickness="4" />
1 голос
/ 01 июня 2011

Возможно, немного удивительно с первого взгляда: линии (как и другие фигуры - Rectangle, Ellipse ...) - это FrameworkElements. Вы можете обрабатывать их так же, как, например, TextBlock, то есть задавать размеры, выравнивания, поля, прозрачность, преобразование и т. Д. Вы можете даже анимировать / связывать определяющие форму свойства (такие как Line.X1), так как они все являются DependencyProperties.

...