We Keep Coding

uwp gridviewitem scale animation partially overlaps other items [duplicate]

I am using AdaptiveGridView by UWP Community toolkit. I want the selected Item of the gridview to popup on the Z-axis, meaning the selected Item must scale up to a specific size, but it should not disturb the size of other gridview items, rather it should scale on Z axis of the canvas. what are possibilities to animate this effect also maybe using UWP community toolkit scale effect ( but that effects the size of other items as well). if its not possible on selected Item can it be somehow possible on pointer hover?

Method 1: On Selection changed
XAML Part
<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# Part
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();
}
}
Sample Output
Method 2: On Pointer Hover
XAML Part
<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# Part
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();
}
}
Sample Output
Method 3: With Drop Shadow
XAML Part
<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# Part
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();
}
}
Sample Output
(Old Post)
Method 1 (Doesn't overlay with other items)
XAML Part
<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# Part
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();
}
Sample Output
Method 2 (will overlay with other items)
XAML Part
<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# Part
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();
}
Sample Output

WPF. How to add text under image in c#

I have image which I set behind code and now I have to set 3 texts under the picture also behind code, maybe somenoe knoe how to make it?
my xaml:
...<Style x:Key="imageStyle" TargetType="{x:Type Image}">
<Setter Property="Height" Value="152px"/>
<Setter Property="Width" Value="762"/>
</Style>
</windows.Resources>
<Grid>
<StackPanel x:Name="StackStyle" Background="#FFFFFF" Margin="30,98,250,150">...
My xaml.cs is:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.Loaded += OnLoaded;
}
private void OnLoaded(object sender, RoutedEventArgs routedEventArgs)
{
Style imgStyle = (Style)Resources["imageStyle"];
var imag = new Image();
imag.Style = imgStyle;
string path = System.AppDomain.CurrentDomain.BaseDirectory + "../../ico.choose-coupon.png";
imag.Source = new BitmapImage(new Uri(path));
StackStyle.Children.Add(imag);
}
}
do not forget that this is one image, and these text have to be under Gray field.
UPDATE:
I get what I want, thats the code:
xaml:
<Viewbox Stretch="Fill">
<Grid>
<StackPanel Orientation="Vertical" x:Name="myStackPanel" Background="#FFFFFF" Height="560" Width="968" HorizontalAlignment="Center" >
<Label Style="{StaticResource Label}" ></Label>
</StackPanel>
</Grid>
</Viewbox>
xaml.cs:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.Loaded += OnLoaded;
}
private void OnLoaded(object sender, RoutedEventArgs routedEventArgs)
{
string path = System.AppDomain.CurrentDomain.BaseDirectory + "../../ico.choose-coupon.png";
Style imgStyle = (Style)Resources["imageStyle"];
var imag = new Image();
imag.Style = imgStyle;
imag.Source = new BitmapImage(new Uri(path));
myStackPanel.Children.Add(imag);
Style textStyle = (Style) Resources["textStyle"];
var text1 = new TextBlock();
var text2 = new TextBlock();
var text3 = new TextBlock();
text1.Style = textStyle;
text2.Style = textStyle;
text3.Style = textStyle;
text1.Text = "% coupon";
text2.Text = "Tara receipt";
text3.Text = "Value coupon";
text1.Margin = new Thickness(135,22,0,0);
text2.Margin = new Thickness(210, 22, 0, 0);
text3.Margin = new Thickness(188, 22, 0, 0);
var TextPanel = new StackPanel();
TextPanel.Orientation = Orientation.Horizontal;
TextPanel.Children.Add(text1);
TextPanel.Children.Add(text2);
TextPanel.Children.Add(text3);
myStackPanel.Children.Add(TextPanel);
}
}

You can use a button style. For the Text and the Image you can set an binding to the propertys. Maybe you write an Style for the button so that looks like in your example.
<Button>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Source}">
<Label Padding="0" Text="{Binding YourText}"></Label>
</StackPanel>
</Button>

Here is an exmaple of simple UserControl:
Add new userControl template to your project.
I am attaching an example of userControl with TextBox and TextBlock:
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="WpfApplication1.Example"
x:Name="UserControl"
d:DesignWidth="640" d:DesignHeight="480" Width="40" Height="40">
<Grid x:Name="LayoutRoot" Width="40" Height="40" Background="White">
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Test " VerticalAlignment="Top" Height="14.32"/>
<TextBox HorizontalAlignment="Left" Height="23" Margin="0,17,0,0" TextWrapping="Wrap" Text="Text" VerticalAlignment="Top" Width="40"/>
</Grid>
</UserControl>
Then in your window, just call to your userControl as much as you want(You can pass objects to it too):
<local:Example HorizontalAlignment="Left" Margin="16.4,22.4,0,0" VerticalAlignment="Top"/>
<local:Example HorizontalAlignment="Left" Margin="16.4,22.4,0,0" VerticalAlignment="Top"/>
<local:Example HorizontalAlignment="Left" Margin="16.4,22.4,0,0" VerticalAlignment="Top"/>

Generating items in ListVIew

I need to generate a listview with data I have in an array
my XAML is:
<Page.Resources>
<DataTemplate x:Key="IconTextDataTemplate">
<StackPanel Orientation="Horizontal" Width="220" Height="60">
<Border Background="#66727272" Width="40" Height="40" Margin="10">
<Image Source="/SampleImage.png" Height="32" Width="32" Stretch="UniformToFill"/>
</Border>
<StackPanel Orientation="Vertical" VerticalAlignment="Center">
<TextBlock x:Name="Name" Margin="10,0,0,0" Width="170" Height="20" TextTrimming="WordEllipsis" Loaded="Name_Loaded"/>
<TextBlock x:Name="Description" Margin="10,0,0,0" Width="170" Height="20" TextTrimming="WordEllipsis" Loaded="Description_Loaded"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</Page.Resources>
<ListView x:Name="IconTextGrid" Height="400" ItemTemplate="{StaticResource IconTextDataTemplate}" Grid.Row="4" Margin="40,40,40,10" HorizontalAlignment="Stretch">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid MaximumRowsOrColumns="8"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
And the C# code:
private async void SearchBox_QuerySubmitted(SearchBox sender, SearchBoxQuerySubmittedEventArgs args)
{
foreach (var item in results)
{
IconTextGrid.Items.Add("");
nameStr = item.FirstName + " " + item.LastName;
descriptionStr = item.Email;
}
}
public T FindElementByName<T>(DependencyObject element, string sChildName) where T : FrameworkElement
{
T childElement = null;
var nChildCount = VisualTreeHelper.GetChildrenCount(element);
for (int i = 0; i < nChildCount; i++)
{
FrameworkElement child = VisualTreeHelper.GetChild(element, i) as FrameworkElement;
if (child == null)
continue;
if (child is T && child.Name.Equals(sChildName))
{
childElement = (T)child;
break;
}
childElement = FindElementByName<T>(child, sChildName);
if (childElement != null)
break;
}
return childElement;
}
private void Name_Loaded(object sender, RoutedEventArgs e)
{
TextBlock Name = FindElementByName<TextBlock>(this, "Name");
Name.Text = nameStr;
}
private void Description_Loaded(object sender, RoutedEventArgs e)
{
TextBlock Description = FindElementByName<TextBlock>(this, "Description");
Description.Text = descriptionStr;
}
This code should generate a list view with some items (in the array size) and put in every item the data from the cell in the array.
The problem is that only in one item I see the data from the array and in the other items there is nothing.
Wish for help, thanks

Your code is failing for at least one reason:
foreach (var item in results)
{
IconTextGrid.Items.Add("");
nameStr = item.FirstName + " " + item.LastName;
descriptionStr = item.Email;
}
you appear to be storing nameStr and descriptionStr into fields. But you are only storing the last item in results.
The good news is you can simplify and fix your code all at once. Using
foreach (var item in results)
{
var nameStr = item.FirstName + " " + item.LastName;
var descriptionStr = item.Email;
IconTextGrid.Items.Add(new { Name = nameStr, Description = descriptionStr });
}
That will create anonymous types with Name and Description properties for the ListView elements. You can then use:
<DataTemplate x:Key="IconTextDataTemplate">
<StackPanel ...>
<Image .../>
</Border>
<StackPanel ...>
<TextBlock Text="{Binding Name}" Margin="10,0,0,0" Width="170" Height="20" TextTrimming="WordEllipsis"/>
<TextBlock Text="{Binding Description} Margin="10,0,0,0" Width="170" Height="20" TextTrimming="WordEllipsis"/>
</StackPanel>
</StackPanel>
</DataTemplate>
And remove your FindElementByName, Name_Loaded, and Description_Loaded methods.

Load Pivotitems incrementally. Mimic month view in wp8 Calendar

I want to build a monthview like the native wp8 calendar has.
But I am stuck with the incrementally loading of more Pivotitems when reaching the the end of the initial loaded Pivotitems.
I am kind of confused, how this could be achieved.
Here is my xaml so far:
<phone:Pivot x:Name="MonthViewPivot" ItemsSource="{Binding Months}" Margin="0" Loaded="Pivot_Loaded" SelectionChanged="Pivot_SelectionChanged">
<phone:Pivot.HeaderTemplate>
<DataTemplate>
<Grid>
<TextBlock Padding="0,0,0,0" Text="{Binding Name}" RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<CompositeTransform TranslateX="0" TranslateY="24"/>
</TextBlock.RenderTransform>
</TextBlock>
</Grid>
</DataTemplate>
</phone:Pivot.HeaderTemplate>
<phone:Pivot.ItemTemplate>
<DataTemplate>
<Grid x:Name="MonthViewGrid" Height="480" Loaded="MonthViewGrid_Loaded" VerticalAlignment="Top" Margin="-10,70">
<StackPanel Orientation="Horizontal" Height="30" VerticalAlignment="Top" Margin="0,-30" >
<TextBlock Width="68.5" Padding="6,0" Foreground="Gray">Mo</TextBlock>
<TextBlock Width="68.5" Padding="6,0" Foreground="Gray">Di</TextBlock>
<TextBlock Width="68.5" Padding="6,0" Foreground="Gray">Mi</TextBlock>
<TextBlock Width="68.5" Padding="6,0" Foreground="Gray">Do</TextBlock>
<TextBlock Width="68.5" Padding="6,0" Foreground="Gray">Fr</TextBlock>
<TextBlock Width="68.5" Padding="6,0" Foreground="Gray">Sa</TextBlock>
<TextBlock Width="68.5" Padding="6,0" Foreground="Gray">So</TextBlock>
</StackPanel>
</Grid>
</DataTemplate>
</phone:Pivot.ItemTemplate>
</phone:Pivot>

So here is my solution so far.
I still need to increase the count of PivotItems, but 12 seems to high for a fast UX. I think 5 will do.
UserControl:
<UserControl x:Class="Pocal.MonthViewUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="480" d:DesignWidth="480">
<Grid x:Name="LayoutRoot">
<Grid x:Name="MonthViewGrid" Margin="0,60,0,0">
<StackPanel Orientation="Horizontal" Height="30" VerticalAlignment="Top" Margin="0,-30" >
<TextBlock Width="68.5" Padding="6,0" Foreground="Gray">Mon</TextBlock>
<TextBlock Width="68.5" Padding="6,0" Foreground="Gray">Tue</TextBlock>
<TextBlock Width="68.5" Padding="6,0" Foreground="Gray">Wed</TextBlock>
<TextBlock Width="68.5" Padding="6,0" Foreground="Gray">Thu</TextBlock>
<TextBlock Width="68.5" Padding="6,0" Foreground="Gray">Fri</TextBlock>
<TextBlock Width="68.5" Padding="6,0" Foreground="Gray">Sat</TextBlock>
<TextBlock Width="68.5" Padding="6,0" Foreground="Gray">Sun</TextBlock>
</StackPanel>
</Grid>
</Grid>
UserControl Code Behind:
public partial class MonthViewUserControl : UserControl
{
public MonthViewUserControl()
{
InitializeComponent();
}
public void loadGridSetup(DateTime dt)
{
TextBlock txt = new TextBlock();
txt.Text = dt.ToShortDateString();
txt.Tap += dayTap;
(MonthViewGrid as Grid).Children.Add(txt);
}
void dayTap(object sender, System.Windows.Input.GestureEventArgs e)
{
DateTime dt = (DateTime)((FrameworkElement)sender).DataContext;
MonthView.CurrentPage.navigateBackToDay(dt);
}
}
MonthView XAML:
<phone:PhoneApplicationPage
x:Class="Pocal.MonthView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
xmlns:local="clr-namespace:Pocal"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="False">
<Grid x:Name="LayoutRoot" Background="Transparent">
<TextBlock Style="{StaticResource PhoneTextTitle3Style}" VerticalAlignment="Top" Margin="24,24" FontWeight="SemiBold">2014</TextBlock>
<phone:Pivot x:Name="MonthsPivot" Margin="0,36,0,0" SelectionChanged="Pivot_SelectionChanged">
</phone:Pivot>
</Grid>
MonthView COde Behind:
public partial class MonthView : PhoneApplicationPage
{
public static MonthView CurrentPage;
PivotItem pivotItem;
MonthViewUserControl monthViewUserControl;
public MonthView()
{
InitializeComponent();
CurrentPage = this;
addFirstThreePivots();
}
private void addFirstThreePivots()
{
DateTime dt = DateTime.Now.Date;
DateTime dt2 = dt.AddMonths(1);
DateTime dt3 = dt.AddMonths(-1);
addPivotItem(dt);
addPivotItem(dt2);
addPivotItem(dt3);
}
private void addPivotItem(DateTime dt)
{
monthViewUserControl = new MonthViewUserControl();
monthViewUserControl.loadGridSetup(dt);
pivotItem = new PivotItem();
pivotItem.Content = monthViewUserControl;
pivotItem.DataContext = dt;
pivotItem.Margin = new Thickness(0, 0, 0, 0);
pivotItem.Header = dt.ToString("MMMM");
MonthsPivot.Items.Add(pivotItem);
}
private void Pivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
DependencyObject selectedPivotItem = ((Pivot)sender).ItemContainerGenerator.ContainerFromIndex(((Pivot)sender).SelectedIndex);
if (selectedPivotItem == null)
return;
DateTime removedDateTime = (DateTime)(e.RemovedItems[0] as PivotItem).DataContext;
DateTime addedDateTime = (DateTime)(e.AddedItems[0] as PivotItem).DataContext;
if (removedDateTime < addedDateTime)
{
forwardPan(addedDateTime);
}
else
backwardPan(addedDateTime);
}
private void forwardPan(DateTime addedDateTime)
{
PivotItem nextPivotItem = (PivotItem)getNextPivotItem();
DateTime newDateTime = addedDateTime.AddMonths(1);
MonthViewUserControl monthViewItem = new MonthViewUserControl();
monthViewItem.loadGridSetup(newDateTime);
nextPivotItem.DataContext = newDateTime;
nextPivotItem.Content = monthViewItem;
nextPivotItem.Header = newDateTime.ToString("MMMM");
}
private DependencyObject getNextPivotItem()
{
int index = ((Pivot)MonthsPivot).SelectedIndex;
int nextIndex;
if (index == 2)
{
nextIndex = 0;
}
else
nextIndex = index + 1;
DependencyObject nextPivotItem = ((Pivot)MonthsPivot).ItemContainerGenerator.ContainerFromIndex(nextIndex);
return nextPivotItem;
}
private void backwardPan(DateTime addedDateTime)
{
PivotItem previousPivotItem = (PivotItem)getPreviousPivotItem();
DateTime newDateTime = addedDateTime.AddMonths(-1);
MonthViewUserControl monthViewItem = new MonthViewUserControl();
monthViewItem.loadGridSetup(newDateTime);
previousPivotItem.DataContext = newDateTime;
previousPivotItem.Content = monthViewItem;
previousPivotItem.Header = newDateTime.ToString("MMMM");
}
private DependencyObject getPreviousPivotItem()
{
int index = ((Pivot)MonthsPivot).SelectedIndex;
int previousIndex;
if (index == 0)
{
previousIndex = 2;
}
else
previousIndex = index - 1;
DependencyObject previousPivotItem = ((Pivot)MonthsPivot).ItemContainerGenerator.ContainerFromIndex(previousIndex);
return previousPivotItem;
}
public void navigateBackToDay(DateTime dt)
{
App.ViewModel.GoToDate(dt);
NavigationService.Navigate(new Uri("/Mainpage.xaml?GoToDate=", UriKind.Relative), dt);
}
}

ListView Scrolling does not work when Manipulation events wired into ListviewItem - WP8.1

I have wired Manipulation events with the listviewitem to capture left swipe and right swipe. But when I try to scroll down the listview, it does not work! The manipulation events get fired and the listview does not scroll!
This is the listview Datatemplate
<Grid Height="60" Width="380" Margin="0,0,0,1">
<Grid x:Name="ItemGrid" HorizontalAlignment="Left" VerticalAlignment="Center" Width="380" Height="60" Background="Orange" Canvas.ZIndex="2"
ManipulationMode="TranslateX" ManipulationStarted="On_ChannelItem_ManipulationStarted" ManipulationDelta="On_ChannelItem_ManipulationDelta" ManipulationCompleted="OnChannelItemManipulationCompleted">
<TextBlock x:Name="titleTextBlock" Margin="20,0,0,0" Canvas.ZIndex="2" VerticalAlignment="Center" TextAlignment="Left" FontSize="25" >
</TextBlock>
</Grid>
<Grid x:Name="DelGrid" Opacity="0.0" HorizontalAlignment="Right" VerticalAlignment="Center" Height="60" Background="Red" Canvas.ZIndex="-1" Tapped="On_ChannelDelete_Tap" Width="380">
<Button Content="X" FontSize="25" Canvas.ZIndex="-1" VerticalAlignment="Center" HorizontalAlignment="Center" Width="380" BorderThickness="0" />
</Grid>
</Grid>
This is the manipulation events
private void OnChannelItemManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
{
Grid ChannelGrid = (Grid)sender;
Grid DeleteGrid = (Grid)((Grid)(ChannelGrid.Parent)).Children[1];
double dist = e.Cumulative.Translation.X;
if (dist < -100) // Swipe left
{
Storyboard SwipeLeft = new Storyboard();
DoubleAnimation OpacityAnimation = new DoubleAnimation();
OpacityAnimation.EnableDependentAnimation = true;
OpacityAnimation.From = 0.0;
OpacityAnimation.To = 1.0;
OpacityAnimation.BeginTime = TimeSpan.FromMilliseconds(0);
OpacityAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(1));
Storyboard.SetTarget(OpacityAnimation, DeleteGrid);
Storyboard.SetTargetProperty(OpacityAnimation, "Opacity");
SwipeLeft.Children.Add(OpacityAnimation);
DoubleAnimation WidthAnimation = new DoubleAnimation();
WidthAnimation.EnableDependentAnimation = true;
WidthAnimation.From = 380;
WidthAnimation.To = 0;
WidthAnimation.BeginTime = TimeSpan.FromMilliseconds(30);
WidthAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(100));
Storyboard.SetTarget(WidthAnimation, ChannelGrid);
Storyboard.SetTargetProperty(WidthAnimation, "Width");
SwipeLeft.Children.Add(WidthAnimation);
SwipeLeft.Begin();
}
else if (dist > 100) // Swipe right
{
Storyboard SwipeRight = new Storyboard();
ColorAnimation changeColorAnimation = new ColorAnimation();
changeColorAnimation.EnableDependentAnimation = true;
changeColorAnimation.To = Colors.Green;
changeColorAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(100));
Storyboard.SetTarget(changeColorAnimation, ChannelGrid);
PropertyPath p = new PropertyPath("(ChannelGrid.Background).(SolidColorBrush.Color)");
Storyboard.SetTargetProperty(changeColorAnimation, p.Path);
SwipeRight.Children.Add(changeColorAnimation);
SwipeRight.Begin();
}
}
How do I enable the normal listview scrolling as well as the swipe? Vertical Scrolling is possible when I remove the manipulation events

Update your manipulation mode to include System:
ManipulationMode="TranslateX,System"