WPF Blurry fonts ปัญหา - วิธีแก้ไข

อธิบายปัญหาและแสดงให้เห็นในลิงค์ต่อไปนี้:

• Paul Stovell WPF: การแสดงข้อความเบลอ
• ฟอรัม www.gamedev.net
• Microsoft Connect: ตัวแสดงข้อความ WPF สร้างข้อความที่ไม่ชัดเจนในขนาดตัวอักษรขนาดเล็ก

คำอธิบาย: ข้อความชัดเจนใน WPF ลิงค์นี้มีการเปรียบเทียบแบบอักษร

ฉันต้องการรวบรวมวิธีแก้ไขที่เป็นไปได้ทั้งหมดสำหรับปัญหานี้ Microsoft Expression Blend ใช้ WPF แต่แบบอักษรดูอ่านได้

• พื้นหลังสีเข้มใน Microsoft Expression Blend
• การเพิ่มขนาดตัวอักษรและการเปลี่ยนแบบอักษร (Calibri ... ) [link]
• แบบฟอร์มฝังหน้าต่าง[ลิงค์]
• ใช้คลาส GDI + และ / หรือ Windows Forms TextRenderer เพื่อแสดงข้อความเป็นบิตแมปแล้วเรนเดอร์บิตแมปนั้นเป็นตัวควบคุม WPF [ลิงค์]

มีวิธีแก้ปัญหาเพิ่มเติมอีกไหม?

สิ่งนี้จะได้รับการแก้ไขใน VS2010 (และ WPF4) เบต้า 2

มันดูเหมือนได้รับการแก้ไขในที่สุด!

ComputerZen.com ของ Scott Hanselman: WPF และ Text Blurriness ตอนนี้มีความชัดเจนสมบูรณ์

พื้นหลังทางเทคนิค

: มีบทความในเชิงลึกเกี่ยวกับการแสดงผล WPF ข้อความจากหนึ่งใน WPF ข้อความผู้จัดการโครงการใน windowsclient.net คือความชัดเจนในข้อความ WPF

ปัญหาเดือดลงมาถึง WPF ซึ่งต้องใช้การปรับขนาดแบบอักษรแบบเชิงเส้นเพื่อให้ภาพเคลื่อนไหวราบรื่น Pure ClearType ในอีกด้านหนึ่งใช้เสรีภาพค่อนข้างน้อยในการใช้แบบอักษรเพื่อดันก้านแนวตั้งเข้าสู่พิกเซลถัดไป

ความแตกต่างชัดเจนถ้าเปรียบเทียบรูปแบบ "น้ำตก" คลาสสิก WinForms ทางด้านซ้ายล่าง WPF ทางด้านขวาบน:

ในขณะที่ฉันไม่ได้เป็นแฟนตัวยงของการแสดงผลแบบอักษรของ WPF ฉันก็จินตนาการได้เลยว่าอนิเมชั่นจะกระโดดอย่างที่พวกเขาทำใน Winforms

เล่นกับรีจิสทรี

สิ่งที่น่าสนใจเป็นพิเศษสำหรับฉันคือลิงค์ไปยังบทความ MSDN " ClearType Registry Settings " ซึ่งจะอธิบายการปรับด้านผู้ใช้ที่เป็นไปได้ในรีจิสทรี:

• ระดับ ClearType: จำนวนการบอกใบ้ของพิกเซลย่อย
• ระดับแกมม่า
• โครงสร้างพิกเซล: วิธีการจัดเรียงแถบสีของพิกเซลการแสดงผล
• ระดับความคมชัดของข้อความ: ปรับความกว้างของ glyph stems เพื่อทำให้แบบอักษรหนักขึ้น

การเล่นกับการตั้งค่าเหล่านี้ไม่ได้ช่วยแก้ปัญหาพื้นฐาน แต่สามารถช่วยได้โดยการลดเอฟเฟ็กต์สีตกเลือดสำหรับผู้ใช้ที่มีความละเอียดอ่อน

อีกแนวทางหนึ่ง

คำแนะนำที่ดีที่สุดของบทความความชัดเจนของข้อความคือการเพิ่มขนาดตัวอักษรและการเปลี่ยนแบบอักษร Calibri ทำงานได้ดีกว่า Segoe UI มาตรฐาน เนื่องจากความนิยมของมันเป็นแบบอักษรบนเว็บฉันจึงลอง Verdana ด้วยเช่นกัน แต่มันก็มีน้ำหนักเพิ่มขึ้นอย่างน่าประหลาดใจระหว่าง 14 พอยต์และ 15 พอยต์ซึ่งเห็นได้ชัดเจนเมื่อเคลื่อนไหวขนาดฟอนต์

WPF 4.0

WPF 4 จะได้รับการปรับปรุงให้ดีขึ้นเพื่อสนับสนุนการสร้างการแสดงผลแบบอักษร มีบทความในบล็อกข้อความ WPFอธิบายการเปลี่ยนแปลง สิ่งสำคัญที่สุดคือตอนนี้ (อย่างน้อย) การแสดงผลข้อความสามแบบ:

_{<grumble> นั่นน่าจะเพียงพอสำหรับนักออกแบบทุกคน </grumble>}

. NET 4 ในที่สุดก็มีทางออกสำหรับคุณภาพการเรนเดอร์ข้อความของ WPF ที่ไม่ดี ตั้งค่าต่อไปนี้สำหรับทุกหน้าต่าง:

TextOptions.TextFormattingMode="Display"

ค่าเริ่มต้นคือ "อุดมคติ" ซึ่งไม่ได้เป็นความหมายของชื่อ

มีสองตัวเลือกอื่น ๆ ใน TextOptions คือ TextHintingMode และ TextRenderingMode แต่ทั้งคู่มีค่าเริ่มต้นที่สมเหตุสมผล

ฉันพบปัญหาในวันอื่น ๆ เมื่อฉันใช้ชายแดนซึ่งมีDropShadowEffectใช้ ผลที่ได้คือข้อความทั้งหมดที่อยู่ในเส้นขอบนั้นพร่ามัวอย่างมาก ไม่สำคัญว่าข้อความจะอยู่ในพาเนลอื่นหรืออยู่ใต้เส้นขอบ - บล็อกข้อความใด ๆ ที่เป็นลูกของผู้ปกครองที่มีเอฟเฟกต์ที่ใช้ดูเหมือนว่าจะได้รับผลกระทบ

วิธีแก้ปัญหากรณีนี้คือการไม่ใส่สิ่งของไว้ในขอบที่มีเอฟเฟกต์ แต่ควรใช้กริด (หรือสิ่งอื่นที่รองรับการวางเนื้อหาไว้ด้านบนของกันและกัน) และวางสี่เหลี่ยมในเซลล์เดียวกันกับข้อความ (เช่น เป็นพี่น้องในต้นไม้ที่มองเห็น) และใส่เอฟเฟกต์ลงไป

ชอบมาก

<!-- don't do this --->
<Border>
     <Border.Effect>
          <DropShadowEffect BlurRadius="25" ShadowDepth="0" Opacity="1"/>
     </Border.Effect>
     <TextBlock Text="This Text Will Be Blurry" />
</Border>

<!-- Do this instead -->
<Grid>
  <Rectangle>
     <Rectangle.Effect>
          <DropShadowEffect BlurRadius="25" ShadowDepth="0" Opacity="1"/>
     </Rectangle.Effect>
  </Rectangle>
  <TextBlock Text="This Text Will Be Crisp and Clear" />
</Grid>

สิ่งนี้จะได้รับการแก้ไขใน VS2010 (และ WPF4) เบต้า 2:

SnapToDevicePixels นำไปใช้กับรูปร่าง WPF (บรรทัดอื่น ๆ ) เท่านั้นไม่ใช่กับตัวแสดงข้อความ

ไม่มีวิธีแก้ไขเฉพาะหน้าสำหรับปัญหานี้ ตามที่ Microsoft พฤติกรรมคือ "โดยการออกแบบ"

โปรดดูหัวข้อนี้ในฟอรัม Microsoft เพื่อหารือเกี่ยวกับปัญหา - มีการตอบกลับสองสามข้อจากพวก MS ที่ชี้แจงตำแหน่งของพวกเขาเกี่ยวกับปัญหา

จากจุดที่นักพัฒนารู้จักเพียงแค่ "การแก้ไขปัญหา" จนถึงปัจจุบันคือการใช้คลาส GDI + และ / หรือ Windows Forms TextRenderer เพื่อแสดงข้อความเป็นบิตแมปแล้วเรนเดอร์บิตแมปนั้นเป็นตัวควบคุม WPF นอกเหนือจากความหมายของประสิทธิภาพที่ชัดเจนสิ่งนี้ไม่ได้ช่วยบรรเทาปัญหาสำหรับแอปพลิเคชันที่มีอยู่

ตอนนี้ฉันได้สร้างตั๋ว Microsoft Connect สำหรับปัญหานี้ (เพื่อความประหลาดใจของฉันแม้จะมีการปฏิเสธทั้งหมดไม่มีรายงานข้อผิดพลาดจริงในตัวติดตามที่กำหนด)

เนื่องจากเป็นหนึ่งในช่องทางที่เป็นทางการในการสื่อสารคำขอและคำถามไปยัง Microsoft ฉันจึงขอแนะนำให้คุณทำเช่นนี้เพื่อรับคำตอบที่รวดเร็วยิ่งขึ้น อย่างน้อยถ้าคุณต้องการให้ปัญหาได้รับการแก้ไขไม่ทางใดก็ทางหนึ่งการลงคะแนนสำหรับตั๋วนั้นที่นั่นและ / หรือการตรวจสอบปัญหาจะช่วยดึงดูดความสนใจของ Microsoft PMs และวิศวกรถึงปัญหานี้และอาจเพิ่มลำดับความสำคัญ

ฉันไม่เห็นว่ามันเป็นจุดบกพร่อง แต่การกำหนดค่าเริ่มต้นนั้นน่ารำคาญมาก นี่คือการเปรียบเทียบการรวมกันทั้งหมดของ

TextOptions.TextRenderingMode
TextOptions.TextFormattingMode
RenderOptions.ClearTypeHint

SnapToDevicePixels ไม่ได้สร้างความแตกต่างในการแสดงข้อความ

ฉันชอบ:

TextOptions.TextRenderingMode="Auto"
TextOptions.TextFormattingMode="Ideal"
RenderOptions.ClearTypeHint="Auto"

ที่เส้นแนวตั้งไม่พร่ามัว

แบบอักษรที่ใช้คือ Open Sans Light ซึ่งสามารถสวยงามได้หากใช้อย่างดีเช่นใน TeamViewer ล่าสุด

สำหรับผู้ที่ใช้ Mahapps.Metro ปัญหาคือTransitioningContentControl https://github.com/MahApps/MahApps.Metro/issues/889

เพิ่งลองรุ่น VS2010 เบต้าซึ่งทำใน WPF แล้วและมันก็ทนทุกข์ทรมานจากปัญหาตัวอักษรพร่ามัวอย่างไม่น่าเชื่อ โดยเฉพาะอย่างยิ่งในคำแนะนำเครื่องมือ

ที่ดูเหมือนว่าจะให้หลักฐานบางอย่างที่ WPF4 ในความเป็นจริงจะไม่แก้ปัญหา (ถ้ามีอะไรที่แย่กว่านั้น)

ว้าวฉันไม่อยากจะเชื่อว่าในที่สุดฉันก็สามารถอ่านแบบอักษร WPF ของฉันได้ และฉันก็ไม่อยากจะเชื่อเลยว่าไม่มีกล่องโต้ตอบตัวเลือกเพื่อให้การเปลี่ยนแปลงเหล่านี้ง่ายขึ้นในขณะที่ค่าเริ่มต้นนั้นน่ากลัวบนจอแสดงผลของฉัน

การตั้งค่ารีจิสทรีเหล่านี้(เป็นทศนิยม) ทำงานได้สำหรับฉันและใกล้เคียงกับแบบอักษร cleartype ปกติของฉัน:

• ClearTypeLevel: 10 (นามแฝงส่วนใหญ่ greyscale)
• GammaLevel: 1300 (แกมม่าที่สูงกว่าทำให้ตัวอักษรบางเกินไปและฉันเห็นสีในนามแฝง)

พวกเขาบอกว่างาน "SnapToDevicePixels = true" แต่ฉันไม่เคยเห็นผลลัพธ์ที่ดีเลย

ฉันต่อสู้กับข้อความที่เบลอโดยการเปลี่ยนไปใช้แบบอักษรอื่น

เห็นได้ชัดว่านี่ไม่ใช่วิธีแก้ปัญหา แต่นี่เป็นวิธีที่ฉันได้แก้ไข

หากคุณต้องการใช้คลาสพื้นฐาน C # เพื่อปรับแต่ง windows สำหรับแอพของคุณ (หรือตอนนี้มีเหตุผล) ต่อไปนี้คือวิธีที่คุณตั้งค่าสามารถตั้งค่าการจัดรูปแบบข้อความเพื่อใช้โหมดการแสดงผลที่น่าสนใจ:

public class SnappyWindow : Window
{
    public SnappyWindow()
    {
        SetValue(TextOptions.TextFormattingModeProperty, TextFormattingMode.Display);
    }
}