Я использую AdaptiveGridView by UWP Community toolkit. Я хочу, чтобы выбранный элемент в gridview был всплывающим по оси Z, то есть выбранный элемент должен масштабироваться до определенного размера, но он не должен влиять на размер других элементов gridview, а должен масштаб по оси Z холста. Какие есть возможности для анимации этого эффекта, также возможно, используя набор инструментов сообщества UWP эффект масштаба (но это также влияет на размер других элементов). если это невозможно для выбранного элемента, может ли это быть каким-то образом возможно при наведении указателя?
uwp GridView selectedItem Popup
Ответы (1)
Метод 1: при выборе изменено
Часть XAML
<GridView Height="200" SelectionChanged="GridView_SelectionChanged">
<GridView.ItemTemplate>
<DataTemplate x:DataType="local:ItemSource">
<Grid Width="100" Height="100">
<!-- Content -->
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid VerticalAlignment="Center" HorizontalAlignment="Center"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
Часть C #
FrameworkElement lastPopUpElement = null;
private void GridView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (lastPopUpElement != null)
{
Canvas.SetZIndex(lastPopUpElement, 0);
lastPopUpElement.Scale(centerX: 50, centerY: 50, easingType: EasingType.Sine).Start();
}
lastPopUpElement = (sender as GridView).ContainerFromIndex((sender as GridView).SelectedIndex) as FrameworkElement;
if (lastPopUpElement != null)
{
Canvas.SetZIndex(lastPopUpElement, 1);
lastPopUpElement.Scale(scaleX: 1.5f, scaleY: 1.5f, centerX: 50, centerY: 50, easingType: EasingType.Sine).Start();
}
}
Пример вывода
Метод 2: при наведении указателя
Часть XAML
<GridView Height="200">
<GridView.ItemTemplate>
<DataTemplate x:DataType="local:ItemSource">
<Grid Width="100" Height="100" PointerEntered="GridView_PointerEntered" PointerExited="GridView_PointerExited">
<!-- Content -->
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid VerticalAlignment="Center" HorizontalAlignment="Center"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
Часть C #
FrameworkElement lastPopUpElement = null;
private void GridView_PointerEntered(object sender, PointerRoutedEventArgs e)
{
lastPopUpElement = VisualTreeHelper.GetParent(VisualTreeHelper.GetParent(sender as FrameworkElement) as FrameworkElement) as FrameworkElement;
Canvas.SetZIndex(lastPopUpElement, 1);
lastPopUpElement.Scale(scaleX: 1.5f, scaleY: 1.5f, centerX: 50, centerY: 50, easingType: EasingType.Sine).Start();
}
private void GridView_PointerExited(object sender, PointerRoutedEventArgs e)
{
if (lastPopUpElement != null)
{
Canvas.SetZIndex(lastPopUpElement, 0);
lastPopUpElement.Scale(centerX: 50, centerY: 50, easingType: EasingType.Sine).Start();
}
}
Пример вывода
Метод 3: с падающей тенью
Часть XAML
<GridView Height="200">
<GridView.ItemTemplate>
<DataTemplate x:DataType="local:ItemSource">
<controls:DropShadowPanel OffsetX="5" OffsetY="5" Color="Black" BlurRadius="5" ShadowOpacity="0" PointerEntered="myListView_PointerEntered" PointerExited="myListView_PointerExited">
<Grid Width="100" Height="100" VerticalAlignment="Center" HorizontalAlignment="Center">
<!-- Content -->
</Grid>
</controls:DropShadowPanel>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid VerticalAlignment="Center" HorizontalAlignment="Center"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
Часть C #
private void myListView_PointerEntered(object sender, PointerRoutedEventArgs e)
{
DropShadowPanel DropShadow = sender as DropShadowPanel;
lastPopUpElement = VisualTreeHelper.GetParent(VisualTreeHelper.GetParent(DropShadow) as FrameworkElement) as FrameworkElement;
DropShadow.ShadowOpacity = 0.5;
Canvas.SetZIndex(lastPopUpElement, 10);
lastPopUpElement.Scale(scaleX: 1.5f, scaleY: 1.5f, centerX: 50, centerY: 50, easingType: EasingType.Sine).Start();
}
private void myListView_PointerExited(object sender, PointerRoutedEventArgs e)
{
if (lastPopUpElement != null)
{
DropShadowPanel DropShadow = sender as DropShadowPanel;
DropShadow.ShadowOpacity = 0;
Canvas.SetZIndex(lastPopUpElement, 0);
lastPopUpElement.Scale(centerX: 50, centerY: 50, easingType: EasingType.Sine).Start();
}
}
Пример вывода
(Старая запись)
Метод 1 (не перекрывается с другими элементами)
Часть XAML
<Grid Name="MainGrid" Height="200">
<controls:AdaptiveGridView x:Name="myAdaptiveGridView" SelectionChanged="myAdaptiveGridView_SelectionChanged" VerticalAlignment="Center" HorizontalAlignment="Left">
<controls:AdaptiveGridView.ItemTemplate>
<DataTemplate>
<Grid Width="150" Height="150">
<Grid Width="100" Height="100" VerticalAlignment="Center" HorizontalAlignment="Center">
<!-- Content -->
</Grid>
</Grid>
</DataTemplate>
</controls:AdaptiveGridView.ItemTemplate>
</controls:AdaptiveGridView>
</Grid>
Часть C #
FrameworkElement oldSetectedItem = null;
private void myAdaptiveGridView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (oldSetectedItem != null)
oldSetectedItem.Scale(1, 1, 50, 50, 500).Start();
var container = myAdaptiveGridView.ContainerFromIndex(myAdaptiveGridView.SelectedIndex) as FrameworkElement;
var listViewItemPresenter = VisualTreeHelper.GetChild(container, 0) as FrameworkElement;
var outerGrid = VisualTreeHelper.GetChild(listViewItemPresenter, 0) as FrameworkElement;
var grid = VisualTreeHelper.GetChild(outerGrid, 0) as FrameworkElement;
oldSetectedItem = grid;
grid.Scale(1.5f, 1.5f, 50, 50, 500).Start();
}
Пример вывода
Метод 2 (накладывается на другие элементы)
Часть XAML
<Grid Name="MainGrid" Height="200">
<controls:AdaptiveGridView x:Name="myAdaptiveGridView" SelectionChanged="myAdaptiveGridView_SelectionChanged" VerticalAlignment="Center" HorizontalAlignment="Left">
<controls:AdaptiveGridView.ItemTemplate>
<DataTemplate>
<Grid Width="100" Height="100" VerticalAlignment="Center" HorizontalAlignment="Center">
<!-- Content -->
</Grid>
</DataTemplate>
</controls:AdaptiveGridView.ItemTemplate>
</controls:AdaptiveGridView>
<Image x:Name="RenderedImage" Stretch="None" Visibility="Collapsed" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</Grid>
Часть C #
private async void myAdaptiveGridView_SelectionChangedAsync(object sender, SelectionChangedEventArgs e)
{
RenderedImage.Scale(1, 1, 0, 0, 0).Start();
var container = myAdaptiveGridView.ContainerFromIndex(myAdaptiveGridView.SelectedIndex) as FrameworkElement;
var listViewItemPresenter = VisualTreeHelper.GetChild(container, 0) as FrameworkElement;
var grid = VisualTreeHelper.GetChild(listViewItemPresenter, 0) as FrameworkElement;
oldSetectedItem = grid;
var TTV = grid.TransformToVisual(MainGrid);
Point screenCoords = TTV.TransformPoint(new Point(0, 0));
RenderTargetBitmap renderTargetBitmap = new RenderTargetBitmap();
await renderTargetBitmap.RenderAsync(grid);
RenderedImage.Source = renderTargetBitmap;
RenderedImage.Margin = new Thickness(screenCoords.X, screenCoords.Y, 0, 0);
RenderedImage.Width = grid.ActualWidth;
RenderedImage.Height = grid.ActualHeight;
RenderedImage.Visibility = Visibility.Visible;
RenderedImage.Scale(1.5f, 1.5f, 50, 50, 500).Start();
}
Пример вывода
person
Vijay Nirmal
schedule
22.06.2017
это блестящий ответ, хорошая работа @VijayNirmal Я думаю, мы также можем добавить эффект тени, который улучшит эффект наложения, но вы выполнили основную задачу, большое спасибо :)
- person Muhammad Touseef; 22.06.2017
кстати, во 2-м методе, почему вы ставите высоту 150 внешней сетки? он будет работать с высотой 100, я думаю, потому что он должен перекрывать
- person Muhammad Touseef; 22.06.2017
@JustinXL Спасибо
- person Vijay Nirmal; 23.06.2017
@touseef Да. Вы можете удалить это. Отредактирую свой ответ.
- person Vijay Nirmal; 23.06.2017
Я открыл проблему в UWPCommunityToolkit для создания анимации PopUp.
- person Vijay Nirmal; 23.06.2017
@touseef Если у вас есть предложения, вы можете сказать это по этому поводу.
- person Vijay Nirmal; 23.06.2017
Конечно я буду ,,,,,,
- person Muhammad Touseef; 23.06.2017
@VijayNirmal Привет, U ответила мне на этот вопрос давным-давно, и это сработало для меня, и мы также взяли его в инструментарий сообщества, но теперь я пробую это другое приложение с обновленной анимацией инструментария, и у меня проблемы с настройкой zindex, не могли бы вы взглянуть на мой другой вопрос? Я был бы очень признателен . stackoverflow.com/ questions / 49049521 /
- person Muhammad Touseef; 02.03.2018
@touseef Я ответил на ваш вопрос в этом посте.
- person Vijay Nirmal; 02.03.2018
var container = AdaptiveGridViewControl.ContainerFromIndex(AdaptiveGridViewControl.SelectedIndex) as FrameworkElementи пытаюсь увеличить масштаб с помощьюcontainer.Scale(2, 2, 0, 0, 500, 0, EasingType.Default), но это не увеличивает масштаб, но когда я изменяю ширину (или высоту), это влияет на выбранный элемент, как ожидалось. Почему масштаб не влияет на макет? - person Vijay Nirmal schedule 22.06.2017RenderTargetBitmap, чтобы запечатлеть внешний вид элемента, по которому был выполнен щелчок, а затем установить его источник наImage, который перекрываетGridView. - person Justin XL schedule 22.06.2017var listViewItemPresenter = VisualTreeHelper.GetChild(container, 0) as FrameworkElement; var innerElement = VisualTreeHelper.GetChild(listViewItemPresenter, 0) as FrameworkElement;Но все равно Масштаб не работал. Масштабирование работает только с изображением? потому что я пробовал масштабировать сButtonиGrid, оба не работали - person Vijay Nirmal schedule 22.06.2017RenderTargetBitmapс возвратом изображения, тогда как он может содержать функциональность кнопки? Кроме того, разрешение изображения не может быть изменено после PopUp, поэтому изображение PopUp не выглядит хорошо. - person Vijay Nirmal schedule 27.08.2017