Cara memusatkan karakter bersayap secara vertikal di blok teks xaml/C#/UWP

Saya mencoba menggunakan simbol Wingdings sebagai grafik di kontrol dan saya mencoba membuatnya terpusat secara vertikal di dalam kotak teks (aplikasi UWP.) Saya menempatkan pembatas yang terlihat di sekitarnya dan fakta bahwa simbol tersebut tidak berada di tengah secara vertikal terlihat dan merusak tujuan saya. Jika memungkinkan, ini menyelamatkan saya dari keharusan melakukan seni kustom dan karena Wingdings dapat diubah ukurannya, grafik saya dapat dengan mudah diubah skalanya. Itu sebabnya saya tidak ingin mengatur ketinggian secara manual hingga terlihat terpusat.

Kebanyakan Wingdings tidak berada di tengah secara vertikal tetapi kadang-kadang digunakan sebagai grafik, jadi saya bertanya-tanya apakah ini bisa dilakukan dengan usaha yang wajar. Cara xaml yang apik untuk melakukan ini akan ideal tetapi pengukuran metrik font dan taktik penyesuaian ketinggian blok teks akan bagus.

Berikut ini contoh masalahnya. Simbol hard drive tidak berada di tengah tepi secara vertikal.

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

EDIT - mengubah contoh menjadi declutter dan menggunakan simbol hard drive Wingdings karena tengkorak & tulangnya cukup dekat untuk dipusatkan secara vertikal sehingga membingungkan pertanyaan. Simbol drive jelas tidak berada di tengah vertikal. Tujuan saya untuk memusatkannya secara vertikal secara otomatis meskipun ukuran font berubah. Saya dapat melihat bagaimana XAML mungkin tidak dapat melakukan ini, tetapi saya ingin tahu apakah ada kueri metrik font/teks yang dapat saya gunakan untuk melakukannya.

EDIT 2 - Menambahkan gambar (dari XAML di atas yang memiliki masalah yang sama dengan semua XAML yang disarankan):

Saya mencoba agar bagian tengah simbol berada di tengah blok teks Saya mencoba membuat pusat simbol berada di tengah blok teks


c# xaml uwp uwp-xaml
person br0therDave    schedule 14.12.2016    source sumber

Jawaban (1)


arrow_upward
0
arrow_downward

Tengkorak & tulang tidak berada di tengah perbatasan secara vertikal.

Sebenarnya secara default teks tengkorak & tulang harus berada di tengah secara vertikal. Alasan mengapa kode Anda membuatnya terlihat tidak vertikal adalah karena ukuran font terlalu besar untuk berada di dalam batas, karena tinggi Perbatasan dibatasi hingga 200. Jadi bagian luar dari TextBlock Anda tidak akan melihat yang mungkin terlihat seperti tidak berada di tengah secara vertikal.

Cara memusatkan karakter bersayap secara vertikal di blok teks xaml/C#/UWP

Ada beberapa cara untuk melakukan ini, pilih cara mana yang Anda sukai.

  1. Hapus properti tinggi dan lebar untuk kontrol Border Anda akan melihat teks berada di tengah secara vertikal.

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

  2. Tambahkan ViewBox di luar TextBlockcontrol. ViewBox dapat meregangkan dan menskalakan satu anak untuk mengisi ruang yang tersedia. Ini akan membuat teks Anda terlihat selalu berada di tengah, tidak peduli seberapa besar ukuran fontnya. Ukuran teks akan bergantung pada ukuran kontrol Border. Kode sebagai berikut:

    <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. Cukup gunakan kontrol TextBox alih-alih komponen Border dan TextBlock. Ini akan mencapai efek yang sama yang membuat teks selalu berada di tengah dan berapa pun ukuran fontnya. Perhatikan bahwa jangan menetapkan tinggi dan lebar tetap untuk TextBox dan juga membuat TextBox hanya bisa dibaca. Kode sebagai berikut:

    <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
Terima kasih Sunteen, jawaban pertama Anda sepertinya tidak memiliki VerticalAlignment=Center tetapi di 1,2, atau 3 karakternya tidak berada di tengah secara vertikal. Saya mengambil contoh buruk dengan tengkorak & tulang karena tidak simetris secara vertikal. Jika Anda mengubah karakter menjadi µ dan mengukur piksel antara batas atas dan bawah simbol, Anda akan melihat bahwa karakter tersebut tidak berada di tengah vertikal pada salah satu saran di atas. Menurut saya font-char tidak terpusat secara vertikal. Untuk contoh ekstrim, lihat ; yang pastinya tidak terpusat secara vertikal. Apakah ada cara metrik font/teks untuk melakukan ini? - person br0therDave; 15.12.2016
comment
@ br0therDave Saya telah menguji µ , kedua metode tersebut dapat menjadikannya pusat. Jika Anda masih mengalami masalah, berikan versi target aplikasi dan lingkungan pengujian Anda. Dan berikan juga tangkapan layar yang Anda dapatkan dengan kode di atas. - person Sunteen Wu; 16.12.2016
comment
Saya menambahkan gambar ke pertanyaan. Anda dapat melihat bagian tengah simbol wingdings tidak berada di tengah vertikal blok teks. Adakah ide tentang bagaimana saya bisa menempatkan simbol di tengah secara vertikal? - person br0therDave; 22.12.2016