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

Question

Хорошо, у меня есть Grid, который автоматически выбирает размер для веб-браузера. Там у меня есть Canvas с нарисованными на нем фигурами. Я хочу, чтобы холст растягивался, чтобы заполнить страницу. Я попытался использовать Viewbox из набора инструментов Silverlight 3 10/09, но он, кажется, не заполняет все пространство в сетке и работает только тогда, когда я даю ему точное количество пикселей.

У кого-нибудь есть идеи?

Пример XAML:

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

   <toolkit:Viewbox Stretch="Fill">
      <Canvas 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>
   </toolkit:Viewbox>
</Grid>

Answer 1

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

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

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

Спасибо,

Scott

EDIT:

Если я вас правильно понимаю, у вас есть сетка 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>

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

Сетка с автоматическими размерами 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>

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

Спасибо!

Answer 2

Попробуйте.

Установите Width и Height Canvas внутри ViewBox на ActualWidth и ActualHeight Border/Grid.

<Border x:Name="border">
    <Viewbox HorizontalAlignment="Left" VerticalAlignment="Top">
        <Canvas Width="{Binding ActualWidth, ElementName=border}" Height="{Binding ActualHeight, ElementName=border}"/>
    </Viewbox>
</Border>

Я использую Silverlight 4.

Answer 3

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>

Answer 4

Я пытался ответить только на @ barcrab, я пытался использовать ActualWidth, но это не сработало. Так что для других здесь есть обходной путь к ActualWidth, не работающему.

Не работает привязка к ActualWidth

ржавые

Answer 5

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

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

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

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

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

Answer 6

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

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

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

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

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

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

Это заставит Canvas занять всю внутреннюю область Grid.

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