Как вертикально центрировать символ крыла в текстовом блоке xaml / C # / UWP

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

Большинство крыльев не центрированы по вертикали, но иногда используются в качестве графики, поэтому мне интересно, можно ли это сделать с разумными усилиями. Хороший способ сделать это с помощью xaml был бы идеальным, но было бы хорошо измерить метрику шрифта, а затем настроить высоту текстового блока.

Вот пример проблемы. Символ жесткого диска не отцентрирован по вертикали в рамке.

    <Border BorderBrush="Black" BorderThickness="10"  Background="White" HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBlock Text="&#x3b;" FontFamily="Wingdings" FontSize="230"/>
    </Border>

РЕДАКТИРОВАТЬ - изменен пример, чтобы очистить и использовать символ жесткого диска Wingdings, потому что череп и кости расположены достаточно близко к вертикальному центру, чтобы запутать вопрос. Символ привода явно не отцентрирован по вертикали. Моя цель - автоматически центрировать его по вертикали даже при изменении размера шрифта. Я вижу, что XAML не может этого сделать, но мне интересно, существуют ли какие-то запросы метрик шрифтов / текста, которые я мог бы использовать для этого.

РЕДАКТИРОВАТЬ 2 - добавление изображения (приведенный выше XAML, который имеет те же проблемы, что и все предлагаемые XAML (-ы):

Я пытаюсь сделать так, чтобы центр символа находился в центре текстового блока Я пытаюсь сделать так, чтобы центр символа находился в центре текстового блока


c# xaml uwp uwp-xaml
person br0therDave    schedule 14.12.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Череп и кости не отцентрированы по вертикали на границе.

На самом деле по умолчанию текст черепа и костей должен располагаться вертикально по центру. Причина, по которой ваш код выглядит не вертикально, заключается в том, что размер шрифта слишком велик, чтобы находиться внутри границы, поскольку высота границы ограничена 200. Таким образом, вы не увидите выступающих частей TextBlock, которые могут выглядеть не по центру по вертикали.

Как вертикально центрировать символ крыла в текстовом блоке xaml / C # / UWP

Есть несколько способов сделать это, выбор зависит от ваших предпочтений.

  1. Удалите свойства высоты и ширины для элемента управления Border, вы увидите текст по центру вертикально.

    <Border BorderBrush="Black" BorderThickness="10" Background="White"  HorizontalAlignment="Center"> 
   <TextBlock x:Name="textBlock"   Text="N" FontFamily="Wingdings"  FontSize="230"  />
</Border>

  2. Добавьте _ 5_ за пределами TextBlockcontrol. ViewBox может растягивать и масштабировать одного дочернего элемента, чтобы заполнить доступное пространство. Это позволит вашему тексту всегда оставаться в центре, независимо от размера шрифта. Размер текста будет зависеть от размера Border элемента управления. Кодируйте следующим образом:

    <Border BorderBrush="Black" BorderThickness="10" Height="200" Width="175" Background="White" >
 <Viewbox>
     <TextBlock x:Name="textBlock"   Text="N" FontFamily="Wingdings"  FontSize="230"  />
 </Viewbox>
</Border>

  3. Просто используйте элемент управления TextBox вместо компонента Border и TextBlock. Это приведет к тем же эффектам, которые делают текст всегда по центру, независимо от размера шрифта. Обратите внимание, что не устанавливайте фиксированные высоту и ширину для TextBox, а также делайте TextBox только для чтения. Кодируйте следующим образом:

    <TextBox
  x:Name="textBox"
  HorizontalAlignment="Center"
  VerticalAlignment="Center"    
  BorderBrush="Black"
  BorderThickness="10"
  FontFamily="Wingdings"
  FontSize="230"
  IsReadOnly="True"
  Text="N"
  TextAlignment="Center" />
person Sunteen Wu    schedule 15.12.2016
comment
Спасибо Sunteen, в вашем первом ответе, похоже, отсутствует VerticalAlignment = Center, но ни в 1,2, ни в 3 символ вертикально центрирован. Я выбрал плохой пример с черепом и костями, так как он не симметричен по вертикали. Если вы измените char на µ и измерите пиксели между верхней и нижней границами символа, вы увидите, что он не центрирован по вертикали ни в одном из приведенных выше предложений. Я не думаю, что font-char вертикально центрирован. Для крайнего примера посмотрите; который определенно не центрирован по вертикали. Есть ли способ сделать это с помощью метрики шрифта / текста? - person br0therDave; 15.12.2016
comment
@ br0therDave Я тестировал µ, оба из трех методов могут сделать его центром. Если у вас все еще есть проблемы, укажите целевую версию приложения и среду тестирования. А также предоставьте снимок экрана, который вы получили с помощью кода выше. - person Sunteen Wu; 16.12.2016
comment
Я добавил картинку к вопросу. Вы можете видеть, что центр символа крыла не находится в вертикальном центре текстового блока. Есть идеи о том, как я могу центрировать символ по вертикали? - person br0therDave; 22.12.2016