win universal app - How to select rang of dates on finger slide on Calendar Control - UWP Win10 VS2015

Question

I am developing UWP Win10 VS2015 App. I have customized the Calendar Control but need to implement the following features.

1. Tap on any date, it should highlight with round filled circle.

2. Tap and Slide finger on multiple dates, it should Select that Range of Dates.

Is there any Visualstates or other Events to put inside the Style (ControlTemplate) and manipulate it to slide finger and when hit boundary of another date it should highlight. ??? Or what procedure should be applied here :)

See the following 4 Screen Shots. (these are just sample shots and I need such type of functionality)

According to the above screen shots ... this is a custom feature I think, and the Style and template may be edited and some Manipulation, Tap and Drag events may be put inside the style ... but how to put these and atleast get idea of putting this feature ... it will be much appreciated. thanks.

---

Updated

See the animated pic, and compare it with other figures as given at top ... When we click on any item the background of Border should become BLUE and the Text i.e. Date should become WHITE as shown in the above figures. Actually there is no ContentPresenter OR ItemPresenter inside the CalendarviewDayItem Style ... so plz put this feature. Thanks.

---

Alhamdulillah we are very close to our target now ... and InshaAllah can put the "Range Selection" feature, so I want to refer you to some topics which definitely help us in "Multi Selection" feature. :)

HitTest via VisualTreeHelper

VisualTreeHelper.FindElementsInHostCoordinates(Point, UIElement) method

UIElement.FindSubElementsForTouchTargeting method

Physics Helper XAML

XAML Collision detection

Xaml Behavior SDK

So, if you check these topics. You will get help to implement the Multi Selection feature on finger swipe InshaAllah :)

Answer 1

Xaml style for calendarViewDayItem

<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>

Code Behind

     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);
                    }


}

Update

Just use below methods to make selected one to blue. Remove above code behind codes

    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;
            }

When we click on any item the background of Border should become BLUE and the Text i.e. Date should become WHITE as shown in the above figures

There are lot of properties for calendar control. Search for this PressedForeground and change the value of it to white and go through other similar properties also