calendar - कैलेंडर नियंत्रण पर उंगली स्लाइड पर तारीखों की रेंज का चयन कैसे करें-UWP Win10 VS2015




win-universal-app (2)

कैलेंडर के लिए Xaml शैली दृश्य ViaDayItem

<Style x:Key="CalendarViewDayItemStyle1" TargetType="CalendarViewDayItem">
            <Setter Property="MinWidth" Value="40"/>
            <Setter Property="MinHeight" Value="40"/>
            <Setter Property="Margin" Value="1"/>
            <Setter Property="Padding" Value="0, 0, 0, 4"/>
            <Setter Property="BorderThickness" Value="0"/>

            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="CalendarViewDayItem">
                        <Grid >
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CustomStates">
                                    <VisualState x:Name="Hover">
                                        <VisualState.Setters>
                                            <Setter Target="ContentPresenter.(Border.Background)" Value="Blue"/>
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="Normal">
                                        <VisualState.Setters>
                                            <Setter Target="ContentPresenter.(Border.Background)" Value="White"/>
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="ContentPresenter" PointerPressed="border_PointerPressed"  PointerEntered="border_PointerEntered" BorderBrush="Red" PointerExited="border_PointerExited" PointerMoved="border_PointerMoved" BorderThickness="1,1,1,1" CornerRadius="10,10,10,10" >

                            </Border>
                        </Grid>

                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

कोड के पीछे

     CalendarViewDayItem item;
                private void CalendarView_CalendarViewDayItemChanging(CalendarView sender, CalendarViewDayItemChangingEventArgs args)
                {
                    var item = args.Item;

                    item.PointerPressed += Item_PointerPressed;
                    item.Tapped += Item_Tapped;
                    item.PointerEntered += Item_PointerEntered;
                    item.PointerExited += Item_PointerExited;

                }
         private void Item_PointerExited(object sender, PointerRoutedEventArgs e)
        {
            item = null;
        }
                private void Item_PointerEntered(object sender, PointerRoutedEventArgs e)
                {
                    item = sender as CalendarViewDayItem;
                }


                private void Item_Tapped(object sender, TappedRoutedEventArgs e)
                {
                    item = sender as CalendarViewDayItem;
                    (sender as CalendarViewDayItem).Background = new SolidColorBrush(Colors.Red);
                }

                private void Item_PointerPressed(object sender, PointerRoutedEventArgs e)
                {
                    item = sender as CalendarViewDayItem;

                }

                private void border_PointerEntered(object sender, PointerRoutedEventArgs e)
                {
                    if (item != null)
                    {
                        VisualStateManager.GoToState((item), "Hover", true);
                    }
                }

                private void border_PointerMoved(object sender, PointerRoutedEventArgs e)
                {
                    if (item != null)
                    {
                        VisualStateManager.GoToState((item), "Hover", true);
                    }
                }

                private void border_PointerExited(object sender, PointerRoutedEventArgs e)
                {
                    if (item != null)
                    {
                        VisualStateManager.GoToState((item), "Normal", true);
                    }
                }            
                private void border_PointerPressed(object sender, PointerRoutedEventArgs e)
                {
                    if (item != null)
                    {
                        VisualStateManager.GoToState((item), "Hover", true);
                    }


}

अद्यतन करें

चुनिंदा एक को नीला बनाने के लिए बस नीचे तरीकों का उपयोग करें कोड के पीछे से ऊपर कोड निकालें

    private void CalendarView_SelectedDatesChanged(CalendarView sender, CalendarViewSelectedDatesChangedEventArgs args)
            {
                if(args.AddedDates!=null)
                {
                    foreach(var item in args.AddedDates)
                    {
                      var selected =  FindElementInVisualTree<CalendarViewDayItem>(sender, item);
                    }
                }
                if (args.RemovedDates != null)
                {
                    foreach (var item in args.RemovedDates)
                    {

                    }
                }
            }
            public static T FindElementInVisualTree<T>(DependencyObject parentElement,DateTimeOffset selectedDate) where T : DependencyObject
            {
                var count = VisualTreeHelper.GetChildrenCount(parentElement);
                if (count == 0) return null;

                for (int i = 0; i < count; i++)
                {
                    var child = VisualTreeHelper.GetChild(parentElement, i);

                    if (child != null && child is CalendarViewDayItem)
                    {
                       if((child as CalendarViewDayItem).Date==selectedDate.DateTime)
                        {
                            VisualStateManager.GoToState((child as CalendarViewDayItem), "Hover", true);
                        }
 else if ((child as CalendarViewDayItem).Date.Date == DateTime.Today)
                    {
                       // VisualStateManager.GoToState((child as CalendarViewDayItem), "Hover", true);
//styles for today's date
                    }
                       else
                        {
                            VisualStateManager.GoToState((child as CalendarViewDayItem), "Normal", true);
                        }
                    }
                    else
                    {
                        var result = FindElementInVisualTree<T>(child,selectedDate);
                        if (result != null)
                            return result;
                    }
                }
                return null;
            }

जब हम किसी भी आइटम पर क्लिक करते हैं तो सीमा की पृष्ठभूमि BLUE होनी चाहिए और टेक्स्ट यानी दिनांक सफेद होने चाहिए जैसा कि ऊपर के आंकड़ों में दिखाया गया है

कैलेंडर नियंत्रण के लिए कई गुण हैं इस प्रेसएंड्रॉउफ़ के लिए खोजें और इसे का मान सफेद पर बदलें और अन्य समान गुणों के माध्यम से भी जाएं

मैं UWP Win10 VS2015 App विकसित कर रहा हूँ मैंने कैलेंडर नियंत्रण को अनुकूलित किया है लेकिन निम्नलिखित सुविधाओं को लागू करने की आवश्यकता है

  1. किसी भी तिथि पर टैप करें, इसे गोल भरी हुई सर्कल के साथ उजागर करना चाहिए।

  2. कई तारीखों पर टैप करें और उंगली पर स्लाइड करें, यह दिनांक का रेंज चुनें।

क्या किसी भी दृश्यता या अन्य घटनाएं स्टाइल (कंट्रोलटेम्पलेट) के अंदर डालने और उंगलियों को स्लाइड करने के लिए इसे हेरफेर करती हैं और दूसरी तारीख की हिट सीमा को उजागर करना चाहिए ??? या क्या प्रक्रिया यहाँ लागू किया जाना चाहिए :)

निम्न 4 स्क्रीन शॉट्स देखें (ये सिर्फ नमूना शॉट हैं और मुझे इस प्रकार की कार्यक्षमता की आवश्यकता है)

उपरोक्त स्क्रीन शॉट्स के अनुसार ... यह एक कस्टम फीचर है जो मुझे लगता है, और स्टाइल और टेम्प्लेट को संपादित किया जा सकता है और कुछ मैनिपुलेशन, टैप और ड्रैग इवेंट को स्टाइल में डाल दिया जा सकता है ... लेकिन इन्हें कैसे और कम से कम मिलता है इस सुविधा को लगाने का विचार ... यह बहुत सराहना की जाएगी धन्यवाद।

अपडेट किया गया

एनिमेटेड तस्वीर को देखें और इसकी तुलना अन्य आंकड़ों के साथ करें, जैसा कि शीर्ष पर दिया गया है ... जब हम किसी भी वस्तु पर क्लिक करते हैं तो बॉर्डर की पृष्ठभूमि ब्लू होनी चाहिए और टेक्स्ट यानी दिनांक ऊपर दिए आंकड़ों में दिखाए अनुसार सफेद होना चाहिए। वास्तव में कोई भी सामग्री प्रस्तुति या आइटमप्रदर्शक नहीं है, जो कि कैलेंडर दृश्यडायइटम स्टाइल के अंदर है ... इसलिए यह सुविधा इस सुविधा को डालती है। धन्यवाद।

अलहमुलुल्लाह हम अब हमारे लक्ष्य के करीब हैं ... और इनशाअल्लाह "रेंज चयन" सुविधा को रख सकते हैं, इसलिए मैं आपको ऐसे कुछ विषयों पर भेजना चाहता हूं जो निश्चित रूप से हमें "बहु चयन" सुविधा में मदद करते हैं। :)

दृश्यट्रीहेल्पर के माध्यम से हिटस्टेस्ट

विजुअलट्रीहेल्पर.फिडइलेमेंट इनहस्ट कॉओरेडेनेट्स (प्वाइंट, यूआईईलेमेंट) विधि

UIElement.FindSubElementsForTouchTargeting विधि

भौतिकी हेल्पर एक्सएएमएल

एक्सएएमएल टकराव का पता लगाना

एक्सएमएल व्यवहार एसडीके

इसलिए, यदि आप इन विषयों की जांच करते हैं आप मल्टी चयन सुविधा को उंगली से ज़ोर से मारना InshaAllah पर लागू करने में मदद मिलेगी :)


इस कैलेंडर एप्लिकेशन के लिए डेटाबेस के रूप में Google कैलेंडर का उपयोग क्यों न करें, कैलेंडर इवेंट को संग्रहीत करने और पुनर्प्राप्त करने के लिए Google कैलेंडर के API पर निर्भर होकर?

कैलेंडर API एक REST API है जिसे स्पष्ट HTTP कॉल के माध्यम से एक्सेस किया जा सकता है; API Google कैलेंडर वेब इंटरफ़ेस में उपलब्ध अधिकांश सुविधाओं को उजागर करता है, इसलिए आपका कैलेंडर एप्लिकेशन उतना ही कार्यक्षमता हो सकता है जितना Google कैलेंडर करता है (बहुत कार्यक्षमता;)।

आपके एप्लिकेशन को Google API के लिए केवल OAuth 2.0 को लागू करने की आवश्यकता है, जिसे उचित एक्सेस टोकन प्रदान करने के लिए Auth0 जैसी एकल साइन-ऑन सेवा का उपयोग करके आसान बनाया जा सकता है। फिर, आपका कैलेंडर एप्लिकेशन JSON प्रारूप में कैलेंडर ईवेंट के निर्बाध संग्रहण और पुनर्प्राप्ति प्रदान करने के लिए कैलेंडर API के साथ इन टोकन का उपयोग कर सकता है।

उपयोगकर्ता अपने "न्यू कैलेंडर" के भीतर ईवेंट बनाते हैं। यह कैलेंडर इस एप्लिकेशन को समर्पित एक जीमेल अकाउंट के रूप में आपके साथ साझा किया जाता है - एप्लिकेशन का जीमेल अकाउंट

मूल रूप से, Google कैलेंडर आपका डेटाबेस बन जाता है, जिससे आपके पास एप्लिकेशन का gmail खाता न केवल आपके एप्लिकेशन की सभी घटनाओं को संग्रहीत कर सकता है, बल्कि आपको इन घटनाओं को एक सहज ज्ञान युक्त अंतरफलक के साथ देखने और संपादित करने की भी अनुमति देता है।