WPF दस्तावेजों में अपेक्षाकृत तैनात तत्व

कुछ महीने पहले मुझे WPF का उपयोग करके एक इंटरफ़ेस लागू करना था। ज्यादातर फ्लोडैक्जिमेंट का उपयोग किया जाता है, जैसा कि वेब पृष्ठों की शैली में यूआई को यथासंभव बारीकी से व्यवस्थित करना आवश्यक था।
CSS का उपयोग करके HTML तत्वों की स्थिति की स्वतंत्रता के आदी, मैं नेस्टेड तत्वों की सापेक्ष स्थिति के लिए कोई समाधान नहीं ढूंढ सका। गुण शीर्ष, बाएं, दाएं, नीचे अस्थायी WPF दस्तावेजों में पूरी तरह से अनुपस्थित हैं। MSDN ने केवल चित्रा वर्ग जारी किया। हालाँकि, जब HorDOffmentScrollViewer का उपयोग करते हुए होरिजोंटलऑफ़सेट और वर्टिकलऑफ़सेट काम नहीं करते हैं। Google खोज ने भी मदद नहीं की।
हालाँकि, समाधान सरल से अधिक था।

ब्राउज़र इंजन कैसे काम करते हैं

इसके आंतरिक कार्यान्वयन के बारे में सबसे दिलचस्प जानकारी WebKit द्वारा प्रदान की गई है। एक ब्लॉग उन लोगों के लिए जानकारी का एक मूल्यवान स्रोत है जो किसी परियोजना के स्रोत कोड का अध्ययन नहीं करना चाहते हैं, लेकिन इसकी वास्तुकला के बारे में जानना चाहते हैं।

विशेष रुचि के पदों की वेबकोर रेंडरिंग श्रृंखला थी। इस पृष्ठ में मुख्य वाक्यांश भी शामिल था, जिसने समस्या का समाधान दिखाया: "सापेक्ष स्थिति का शाब्दिक अर्थ एक पेंट-टाइम अनुवाद से अधिक कुछ नहीं है", जो रूसी में: "सापेक्ष स्थिति का शाब्दिक अर्थ है कि ड्राइंग करते समय हिलने से अधिक कुछ नहीं"।

इस "पोस्टऑउट" के साथ सशस्त्र, मैंने WPF के आंत्र में कुछ समान खोजने का फैसला किया।

पाठ प्रभाव

यदि UIElement के लिए हम आम तौर पर रेंडरट्रासफॉर्म और ट्रांसफॉर्म, रोटेट और स्केल के 2 डी ट्रांसफॉर्म का उपयोग करते हैं, तो टेक्स्ट वाले ऑब्जेक्ट के लिए एक ही तंत्र प्रदान किया जाता है। सभी परिवर्तनों के लिए कंटेनर TextEffect क्लास है।

तो, चलो कार्यान्वयन के लिए नीचे उतरें। ब्लॉग पेज से एक उदाहरण उदाहरण के रूप में उपयोग किया जाएगा।

<div style="border:5px solid black; padding:20px; width:300px; margin-left:auto; margin-right:auto"> Here is a line of text. <span style="position:relative;top:-10px; background-color:#eeeeee">This part is shifted<br> up a bit</span>, but the rest of the line is in its original position. </div> 

एक ही उदाहरण, लेकिन केवल स्थिति के बिना WPF के लिए:

 <FlowDocumentScrollViewer> <FlowDocumentScrollViewer.Document> <FlowDocument Name="doc" FontFamily="Verdana" FontSize="12px" LineHeight="18px"> <Paragraph Padding="20px" BorderThickness="5px" BorderBrush="Black"> Here is a line of text. <Span Name="shiftedText" Background="#EEE">This part is shifted<LineBreak/> up a bit </Span>, but the rest of the line is in its original position. </Paragraph> </FlowDocument> </FlowDocumentScrollViewer.Document> </FlowDocumentScrollViewer> 

TextEffect को लागू करने से पहले, आपको यह जानना होगा कि यह केवल Run प्रकार के साथ काम करता है। जब एक दस्तावेज़ में एक स्पैन, या किसी अन्य तत्व पर लागू किया जाता है, तो प्रभाव नहीं देखा जाएगा।

प्रभाव लागू करें:

 void DoEffect() { foreach (var run in shiftedText.Inlines.OfType<Run>()) { TextEffect f = new TextEffect(); TranslateTransform t = new TranslateTransform(0, -10d); f.Transform = t; int selectionStart = doc.ContentStart.GetOffsetToPosition(run.ElementStart); int selectionLength = run.ElementStart.GetOffsetToPosition(run.ElementEnd); f.PositionStart = selectionStart; f.PositionCount = selectionLength; run.TextEffects.Add(f); } } 

और रद्द करने के लिए कोड:

 void UndoEffect() { foreach (var run in shiftedText.Inlines.OfType<Run>()) { run.TextEffects.Clear(); } } 

इस प्रकार, हम वांछित प्रभाव प्राप्त करने में सक्षम थे। मुझे उम्मीद है कि कोड दूसरों के लिए भी काम आएगा।
एक उदाहरण के साथ परियोजना से लिंक करें।