डब्ल्यूपीएफ

Question

में केवल एक्सएएमएल का उपयोग करके कैनवास के अंदर एक तत्व को कैनवास के अंदर एक तत्व को पोजिशन करना Canvas के अंदर किसी तत्व को पोजिशन करने के बारे में सामान्य प्रश्न "तत्व के केंद्र को कैसे स्थानांतरित करें (शीर्ष बाएं की बजाय कोने) "।

• WPF: Resizing a circle, keeping the center point instead of TopLeft?
• WPF Center Ellipse at X, Y
• WPF element positioning on a Canvas

कई समाधान प्रस्तुत कर रहे हैं, लेकिन वे सभी कमियां हैं।

सबसे आसान समाधान Canvas.Left और Canvas.Top गुणों को प्रोग्रामेटिक रूप से सेट करते समय तत्व आकार को समायोजित करना है। यह काम करता है, लेकिन केवल एक बार। यह समाधान बाइंडिंग का समर्थन नहीं करता है और जब तत्व का आकार बदल जाता है तो यह टूट जाएगा। तुम भी Canvas.Left या Canvas.Top समाधान का एक और सेट का उपयोग

सेट नहीं कर सकता शामिल या तो RenderTransform या Margin उपयोग परिवर्तनों अनुवाद करते हैं। इन समाधानों को -0.5 * Width या -0.5 * Height पर कुछ संपत्ति बाध्य करने की आवश्यकता है। इस तरह के बाध्यकारी के लिए कस्टम ValueConverter बनाना आवश्यक है और केवल XAML का उपयोग करना असंभव है।

इसलिए, ताकि उसके Canvas.Left और Canvas.Top तत्व के केंद्र के अनुरूप है और दोनों आकार और स्थिति गुण कुछ अन्य संपत्तियों के लिए बाध्य किया जा सकता है कैनवास के अंदर एक तत्व की स्थिति के लिए एक सरल तरीका है?

Answer 1

एक्सएएमएल और बाइंडिंग बहुत शक्तिशाली लगते हैं, लेकिन कभी-कभी ऐसी सरल समस्याएं होती हैं जिन्हें बहुत जटिल समाधान की आवश्यकता होती है। मेरी बाइंडिंग लाइब्रेरी में ऐसी बाध्यकारी बनाने में element.Center = position या element.TopLeft = position - element.Size/2 लिखना जितना आसान होगा, लेकिन मुझे दूर जाने की अनुमति न दें।

मुझे एक बहुत ही सरल समाधान मिला है जो केवल एक्सएएमएल का उपयोग करता है और तत्व के आकार और स्थिति दोनों को बाध्य करने का समर्थन करता है। ऐसा लगता है कि जब संरेखण के साथ डब्ल्यूपीएफ नियंत्रण भी Stretch या Center कैनवास के अंदर रखा गया है, तो तत्व (Canvas.Left, Canvas.Top) बिंदु (जिस राज्य की हम चाहते हैं) के रूप में केंद्रित करने की दिशा में "गुरुत्वाकर्षण" तत्व है, लेकिन "कोण प्लेट" द्वारा रखा गया है वही (Canvas.Left, Canvas.Top) बिंदु। मैं इस "गुरुत्वाकर्षण" के बारे में कैसे जानूं? यह स्पष्ट है कि जब आप तत्व के Margin को नकारात्मक मान पर सेट करके ब्लॉक को कम करते हैं। नकारात्मक मार्जिन सेट करने से तत्व को इसके केंद्र लक्ष्य की ओर बढ़ने की अनुमति मिलती है। तत्व Margin तक (-Height/2, -Width/2) तक पहुंचता है ताकि तत्व (Canvas.Left, Canvas.Top) बिंदु पर पूरी तरह से केंद्रित हो जाए। आगे के परिवर्तन किसी भी आंदोलन का कारण नहीं बनते क्योंकि तत्व पहले से ही पूरी तरह से स्थित है।

समाधान: Margin="-1000000" सेट करें।

तो निम्न कोड में इलिप्स दोनों (200, 200) बिंदु पर केंद्रित हैं। पहले अंडाकार में Left और Top गुण हैं जो अंडाकार केंद्र से संबंधित हैं जो आसानी से उन्हें अन्य वस्तुओं के गुणों से बांधने की अनुमति देते हैं।

<Canvas> 
    <Ellipse Width="100" Height="100" Canvas.Left="200" Canvas.Top="200" Opacity="0.5" Fill="Red" Margin="-100000" /> 
    <Ellipse Width="100" Height="100" Canvas.Left="150" Canvas.Top="150" Opacity="0.5" Fill="Blue" /> 
</Canvas> 

बुरी बात यह है कि यह समाधान केवल WPF में काम करता है। सिल्वरलाइट और विनआरटी में वर्णित व्यवहार नहीं है।

Answer 2

यहां तक ​​कि सरल, कम से कम आकार के लिए, एक उपयुक्त ज्यामिति के साथ एक पथ का उपयोग करने के होगा:

<Canvas> 
    <Path Canvas.Left="200" Canvas.Top="200" Fill="Red" Opacity="0.5"> 
     <Path.Data> 
      <EllipseGeometry RadiusX="50" RadiusY="50"/> 
     </Path.Data> 
    </Path> 
</Canvas> 

Answer 3

यह समाधान मुझे Center text at a given point on a WPF Canvas लिए काम किया। वह अपने तत्व पर मार्जिन समायोजित करने के लिए एक मल्टीबाइंडिंग और एक कस्टम कनवर्टर का उपयोग करता है। प्रतिभाशाली!

Answer 4

मैंने कैनवास को 2x2 ग्रिड के निचले-दाएं सेल में डालकर हल किया। इससे 0,0 ग्रिड के केंद्र को समन्वयित किया जाता है, और उसके बाद आप अपने सभी ड्राइंग को इसके सापेक्ष कर सकते हैं।