संदेश हब शैली संदेशों की सूची

यदि आपने विंडोज फोन 7 के लिए पहले से ही एप्लिकेशन विकसित कर लिए हैं, तो आप पहले से ही कुछ नियंत्रणों की अनुपस्थिति पर ध्यान दे सकते हैं, जैसे कि हब टाइल, एक समूहीकृत सूची या संदेशों की सूची। उनमें से कुछ को विंडोज फोन लाइब्रेरी के लिए सिल्वरलाइट टूलकिट में पाया जा सकता है। लेकिन क्या करना है जब हमें मानक संदेश हब के समान एक एप्लिकेशन बनाने की आवश्यकता है? मुख्य समस्या यह है कि एक मानक लिस्बाक्स में, आइटम को ऊपर से नीचे तक रखा जाता है, जबकि एक संदेश हब में, इसके विपरीत।



मैं इस समस्या का एक समाधान प्रदर्शित करना चाहता हूं। हमें केवल एक मानक ListBox नियंत्रण, System.Windows.Interaction लाइब्रेरी को Blend SDK से और कुछ ज्ञान दृश्य घटकों के परिवर्तन के क्षेत्र में चाहिए।

So. जैसा कि मैंने पहले कहा था, मानक ListBox अपने आइटम को वर्चुअलाइज़िंगस्टैकपैनल में ऊपर से नीचे तक रखता है। अपने VirtualizingStackPanel को लिखना, जो नीचे से आइटम को जगह देगा, बहुत समय लग सकता है। इसके अलावा, मानक VirtualizingStackPanel में पहले से ही वर्चुअलाइजेशन तर्क होता है जो भारी मात्रा में मेमोरी की खपत की समस्या को हल करता है। हमें बस इतना करना है कि लिस्टबॉक्स को उल्टा कर दिया जाए ताकि नए आइटम को नीचे रखा जाए। ऐसा करने के लिए, ScaleTransform का उपयोग करें:

<ListBox> <ListBox.RenderTransform> <ScaleTransform ScaleX="1" ScaleY="-1"> </ListBox.RenderTransform> </ListBox> 

अब हमारा लिस्टबॉक्स उल्टा हो गया है, लेकिन बचा हुआ है। इसे अपने स्थान पर वापस करने के लिए, आपको परिवर्तन के केंद्र को निर्दिष्ट करने की आवश्यकता है। हमारे मामले में, यह मध्य लंबवत है, अर्थात:

 _scaleTransform.CenterY = ListBox.ActualHeight / 2; 

जैसा कि आपने देखा होगा कि हमारे लिस्टबॉक्स के तत्व भी उलटे हैं। उन्हें उनकी सामान्य स्थिति में वापस लाने के लिए, हम उसी विधि का उपयोग करते हैं जिसका उपयोग हमने पूरी सूची के लिए किया था।

MVVM के प्रशंसक .xaml.cs फ़ाइलों में अतिरिक्त कोड प्राप्त कर सकते हैं। मैं आमतौर पर System.Windows.Interaction लाइब्रेरी से व्यवहार में सभी अतिरिक्त तर्क लिखता हूं। ऐसा करने के लिए, कोड के साथ एक मिररबीयर क्लास बनाएं:

 public class MirrorBehavior : Behavior<Control> { private readonly ScaleTransform _transform = new ScaleTransform(); public MirrorBehavior() { _transform.ScaleX = 1; _transform.ScaleY = -1; } protected override void OnAttached() { UpdateCenter(); AssociatedObject.SizeChanged += AssociatedObject_SizeChanged; AssociatedObject.RenderTransform = _transform; } protected override void OnDetaching() { AssociatedObject.RenderTransform = null; AssociatedObject.SizeChanged -= AssociatedObject_SizeChanged; ResetCenter(); } private void AssociatedObject_SizeChanged(object sender, SizeChangedEventArgs e) { UpdateCenter(); } private void UpdateCenter() { _transform.CenterY = AssociatedObject.ActualHeight / 2; } private void ResetCenter() { _transform.CenterY = 0; } } 

यह केवल हमारे नियंत्रणों पर लागू होता है:

 <ListBox ItemsSource="{Binding Messages}"> <i:Interaction.Behaviors> <Interactivity:MirrorBehavior /> </i:Interaction.Behaviors> <ListBox.ItemTemplate> <DataTemplate> <ContentControl HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" ContentTemplate="{StaticResource MessageTemplate}" Content="{Binding}"> <i:Interaction.Behaviors> <Interactivity:MirrorBehavior /> </i:Interaction.Behaviors> </ContentControl> </DataTemplate> </ListBox.ItemTemplate> </ListBox> 

यह समाधान अच्छा है क्योंकि यह मानक शैलियों और अंतर्निहित वर्चुअलाइजेशन का उपयोग करता है।