如何在日历控制 - UWP Win10 VS2015手指幻灯片上选择日期范围 [英] How to select rang of dates on finger slide on Calendar Control - UWP Win10 VS2015
问题描述
我正在开发UWP Win10 VS2015应用程序。我已经定制了日历控制，但需要实现以下功能。
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或其他事件放在Style（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 ，如上图所示。实际上没有ContentPresenter或ItemPresenter里面的CalendarviewDayItem风格...所以plz放这个功能。非常感谢。
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.FindElementsInHostCoordinates（Point，UIElement）method
UIElement .FindSubElementsForTouchTargeting方法
因此，如果您检查这些主题。 ）
So, if you check these topics. You will get help to implement the Multi Selection feature on finger swipe InshaAllah :)
推荐答案
calendarViewDayItem的Xaml样式
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>
代码背后
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;
}
当我们点击任何项目时，Border的背景应该变成BLUE并且文本即日期应该变为WHITE，如上图所示
日历控件有很多属性。搜索此 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屋！
