nacimiento - Cómo seleccionar un intervalo de fechas en la diapositiva del dedo en el control de calendario-UWP Win10 VS2015
seleccionar fecha en html (1)
Estilo Xaml para 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>
Código detrás
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);
}
}
Actualizar
Simplemente use los métodos a continuación para hacer que el seleccionado sea azul. Eliminar el código anterior detrás de los códigos
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;
}
Cuando hacemos clic en cualquier elemento, el fondo de Border debe volverse AZUL y el Texto, es decir, Fecha debe volverse BLANCO, como se muestra en las figuras anteriores.
Hay muchas propiedades para el control de calendario. Busque este PressedForeground y cambie el valor de este a blanco y pase por otras propiedades similares también
Estoy desarrollando la aplicación UWP Win10 VS2015. Personalicé el control de calendario pero necesito implementar las siguientes características.
Toque cualquier fecha, debe resaltar con un círculo redondo.
Toque y deslice el dedo en varias fechas, debe seleccionar ese rango de fechas.
¿Hay Visualstates u otros Eventos para poner dentro del Estilo (ControlTemplate) y manipularlo para deslizar el dedo y cuando se tocó el límite de otra fecha debe resaltar. ??? O qué procedimiento debería aplicarse aquí :)
Vea las siguientes 4 capturas de pantalla. (Estas son solo tomas de muestra y necesito ese tipo de funcionalidad)
De acuerdo con las capturas de pantalla anteriores ... esta es una función personalizada, creo, y el Estilo y la plantilla pueden editarse y algunos eventos de Manipulación, Tap y Arrastrar pueden ponerse dentro del estilo ... pero cómo ponerlos y al menos obtenerlos idea de poner esta característica ... será muy apreciada. Gracias.
Actualizado
Vea la imagen animada, y compárela con otras figuras como se indica en la parte superior ... Cuando hacemos clic en cualquier elemento, el fondo de Border debe volverse AZUL y el texto, por ejemplo, Fecha debe volverse BLANCO, como se muestra en las figuras anteriores. En realidad, no hay ningún ContentPresenter O ItemPresenter dentro de CalendarviewDayItem Style ... así que por favor ponga esta característica. Gracias.
Alhamdulillah, estamos muy cerca de nuestro objetivo ahora ... y InshaAllah puede poner la función "Selección de rango", por lo que quiero remitirlo a algunos temas que definitivamente nos ayudan en la función "Selección múltiple". :)
HitTest mediante VisualTreeHelper
Método VisualTreeHelper.FindElementsInHostCoordinates (Punto, UIElement)
UIElement.FindSubElementsForTouchTargeting method
Por lo tanto, si revisa estos temas. Obtendrá ayuda para implementar la función Selección múltiple al deslizar el dedo InshaAllah :)