सिल्वरलाइट में आइटम का संग्रह करने के लिए एक कैनवास बाध्य करने के लिए कैसे

Question

पृष्ठभूमि

मैं जिन वस्तुओं पर मैं एक कैनवास पर चित्रकारी करना चाहते का एक संग्रह मिल गया है। इन ऑब्जेक्ट्स में से प्रत्येक में डेटटाइम प्रॉपर्टी होती है, जो कैनवास पर एक्स-अक्ष के साथ उस ऑब्जेक्ट की स्थिति निर्धारित करती है। प्रत्येक ऑब्जेक्ट में कुछ अन्य गुण भी होते हैं जो कैनवास पर खींची जाने वाली छवि को निर्धारित करते हैं। सबसे महत्वपूर्ण विशेषता जिसे मैं कार्यान्वित करना चाहता हूं वह यह है कि समय बीतने के बाद, ऑब्जेक्ट्स का प्रतिनिधित्व करने वाली ये छवियां x-axis के साथ आगे बढ़ेंगी। दूसरे शब्दों में, कैनवास की दायां लंबवत सीमा हमेशा वर्तमान समय (उदा। डेटटाइम.अव) का प्रतिनिधित्व करेगी, और संग्रह में ऑब्जेक्ट्स को उस सीमा के सापेक्ष कैनवास पर अपनी स्थिति अपडेट करने की आवश्यकता होगी। मैं सिल्वरलाइट के लिए बहुत नया हूं और इसलिए मेरे पास निम्नलिखित सहित कुछ प्रश्न हैं। इसके अलावा, मुझे एमवीवीएम ढांचे का पालन करने की आवश्यकता भी है।

प्रश्न

मैं XAML में क्या इस्तेमाल करना चाहिए ऊपर हासिल करने के लिए? मैंने पैनल के रूप में कैनवास के साथ आइटम्स कंट्रोल का उपयोग करने के बारे में सोचा, लेकिन मुझे यकीन नहीं है कि यह कैसे करें या यहां तक ​​कि यह सबसे अच्छा तरीका है या नहीं। कोई भी वास्तविक एक्सएएमएल कोड बहुत अच्छा होगा।

मुझे कैनवास में वस्तुओं का संग्रह कैसे बांधना चाहिए? और यदि हां, तो समय बीतने के बाद मैं एक्स-अक्ष के साथ उन्हें कैसे स्थानांतरित करूं? यही है, मैं कैनवास को अपडेट करना चाहूंगा जब भी:

• संग्रह में ऑब्जेक्ट्स जोड़े गए हैं; या
• वस्तुओं को संग्रह से हटा दिया गया; या
• मौजूदा ऑब्जेक्ट बदल रहा है (उदा। कुछ संपत्ति बदल गई है और इसलिए संग्रह में कैनवास पर दिखाए गए चित्र को बदलने की आवश्यकता है; या
• यदि ऊपर उल्लिखित संग्रह में कोई परिवर्तन नहीं है, तो भी ऑब्जेक्ट्स को प्रत्येक सेकंड को स्थानांतरित करने की आवश्यकता होगी।

क्षमा करें अगर मैंने कुछ भी गलत शर्तों का उपयोग किया है क्योंकि मैं सिल्वरलाइट के लिए अभी भी नया हूं।

धन्यवाद।

Answer 1

यदि आप वास्तव में एमवीवीएम और डेटा-बाध्यकारी का उपयोग करना चाहते हैं, तो ItemsPanel के साथ एक आइटम नियंत्रण केवल कैनवास के रूप में परिभाषित किया जा सकता है। आइटम Vontrol.ItemsSource को अपने वीएम में एक अवलोकन करने योग्य चयन में बाध्य करें। आइटम्स कंट्रोल के लिए अपने आइटम टेम्पलेट में, यूआई आइटम तत्व के कैनवास.एक्स और कैनवास.वाई को अपने डेटा आइटम्स में बाध्य करें, आईवीएलयू कनवर्टर का उपयोग करके एक्सचेंज टू एक्स समन्वय आदि के मैपिंग के बीच में ...

कुछ ऐसा :

<ItemsControl ItemsSource="{Binding Path=MyItemsInVM, Mode=OneWay}"> 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <Canvas></Canvas> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 
    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
      <Border Width="50" Height="50" Canvas.Left="{Binding Path=MyDateTimeProperty, Converter={StaticResource DateTimeToLeftOffsetConverter}}" Canvas.Top="100" /> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 
</ItemsControl> 

एक और दृष्टिकोण मॉडल-व्यू-प्रेजेंटर पैटर्न का उपयोग कर रहा है। एमवीवीएम शहर में एकमात्र शो नहीं है। जब आपको बहुत सारे यूआई मैनिपुलेशन करने की आवश्यकता होती है, या वीएसएम के साथ काम करते हैं, तो एक प्रेजेंटर बेहतर फिट हो सकता है (हालांकि व्यवहार भी एक महत्वपूर्ण भूमिका निभा सकते हैं)।

आप अपने प्रेजेंटर में एक टाइमर सेट अप कर सकते हैं जो आपके रीफ्रेश अंतराल पर चल रहा है, और प्रेजेंटर में केवल टाइमर इवेंट को संग्रह और मैप ऑब्जेक्ट्स (एक्स, वाई) स्थितियों पर फिर से चालू करने के लिए, यूआई तत्वों को सीधे अपडेट करना ।

Answer 2

मुझे पता है कि यह प्रश्न थोड़ा पुराना है, लेकिन आप केवल रेंडर ट्रांसफॉर्म का उपयोग कर सकते हैं - मैं कुछ ऐसा कर रहा हूं;

<ItemsControl ItemsSource="{Binding Notes}"> 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <Canvas /> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 

    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
      <Border Width="{Binding W}" Height="{Binding H}" BorderBrush="Navy" BorderThickness="5" CornerRadius="10"> 
       <TextBlock Text="{Binding Text}"/> 
       <Border.RenderTransform> 
        <TransformGroup> 
         <... elided ...> 
         <TranslateTransform X="{Binding X}" Y="{Binding Y}"/> 
        </TransformGroup> 
       </Border.RenderTransform> 
      </Border> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 
</ItemsControl>