Компоновка XAML - это ничего не текстовая упаковка в WP7.5

Question

Я столкнулся с какой-то странной проблемой с некоторым макетом XAML в Silverlight для Windows Phone 7.5.По сути, я создаю несколько текстовых полей в сетке на холсте, используя свои собственные маркеры.Проблема заключается в том, что первая маркированная точка (см. Ниже) имеет расширенное текстовое поле без видимой причины.Похоже, что это TextWrapping без текста.Смотрите расстояние ниже первой точки маркера.Вы также заметите, что это обрезает некоторый текст на третьем маркере:

НЕПРАВИЛЬНЫЙ ПЛАН:

Вот код для <Canvas/> объекта, который размещаетсявсе пункты текста и маркированного списка:

  <Canvas Canvas.Left="20.21" Canvas.Top="66" Width="775.96" Height="224.17">
    <Grid Canvas.Top="3.6" Canvas.Left="7.2" Width="762.06" Height="216.97">
      <Grid VerticalAlignment="Top">
        <Grid.RowDefinitions>
          <RowDefinition Height="Auto" />
          <RowDefinition Height="Auto" />
          <RowDefinition Height="Auto" />
          <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid Grid.Row="0">
          <TextBlock LineHeight="21.6" LineStackingStrategy="BlockLineHeight" TextWrapping="Wrap" TextAlignment="Left" Foreground="#FFFFFF" FontFamily="Segoe WP" FontSize="18">
            <Run Text="The Ribbon bar in PowerPoint 2007 and 2010 replaces the menu bar in previous versions. It is designed to provide quick access to the most common features used in PowerPoint." />
          </TextBlock>
        </Grid>
        <Grid Grid.Row="1" Margin="0 0 0 6">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0" />
            <ColumnDefinition Width="22.5" />
            <ColumnDefinition />
          </Grid.ColumnDefinitions>
          <Grid Grid.Column="1">
            <Grid.RowDefinitions>
              <RowDefinition Height="Auto" />
              <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <TextBlock Grid.Row="0" LineHeight="15.12" Foreground="#D80073" FontFamily="Wingdings" FontSize="12.6" LineStackingStrategy="BlockLineHeight">
              <Run Text="" />
            </TextBlock>
          </Grid>
          <TextBlock Grid.Column="2" LineHeight="19.2" LineStackingStrategy="BlockLineHeight" TextWrapping="Wrap" TextAlignment="Left" Foreground="#FFFFFF" FontFamily="Segoe WP">
            <Run Text="The " FontSize="16" /><Run Text="R" FontSize="16" /><Run Text="ibbon is " FontSize="16" /><Run Text="made up of various tabs that provide a fast way of performing tasks. For example, if you need to insert a picture, you click the " FontSize="16" /><Run Text="Insert" FontSize="16" FontWeight="Bold" /><Run Text=" tab and then picture. If you need to create an animation, you click on the " FontSize="16" /><Run Text="Animations" FontSize="16" FontWeight="Bold" /><Run Text=" tab and then, with any object selected, simply select the animation you prefer." FontSize="16" />
          </TextBlock>
        </Grid>
        <Grid Grid.Row="2" Margin="0 0 0 6">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0" />
            <ColumnDefinition Width="22.5" />
            <ColumnDefinition />
          </Grid.ColumnDefinitions>
          <Grid Grid.Column="1">
            <Grid.RowDefinitions>
              <RowDefinition Height="Auto" />
              <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <TextBlock Grid.Row="0" LineHeight="15.12" Foreground="#D80073" FontFamily="Wingdings" FontSize="12.6" LineStackingStrategy="BlockLineHeight">
              <Run Text="" />
            </TextBlock>
          </Grid>
          <TextBlock Grid.Column="2" LineHeight="19.2" LineStackingStrategy="BlockLineHeight" TextWrapping="Wrap" TextAlignment="Left" Foreground="#FFFFFF" FontFamily="Segoe WP">
            <Run Text="Some " FontSize="16" /><Run Text="R" FontSize="16" /><Run Text="ibbon " FontSize="16" /><Run Text="bars are contextual – meaning they only appear when you’ve selected the corresponding object. The Drawing (shape), Picture (image) and Table (table) tabs become available and highlighted when you’ve selected those objects." FontSize="16" />
          </TextBlock>
        </Grid>
        <Grid Grid.Row="3" Margin="0 0 0 6">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0" />
            <ColumnDefinition Width="22.5" />
            <ColumnDefinition />
          </Grid.ColumnDefinitions>
          <Grid Grid.Column="1">
            <Grid.RowDefinitions>
              <RowDefinition Height="Auto" />
              <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <TextBlock Grid.Row="0" LineHeight="15.12" Foreground="#D80073" FontFamily="Wingdings" FontSize="12.6" LineStackingStrategy="BlockLineHeight">
              <Run Text="" />
            </TextBlock>
          </Grid>
          <TextBlock Grid.Column="2" LineHeight="19.2" LineStackingStrategy="BlockLineHeight" TextWrapping="Wrap" TextAlignment="Left" Foreground="#FFFFFF" FontFamily="Segoe WP">
            <Run Text="Also" FontSize="16" /><Run Text=", when your PowerPoint application is resized, the Ribbon will minimize or display buttons. This means that the command is still available, but it may look and act slightly different" FontSize="16" /><Run Text="." FontSize="16" />
          </TextBlock>
        </Grid>
      </Grid>
    </Grid>
  </Canvas>

Полная копия страницы XAML (UserControl) и изображений находится на DropBox .

Я нашел дваРучные способы исправить это:

1. Из первого текста маркера удалите все три буквы.Это приводит к удалению нижнего промежутка.Это немного странно, так как текст в строке № 2 первого маркера простирается до ширины сетки, а в третьем не подходит так близко, поэтому не имеет смысла, почему это «исправит»выпуск.
2. Поместите <RowDefinition Height="*" /> во второй ряд в первой сетке вместо <RowDefinition Height="Auto" />.Это непредсказуемо, хотя - если я установлю его на * для других строк, он снова потеряет размеры.Я делаю это кодирование из автоматизации, поэтому я не смогу предсказать проблемную строку, если не буду заранее точно знать, в чем может быть проблема, чтобы установить ее как * вместо Auto.

Вот как это выглядит, если выложено правильно (используя # 2 выше):

ПРАВИЛЬНЫЙ ПЛАН

Кто-нибудь знает, что именно здесь не так с этим «поддельным обертыванием текста» и как это исправить / предсказать?

Answer 1

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

Я использую один DockPanel для каждой комбинации маркера и текста, заменяя два Grid, использовавшихся ранее:

<Canvas Canvas.Left="20.21" Canvas.Top="66" Width="775.96" Height="224.17">
    <Grid Canvas.Top="3.6" Canvas.Left="7.2" Width="762.06" Height="216.97">
        <Grid VerticalAlignment="Top">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid Grid.Row="0">
                <TextBlock LineHeight="21.6" LineStackingStrategy="BlockLineHeight" TextWrapping="Wrap" TextAlignment="Left" Foreground="#FFFFFF" FontFamily="Segoe WP" FontSize="18">
                    <Run Text="The Ribbon bar in PowerPoint 2007 and 2010 replaces the menu bar in previous versions. It is designed to provide quick access to the most common features used in PowerPoint." />
                </TextBlock>
            </Grid>
            <my:DockPanel Grid.Row="1" HorizontalAlignment="Left" Name="dockPanel1" VerticalAlignment="Top" Margin="0 0 0 6">
                <TextBlock Width="22.5" LineHeight="15.12" Foreground="#D80073" FontFamily="Wingdings" FontSize="12.6" LineStackingStrategy="BlockLineHeight">
                    <Run Text="" />
                </TextBlock>
                <TextBlock LineHeight="19.2" LineStackingStrategy="BlockLineHeight" TextWrapping="Wrap" TextAlignment="Left" Foreground="#FFFFFF" FontFamily="Segoe WP">
                    <Run Text="The " FontSize="16" /><Run Text="R" FontSize="16" /><Run Text="ibbon is " FontSize="16" /><Run Text="made up of various tabs that provide a fast way of performing tasks. For example, if you need to insert a picture, you click the " FontSize="16" /><Run Text="Insert" FontSize="16" FontWeight="Bold" /><Run Text=" tab and then picture. If you need to create an animation, you click on the " FontSize="16" /><Run Text="Animations" FontSize="16" FontWeight="Bold" /><Run Text=" tab and then, with any object selected, simply select the animation you prefer." FontSize="16" />
                </TextBlock>
            </my:DockPanel>
            <my:DockPanel Grid.Row="2" HorizontalAlignment="Left" Name="dockPanel2" VerticalAlignment="Top" Margin="0 0 0 6">
                <TextBlock Width="22.5" LineHeight="15.12" Foreground="#D80073" FontFamily="Wingdings" FontSize="12.6" LineStackingStrategy="BlockLineHeight">
                    <Run Text="" />
                </TextBlock>
                <TextBlock LineHeight="19.2" LineStackingStrategy="BlockLineHeight" TextWrapping="Wrap" TextAlignment="Left" Foreground="#FFFFFF" FontFamily="Segoe WP">
                    <Run Text="Some " FontSize="16" /><Run Text="R" FontSize="16" /><Run Text="ibbon " FontSize="16" /><Run Text="bars are contextual – meaning they only appear when you've selected the corresponding object. The Drawing (shape), Picture (image) and Table (table) tabs become available and highlighted when you've selected those objects." FontSize="16" />
                </TextBlock>
            </my:DockPanel>
            <my:DockPanel Grid.Row="3" HorizontalAlignment="Left" Name="dockPanel3" VerticalAlignment="Top" Margin="0 0 0 6">
                <TextBlock Width="22.5" LineHeight="15.12" Foreground="#D80073" FontFamily="Wingdings" FontSize="12.6" LineStackingStrategy="BlockLineHeight">
                    <Run Text="" />
                </TextBlock>
                <TextBlock Grid.Column="2" LineHeight="19.2" LineStackingStrategy="BlockLineHeight" TextWrapping="Wrap" TextAlignment="Left" Foreground="#FFFFFF" FontFamily="Segoe WP">
                    <Run Text="Also" FontSize="16" /><Run Text=", when your PowerPoint application is resized, the Ribbon will minimize or display buttons. This means that the command is still available, but it may look and act slightly different" FontSize="16" /><Run Text="." FontSize="16" />
                </TextBlock>
            </my:DockPanel>
        </Grid>
    </Grid>
</Canvas>

Эта панель может также хорошо подходить для других частей вашего макета.

Answer 2

Я не уверен, зачем вам это Canvas, чтобы обернуть Grid.

<Canvas Canvas.Left="20.21" Canvas.Top="66" Width="775.96" Height="224.17">

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

<Grid Canvas.Top="70" Canvas.Left="27" MaxWidth="762.06">

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

Еще одно внесенное мной изменение было заменено Width на MaxWidth, таким образом, Width теперь имеет автоматический размер, если вы перекомпилируетеВ вашем проекте вы увидите, что слово prefer. теперь переходит на вторую строку и отлично заполняет пробел.

Я думаю, что настоящая проблема в том, что если вы дадите TextBlock фиксированный Width, сначала он подумаетword prefer. необходимо перейти к следующей строке, но поскольку Width является фиксированным значением, оно все равно сжимает его в конце строки.Чтобы избежать этого, вы, вероятно, захотите сделать Width авторазмера.

Я могу ошибаться, но надеюсь, что это может помочь.:)