Вопрос проектирования Silverlight / XAML - горизонтальное выравнивание (стыковка?) - PullRequest
1 голос
/ 30 сентября 2010

У меня есть вопрос относительно того, какой XAML использовать для достижения моего дизайна.В настоящее время у меня есть область изображения на экране, ширина может варьироваться.Над изображением у меня есть две панели инструментов, каждая с многочисленными кнопками.Один из них я хочу плавать / закрепить к левому краю изображения, а другой я хочу плавать / закрепить к правому краю.Конечно, по мере увеличения изображения панель инструментов справа должна оставаться пристыкованной к правому краю.Как этого достичь?

+--------------------------+                                +---------------+
|  TOOLBAR 1               |                                |  TOOLBAR 2    |
+--------------------------+                                +---------------+

+---------------------------------------------------------------------------+
|                                                                           |
|                                                                           |
|                                                                           |
|                    <----- VARIABLE-WIDTH IMAGE ----->                     |
|                                                                           |
|                                                                           |
|                                                                           |
+---------------------------------------------------------------------------+

Будем весьма благодарны за любые примеры кода XAML и краткое объяснение.Я нуб.

1 Ответ

4 голосов
/ 30 сентября 2010

Использовать сетку с двумя строками и двумя столбцами (с шириной столбца, установленной на Авто). Изображение будет охватывать оба столбца во втором ряду. Сетка с размером до ее содержимого, и по мере роста сетки (поскольку изображение выросло), выровненная по правому краю панель инструментов будет перемещаться, чтобы оставаться соответствующим образом по отношению к изображению. Вот пример в XAML с использованием прямоугольников вместо панелей инструментов и изображений:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Rectangle Name="Toolbar1" Fill="#FF894220" Width="200" Height="50" VerticalAlignment="Top" HorizontalAlignment="Left" Grid.Row="0" Grid.Column="0" />
    <Rectangle Name="Toolbar2" Fill="#FF894220" Width="200" Height="50" VerticalAlignment="Top" HorizontalAlignment="Right" Grid.Row="0" Grid.Column="1" />
    <Rectangle Name="Image" Fill="#FFB94222" Width="500" Height="100" VerticalAlignment="Top" HorizontalAlignment="Left" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" />
</Grid>

Измените ширину прямоугольника с именем «Изображение», чтобы увидеть эффект.

Надеюсь, это поможет ...

Chris

...