如何在日历控件上的手指滑动上选择日期范围 - UWP Win10 VS2015 [英] How to select rang of dates on finger slide on Calendar Control - UWP Win10 VS2015
问题描述
我正在开发 UWP Win10 VS2015 App.我已经自定义了日历控件，但需要实现以下功能.
I am developing UWP Win10 VS2015 App. I have customized the Calendar Control but need to implement the following features.
点击任何日期，它应该以圆形实心圆圈突出显示.
Tap on any date, it should highlight with round filled circle.
在多个日期上点击并滑动手指，它应该选择那个日期范围.
Tap and Slide finger on multiple dates, it should Select that Range of Dates.
是否有任何 Visualstates 或其他事件可以放在样式 (ControlTemplate) 中并对其进行操作以滑动手指，当点击另一个日期的边界时，它应该突出显示.???或者这里应该应用什么程序:)
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 :)
请参阅以下 4 个屏幕截图.(这些只是示例照片，我需要这种类型的功能)
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.
查看动画图片，并将其与顶部给出的其他图形进行比较...当我们单击任何项目时，Border 的背景应变为BLUE，文本即日期应变为WHITE如上图所示.实际上，CalendarviewDayItem 样式中没有 ContentPresenter 或 ItemPresenter ...所以请放置此功能.谢谢.
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 我们现在非常接近我们的目标...... InshaAllah 可以加入范围选择"功能，所以我想向您推荐一些绝对有助于我们实现多选"功能的主题.:)
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. :)
通过 VisualTreeHelper 进行 HitTest
VisualTreeHelper.FindElementsInHostCoordinates(Point, UIElement)方法
UIElement.FindSubElementsForTouchTargeting 方法
所以，如果您检查这些主题.您将获得在手指滑动 InshaAllah 上实现多选功能的帮助 :)
So, if you check these topics. You will get help to implement the Multi Selection feature on finger swipe InshaAllah :)
推荐答案
calendarViewDayItem 的 Xaml 样式
<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);
}
}
更新
只需使用以下方法将选定的一个变为蓝色.去掉上面代码后面的代码
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;
}
当我们点击任何项目时，边框的背景应该变成蓝色，文本即日期应该变成白色，如上图所示
日历控件有很多属性.搜索这个 PressedForeground 并将它的值更改为白色并查看其他类似的属性
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
这篇关于如何在日历控件上的手指滑动上选择日期范围 - UWP Win10 VS2015的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
