วิธีจัดกึ่งกลางอักขระวิงดิ้งในแนวตั้งใน textblock xaml / C# / UWP

ฉันกำลังพยายามใช้สัญลักษณ์ Wingdings เป็นกราฟิกในตัวควบคุม และกำลังพยายามทำให้มันอยู่กึ่งกลางในแนวตั้งภายในกล่องข้อความ (แอป UWP) ฉันกำลังวางนักเรียนประจำที่มองเห็นได้รอบๆ มัน และความจริงที่ว่าสัญลักษณ์นั้นไม่ได้อยู่ตรงกลางในแนวตั้ง เห็นได้ชัดและทำลายสิ่งที่ฉันกำลังทำอยู่ หากเป็นไปได้ มันช่วยให้ฉันไม่ต้องทำงานศิลปะตามสั่ง และเนื่องจาก Wingdings สามารถปรับขนาดได้ กราฟิกของฉันจึงถูกปรับขนาดได้อย่างง่ายดาย นั่นเป็นสาเหตุที่ฉันไม่ต้องการปรับความสูงด้วยตนเองจนกว่าจะดูอยู่ตรงกลาง

Wingdings ส่วนใหญ่ไม่ได้อยู่ตรงกลางในแนวตั้ง แต่บางครั้งก็ใช้เป็นกราฟิก ดังนั้นฉันสงสัยว่าสิ่งนี้สามารถทำได้ด้วยความพยายามที่สมเหตุสมผลหรือไม่ วิธี xaml ที่ลื่นไหลในการทำเช่นนี้น่าจะเหมาะ แต่การวัดแบบอักษรและการปรับความสูงของบล็อกข้อความจะดี

นี่คือตัวอย่างปัญหา สัญลักษณ์ฮาร์ดไดรฟ์ไม่ได้อยู่กึ่งกลางในแนวตั้งที่เส้นขอบ

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

แก้ไข - เปลี่ยนตัวอย่างเป็น declutter และใช้สัญลักษณ์ฮาร์ดไดรฟ์ Wingdings เนื่องจากกะโหลกศีรษะและกระดูกอยู่ใกล้พอที่จะจัดกึ่งกลางในแนวตั้งเพื่อสร้างความสับสนให้กับคำถาม สัญลักษณ์ไดรฟ์ไม่ได้อยู่ตรงกลางในแนวตั้งอย่างชัดเจน เป้าหมายของฉันที่จะจัดกึ่งกลางแนวตั้งโดยอัตโนมัติแม้ว่าขนาดตัวอักษรจะเปลี่ยนไปก็ตาม ฉันเห็นได้ว่า XAML ไม่สามารถทำได้อย่างไร แต่ฉันสงสัยว่ามีการสืบค้นเมตริกแบบอักษร/ข้อความบางอย่างที่ฉันสามารถใช้เพื่อดำเนินการได้หรือไม่

แก้ไข 2 - การเพิ่มรูปภาพ (จากด้านบน XAML ซึ่งมีปัญหาเช่นเดียวกับ XAML ที่แนะนำทั้งหมด):

ฉันกำลังพยายามทำให้จุดศูนย์กลางของสัญลักษณ์อยู่ตรงกลางของบล็อกข้อความ ฉันกำลังพยายามทำให้จุดศูนย์กลางของสัญลักษณ์อยู่ตรงกลางของบล็อกข้อความ


c# xaml uwp uwp-xaml
person br0therDave    schedule 14.12.2016    source แหล่งที่มา

คำตอบ (1)


arrow_upward
0
arrow_downward

กะโหลกศีรษะและกระดูกไม่ได้อยู่กึ่งกลางในแนวตั้งในเส้นขอบ

ที่จริงแล้วตามค่าเริ่มต้นแล้ว ข้อความ Skull&bones ควรอยู่ตรงกลางในแนวตั้ง สาเหตุที่โค้ดของคุณทำให้ดูไม่อยู่ในแนวตั้งก็คือขนาดตัวอักษรใหญ่เกินกว่าจะอยู่ภายในเส้นขอบ เนื่องจากความสูงของ Border ถูกจำกัดไว้ที่ 200 ดังนั้นคุณจะไม่เห็นส่วนที่เกินของ TextBlock ซึ่งอาจดูเหมือนไม่ได้อยู่ตรงกลางในแนวตั้ง

วิธีจัดกึ่งกลางอักขระวิงดิ้งในแนวตั้งใน 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. เพิ่ม ViewBox การควบคุมภายนอก 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 จะไม่มีถ่านอยู่ตรงกลางในแนวตั้ง ฉันเลือกตัวอย่างที่ไม่ดีเกี่ยวกับกะโหลกศีรษะและกระดูก เนื่องจากมันไม่สมมาตรในแนวตั้ง หากคุณเปลี่ยนอักขระเป็น µ และวัดพิกเซลระหว่างขอบบนและล่างเป็นสัญลักษณ์ คุณจะเห็นว่าสัญลักษณ์นั้นไม่ได้อยู่กึ่งกลางในแนวตั้งตามคำแนะนำข้างต้น ฉันไม่คิดว่า Font-char จะจัดกึ่งกลางในแนวตั้ง สำหรับตัวอย่างที่รุนแรง โปรดดูที่ ; ซึ่งไม่ได้อยู่ตรงกลางในแนวตั้งอย่างแน่นอน มีวิธีการวัดแบบอักษร / ข้อความหรือไม่? - person br0therDave; 15.12.2016
comment
@ br0therDave ฉันได้ทดสอบ µ แล้วทั้งสามวิธีสามารถทำให้มันอยู่ตรงกลางได้ หากคุณยังคงพบปัญหา ให้ระบุเวอร์ชันเป้าหมายของแอปและสภาพแวดล้อมการทดสอบ และจัดเตรียมภาพหน้าจอที่คุณได้รับจากโค้ดด้านบนด้วย - person Sunteen Wu; 16.12.2016
comment
ฉันเพิ่มรูปภาพในคำถาม คุณจะเห็นว่าจุดศูนย์กลางของสัญลักษณ์ Wingdings ไม่ได้อยู่ตรงกลางแนวตั้งของบล็อกข้อความ มีแนวคิดใดบ้างว่าฉันจะทำให้สัญลักษณ์อยู่ตรงกลางในแนวตั้งได้อย่างไร - person br0therDave; 22.12.2016