Сетка, Viewbox и Холст

A Canvas ожидает получить фиксированный размер. Это неподходящий тип контейнера для вашего сценария. Несмотря на свое название, иногда Grid является правильным контейнером для использования, даже если вам не нужно определять какие-либо строки или столбцы. (Кстати, сетка без определений аналогична таблице с одним столбцом шириной * и одной строкой с высотой *).

Следовательно, следующая разметка достигает вашей цели: -

<Grid>
    <controlsToolkit:Viewbox>
        <Grid>
            <Polygon StrokeThickness="3.0" Stroke="#ff000000" Fill="White" StrokeMiterLimit="1.0" Points=" 395.320,604.854 395.320,604.854 335.696,600.207 311.449,600.365 287.188,600.504 221.110,604.854 221.110,604.854 221.110,345.832 221.110,345.832 278.372,350.370 309.237,350.320 340.106,350.279 395.320,345.832 395.320,345.832 395.320,604.854 " />
            <Polygon StrokeThickness="3.0" Stroke="#ff000000" Fill="White" StrokeMiterLimit="1.0" Points=" 420.576,870.950 420.576,870.950 348.925,875.434 308.134,875.434 267.351,875.434 197.958,870.950 197.958,870.950 189.140,693.696 189.140,693.696 249.707,698.225 308.134,698.182 366.562,698.135 429.401,693.696 429.401,693.696 420.576,870.950 "  />
        </Grid>
     </controlsToolkit:Viewbox>
</Grid>

Технически сетка не требуется. Вы можете поместить Canvas прямо в корень, но для простоты я оставлю это как есть.

Обратите внимание, что Grid можно использовать без строк и столбцов как способ составить и расположить элементы управления на его поверхности. По умолчанию размер дочернего элемента будет таким, чтобы он заполнял сетку с настройками его полей и свойств выравнивания ( HorizontalAlignment и VerticalAlignment ).

В статье MSDN это объясняется следующим образом:

Вы можете точно позиционировать дочерний элемент элементы сетки с помощью сочетание свойства Маржа и свойства выравнивания.

Поскольку вы намереваетесь иметь только один элемент, холст, вы можете просто поместить его в сетку следующим образом:

<Grid>
    <Canvas Margin="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></Canvas>
</Grid>

Это приведет к тому, что холст займет всю внутреннюю область сетки .

Если вы не видите растянутый холст, вероятно, ваше предположение о размере сетки неверно. В этом случае установите для сетки и фона холста что-нибудь очевидное (и другое) и поиграйте с макетом.

Я думаю, что это не так, потому что вы не указываете расположение окна просмотра в сетке.

Вы должны добавить Grid.Row = "0" и Grid.Column = "0" в объявление окна просмотра, например:

<toolkit:Viewbox Grid.Row="0" Grid.Column="0" Stretch="Fill">

Это должно сработать, я делаю то же самое в пределах моего собственного контроля.

Редактировать: выберите параметр Uniform с stretch, если вы не хотите, чтобы ваши полигоны искажались.

Я думаю, что вы ищете что-то вроде этого:

<UserControl x:Class="DemoApplication.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid x:Name="LayoutRoot" Background="White">
    <Canvas Background="LightBlue" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Polygon StrokeThickness="3.0" Stroke="#ff000000" Fill="White" StrokeMiterLimit="1.0" Points=" 395.320,604.854 395.320,604.854 335.696,600.207 311.449,600.365 287.188,600.504 221.110,604.854 221.110,604.854 221.110,345.832 221.110,345.832 278.372,350.370 309.237,350.320 340.106,350.279 395.320,345.832 395.320,345.832 395.320,604.854 " />
        <Polygon StrokeThickness="3.0" Stroke="#ff000000" Fill="White" StrokeMiterLimit="1.0" Points=" 420.576,870.950 420.576,870.950 348.925,875.434 308.134,875.434 267.351,875.434 197.958,870.950 197.958,870.950 189.140,693.696 189.140,693.696 249.707,698.225 308.134,698.182 366.562,698.135 429.401,693.696 429.401,693.696 420.576,870.950 " />
    </Canvas>
</Grid>

Это содержимое Page.xaml. Обратите внимание, что я установил фон холста как LightBlue, чтобы вы могли точно видеть, куда идет холст (Растягивается по горизонтали и вертикали - Заполняет экран).

Вы можете проверить рабочую копию демонстрационного проекта здесь:

http://code.google.com/p/silverlight-canvas-layout-fill/

Наслаждайтесь!

Скотт

РЕДАКТИРОВАТЬ:

Если я вас правильно понял, у вас есть сетка Silverlight, которая заполняет все веб-браузеры по высоте и ширине независимо от размера браузера, примерно так (у меня светло-зеленый):

Зеленая сетка http://img192.imageshack.us/img192/7308/greengrid.jpg

Теперь вы хотите добавить две формы многоугольника в сетку внутри холста, но теперь вы хотите, чтобы сетка была такой же. размер как холст? Если это так, вы хотите, чтобы сетка (светло-зеленая) не отображалась, потому что ее размер изменяется до размера холста (светло-синий), например:

Зеленая сетка - синий холст http: //img4.imageshack. us / img4 / 1107 / greengridwithpolygons.jpg

Кроме того, я заметил в приведенном выше примере кода, что для холста заданы высота и ширина. Это высота и ширина, которые вам нужны для сетки? Кроме тебя' Вы не хотите, чтобы высота и ширина сетки устанавливались статически, верно?

Если это правда, вы хотите изменить код следующим образом:

<UserControl x:Class="DemoApplication.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid x:Name="LayoutRoot" Background="LightGreen" HorizontalAlignment="Center" VerticalAlignment="Center" >
        <Canvas Background="LightBlue" Width="617.589" Height="876.934">
            <Polygon StrokeThickness="3.0" Stroke="#ff000000" Fill="White" StrokeMiterLimit="1.0" Points=" 395.320,604.854 395.320,604.854 335.696,600.207 311.449,600.365 287.188,600.504 221.110,604.854 221.110,604.854 221.110,345.832 221.110,345.832 278.372,350.370 309.237,350.320 340.106,350.279 395.320,345.832 395.320,345.832 395.320,604.854 " />
            <Polygon StrokeThickness="3.0" Stroke="#ff000000" Fill="White" StrokeMiterLimit="1.0" Points=" 420.576,870.950 420.576,870.950 348.925,875.434 308.134,875.434 267.351,875.434 197.958,870.950 197.958,870.950 189.140,693.696 189.140,693.696 249.707,698.225 308.134,698.182 366.562,698.135 429.401,693.696 429.401,693.696 420.576,870.950 " />
        </Canvas>
    </Grid>
</UserControl>

Приведенный выше код приводит к следующему:

Auto-Sized Grid http://img192.imageshack.us/img192/ 9665 / gridfitscanvas.jpg

Обратите внимание, что точки полигонов, которые вы указываете, относятся к контейнеру (в вашем случае холсту). Таким образом, точки расположены низко на экране, но не соответствуют разным размерам окон.

Например, если у вас есть многоугольник, представляющий собой квадрат высотой 10 пикселей и шириной 10 пикселей, вы можете указать его следующим образом:

<Polygon StrokeThickness="3.0" Stroke="#ff000000" Fill="White" StrokeMiterLimit="1.0" Points="10,10 10,0 0,0 0,10" />

Обратите внимание, что точки находятся как можно ближе к левому верхнему углу (0,0 ) насколько это возможно, таким образом, мы можем легче размещать многоугольник на экране.

Что касается вашего вопроса, я думаю, что вы? Мы ищем два многоугольника, которые находятся внизу вашего браузера и остаются в центре. При изменении размера экрана они перемещаются, но остаются согласованными друг с другом. Это означает, что они всегда будут находиться в одном и том же положении независимо от размера экрана. Примерно так:

Тощий результат http://img9.imageshack.us/img9/1107/greengridwithpolygonscoy.jpg

Жирный результат http://img9.imageshack.us/img9/3306/greengridwithpolygonsco.jpg

Вот мой код (также обновленный в вышеуказанном проекте Google), который показывает многоугольники автоматического позиционирования. Обратите внимание, что у многоугольников есть новые точки, это исходная точка минус минимальное значение плюс 1,5 (половина толщины штриха). Таким образом, если изначально значение было 420.576,870.950 , оно превратилось в 232.936,178.754 , чтобы переместить его как можно ближе к (0,0) на экране. Это значительно упрощает его перенос в холст и перемещение именно туда, где вы хотите, на экране.

<UserControl x:Class="DemoApplication.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid x:Name="LayoutRoot" Background="LightGreen" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Bottom">
            <Polygon StrokeThickness="3.0" Margin="0,0,0,50" HorizontalAlignment="Center" Stroke="#ff000000" Fill="White" StrokeMiterLimit="1.0" Points="175.710, 260.522 116.086, 255.875 91.839, 256.033  67.578, 256.172 1.5, 260.522 1.5, 260.522 1.5, 1.5 1.5, 1.5 58.762, 6.038 89.627, 5.988 120.496, 5.947 175.710, 1.5 175.710, 1.5 175.710, 260.522" />
            <Polygon StrokeThickness="3.0" Margin="0,0,0,10" Stroke="#ff000000" HorizontalAlignment="Center" Fill="White" StrokeMiterLimit="1.0" Points="232.936,178.754 232.936,178.754 161.285,183.238 120.494,183.238 79.711,183.238 10.318,178.754 10.318,178.754 1.5,1.5 1.5,1.5 62.067,6.029 120.494,5.986 178.922,5.939 241.761,1.5 241.761,1.5 232.936,178.754" />
        </StackPanel>
    </Grid>
</UserControl>

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

Спасибо!