Макет XAML ничего не переносит в текст в WP7.5

#silverlight #xaml #windows-phone-7

#silverlight #xaml #windows-phone-7

Вопрос:

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

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

неправильный макет

Вот код для <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 первого маркера распространяется на ширину сетки, а в 3-м не подходит так близко, поэтому не имеет смысла, почему это «исправит» проблему.
  2. Поместите a <RowDefinition Height="*" /> во вторую строку в первой сетке вместо <RowDefinition Height="Auto" /> . Однако это непредсказуемо — если я установлю его * для других строк, он снова будет иметь неправильные размеры. Я делаю это кодирование из автоматизации, поэтому я не смогу предсказать проблемную строку, если я точно не знаю, в чем может быть проблема заранее, чтобы установить ее как * вместо Auto .

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

ПРАВИЛЬНЫЙ МАКЕТ

правильная компоновка

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

Комментарии:

1. Просто любопытно, откуда у вас эти красивые изображения телефонов Nokia? 🙂

2. @Xin: вы можете получить их отсюда: wp7emuskinswitcher.codeplex.com

Ответ №1:

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

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

Я загрузил ваш файл и удалил это Canvas , а также изменил атрибуты inner Grid на что-то вроде этого,

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

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

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

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

Возможно, я ошибаюсь, но надеюсь, что это может помочь. 🙂

Ответ №2:

Каким-то образом комбинация всех этих фиксированных значений делает перенос странным. У меня есть предложение, которое решает проблему переноса при сохранении большинства этих значений. 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>
  

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