Can't get ItemClicked event - xaml

I'm new in XAML, please help me why I can't get click event.
I can get Tapped event on DataTemplate/Grid by I need exact ID of the item clicked.
Here is my grid:
<GridView
x:Name="newsGridView"
SelectionMode="None"
IsSwipeEnabled="false"
ItemsSource="{Binding Source={StaticResource newsViewSource}}"
ItemClick="newsGridView_ItemClick">
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="160" Height="160">
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
<Image Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Text}"/>
</Border>
<StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
<TextBlock Text="{Binding Text}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="30" Margin="15,0,15,0"/>
<TextBlock Text="{Binding Subtitle}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
My event handler
private void newsGridView_ItemClick(object sender, ItemClickEventArgs e)
{
var s = sender as NewsObject;
}
TIA

you have to assign IsItemClickEnabled property
<GridView
x:Name="newsGridView"
SelectionMode="None"
IsSwipeEnabled="false"
ItemsSource="{Binding Source={StaticResource newsViewSource}}"
IsItemClickEnabled="true"
ItemClick="newsGridView_ItemClick">
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="160" Height="160">
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
<Image Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Text}"/>
</Border>
<StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
<TextBlock Text="{Binding Text}"
Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}"
Style="{StaticResource TitleTextStyle}" Height="30" Margin="15,0,15,0"/>
<TextBlock Text="{Binding Subtitle}"
Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}"
Style="{StaticResource CaptionTextStyle}"
TextWrapping="NoWrap" Margin="15,0,15,10"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>

Related

2 DataTemplates within each other, Command not found

My ICommand is not firing when i touch my button...
I have a DataTemplate within a DataTemplate... does DataContext still refer to the entire page or is it that DataContext refers to the previous DataTemplate and that's why it cannot find my view model's ICommand?
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel VerticalAlignment="Top">
<Border BorderThickness="0 0 0 2" BorderBrush="{StaticResource xLightGray}" Margin="0,0,0,10" Padding="0,0,0,10">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Background="Transparent">
<Border Background="White" BorderThickness="0" Width="40" Height="40" HorizontalAlignment="Left">
<Image Source="{Binding image.thumbnail_link}" Width="40" Height="40"></Image>
</Border>
</StackPanel>
<StackPanel Grid.Column="1" VerticalAlignment="Center" Background="Transparent">
<TextBlock Text="{Binding name}" HorizontalAlignment="Left" FontSize="30" VerticalAlignment="Center" Padding="10,0,0,0" />
</StackPanel>
</Grid>
</Border>
<phone:LongListSelector x:Name="OrganisationItemList"
Background="Transparent"
ItemsSource="{Binding spaces}"
LayoutMode="List"
VerticalContentAlignment="Stretch">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<Button Background="Red" Style="{StaticResource xTransparentButton}" Command="{Binding Path=DataContext.LoadSpaceCommand, ElementName=SpaceList}" CommandParameter="{Binding}" Padding="0,0,0,5" Margin="0" Height="auto" BorderThickness="0" HorizontalAlignment="Left" VerticalAlignment="Stretch" HorizontalContentAlignment="Left" UseLayoutRounding="True" FontSize="0.01">
<StackPanel Grid.Column="1" VerticalAlignment="Center" Background="Transparent">
<TextBlock Padding="0,0,0,0" Text="{Binding name}" HorizontalAlignment="Left" FontSize="{StaticResource xFontSize}" />
</StackPanel>
</Button>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
Found the answer, you must set ElementName in the binding to the parent ListBox:
Command="{Binding Path=DataContext.LoadSpaceCommand, ElementName=OrganisationList}"

XAML error: "The property 'VisualTree' is set more than once"

I'm trying to put two Grids in a DataTemplate.
I'm getting the following error with my code shown below.
Error: "The property 'VisualTree' is set more than once"
<DataTemplate x:Key="PareoItemTemplate">
<Grid x:Name="gridColorEjercicio" Height="100" Width="350" Background="#FFF0F0F0" Margin="-11,0,0,0">
<StackPanel Margin="0" Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
<StackPanel Margin="0,10,15,0" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="{Binding letter}" FontSize="24" FontFamily="Resources/Fonts/Programa Tutorias Bold.ttf#Programa Tutorias" Foreground="Black" VerticalAlignment="Center"/>
<TextBlock TextWrapping="Wrap" Text="{Binding option}" FontSize="24" FontFamily="Resources/Fonts/Programa Tutorias Bold.ttf#Programa Tutorias" Width="253" Foreground="Black" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</StackPanel>
<Grid VerticalAlignment="Center" Margin="5,10,5,0" HorizontalAlignment="Center">
<Image Source="{Binding imageURI}" />
</Grid>
</StackPanel>
</Grid>
<Grid x:Name="gridPareoColorEjercicio" Height="100" Width="350" Background="#FFF0F0F0" Margin="-11,0,0,0">
<StackPanel Margin="0" Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
<StackPanel Margin="0,10,15,0" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="{Binding letter}" FontSize="24" FontFamily="Resources/Fonts/Programa Tutorias Bold.ttf#Programa Tutorias" Foreground="Black" VerticalAlignment="Center"/>
<TextBlock TextWrapping="Wrap" Text="{Binding option}" FontSize="24" FontFamily="Resources/Fonts/Programa Tutorias Bold.ttf#Programa Tutorias" Width="253" Foreground="Black" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</StackPanel>
<Grid VerticalAlignment="Center" Margin="5,10,5,0" HorizontalAlignment="Center">
<Image Source="{Binding imageURI}" />
</Grid>
</StackPanel>
</Grid>
</DataTemplate>
A data template can only have one visual tree but you are defining two grids. If you want the two grids to appear next to each other or one below the other, wrap them in a StackPanel and set the property Orientation accordingly.
<DataTemplate>
<StackPanel Orientation="Vertical">
<Grid>[...]</Grid>
<Grid>[...]</Grid>
</StackPanel>
</DataTemplate>

is there any limit for items in a listbox for windows phone 8?

i have a listbox with around 150 items in it. the problem is that it is not taking any events. other listboxes have less than 90 items and they are working fine.
is there any limit or something which is preventing event handeling??
<ScrollViewer HorizontalAlignment="Left" Height="170" Margin="0,421,0,0" VerticalAlignment="Top" Width="480" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
<ListBox Name="thirdList" Tap="firstList_SelectionChanged_1" Height="170" ScrollViewer.VerticalScrollBarVisibility="Disabled" >
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener DragCompleted="GestureListener_DragCompleted"></toolkit:GestureListener>
</toolkit:GestureService.GestureListener>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Disabled" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Padding" Value="0 0 0 0 " />
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Height="170" Width="150" Background="Transparent">
<!--Replace rectangle with image-->
<Image Source="{Binding image}" Stretch="UniformToFill" Margin="0,20" HorizontalAlignment="Left" VerticalAlignment="Bottom" Height="140" Width="119"></Image>
<Grid Margin="0,-335,0,0" HorizontalAlignment="Center" Background="Transparent" Height="30">
<TextBlock TextAlignment="Center" Text="{Binding brandName}" HorizontalAlignment="Center" FontSize="15" TextWrapping="NoWrap" Foreground="#FFAA1F17" />
</Grid>
<StackPanel Width="165" Margin="0,-65,0,0" Background="Transparent">
<Grid HorizontalAlignment="Stretch" Height="55" Background="#FF9B9A9A">
<StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Transparent">
<TextBlock TextAlignment="Center" Text="{Binding productName}" TextWrapping="Wrap" HorizontalAlignment="Center" Foreground="White" FontSize="15" />
<TextBlock TextAlignment="Center" Text="{Binding price}" TextWrapping="Wrap" HorizontalAlignment="Center" Foreground="#99FFFFFF" FontSize="15" />
</StackPanel>
</Grid>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
vjamit please consider using LongListSelector for Windows Phone 8 applications and not the old ListBox.
I have tested LLS with more than 5k items and it loads and plays just fine.
Also there is no need at all to wrap LLS in a ScrollViewer. Check below example:
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="LLSTemplate">
<Grid Tap="firstList_SelectionChanged_1">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener DragCompleted="GestureListener_DragCompleted"></toolkit:GestureListener>
</toolkit:GestureService.GestureListener>
<StackPanel Orientation="Vertical" Height="170" Width="150" Background="Transparent">
<!--Replace rectangle with image-->
<Image Source="{Binding image}" Stretch="UniformToFill" Margin="0,20" HorizontalAlignment="Left" VerticalAlignment="Bottom" Height="140" Width="119"></Image>
<Grid Margin="0,-335,0,0" HorizontalAlignment="Center" Background="Transparent" Height="30">
<TextBlock TextAlignment="Center" Text="{Binding brandName}" HorizontalAlignment="Center" FontSize="15" TextWrapping="NoWrap" Foreground="#FFAA1F17" />
</Grid>
<StackPanel Width="165" Margin="0,-65,0,0" Background="Transparent">
<Grid HorizontalAlignment="Stretch" Height="55" Background="#FF9B9A9A">
<StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Transparent">
<TextBlock TextAlignment="Center" Text="{Binding productName}" TextWrapping="Wrap" HorizontalAlignment="Center" Foreground="White" FontSize="15" />
<TextBlock TextAlignment="Center" Text="{Binding price}" TextWrapping="Wrap" HorizontalAlignment="Center" Foreground="#99FFFFFF" FontSize="15" />
</StackPanel>
</Grid>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<phone:LongListSelector x:Name="thirdList" Height="170" ItemTemplate="{StaticResource LLSTemplate}"/>
</Grid>
Let me know if the above works.
EDITED:
Try applying the following changes on the ScrollViewer: HorizontalScrollBarVisibility="Disabled". Tested with 500+ and it works. Seems like a "bug".

outofmemory on changing opacity of grid

I have 5 horizontal listboxes with images and text in them.. the text is shown in textblock inside stackpanel(background as grey).. now if i change the background to black and opacity to 0.3, I start getting outofmemory.. what could be wrong?? here's my listbox :
<ScrollViewer x:Name="scroll1" HorizontalAlignment="Left" Height="200" Margin="0,27,0,0" VerticalAlignment="Top" Width="480" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled" >
<ListBox Name="firstList" Height="200" ScrollViewer.VerticalScrollBarVisibility="Disabled" Tap="firstList_SelectionChanged_1" >
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener DragCompleted="GestureListener_DragCompleted"></toolkit:GestureListener>
</toolkit:GestureService.GestureListener>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Disabled" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Padding" Value="0 0 0 0 " />
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Height="200" Width="150" Background="Transparent">
<!--Replace rectangle with image-->
<Image Source="{Binding image}" Margin="0,20" HorizontalAlignment="Left" VerticalAlignment="Bottom" Stretch="UniformToFill" Height="140" Width="119"></Image>
<Grid Margin="0,-335,0,0" HorizontalAlignment="Center" Background="Transparent" Height="30">
<TextBlock Text="{Binding brandName}" HorizontalAlignment="Center" FontSize="15" TextWrapping="NoWrap" Foreground="#FFAA1F17" />
</Grid>
<Grid Margin="70,-240,-10,0" Width="50" Height="50" Background="Transparent">
<!--<TextBlock Text="Discount" Foreground="White" FontSize="15" Margin="15,0,5,0"/>-->
<Image Source="{Binding imageSource}" Width="50" Height="50" ></Image>
<TextBlock Text="{Binding discountPercentage}" TextWrapping="NoWrap" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontSize="15" />
</Grid>
<StackPanel Width="150" Margin="0,-35,0,0" Background="Transparent">
<Grid HorizontalAlignment="Stretch" Height="55" Background="#FF9B9A9A">
<!--<TextBlock Text="Rs" Foreground="White" FontSize="20" Margin="30,0,5,0"/>-->
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Transparent">
<TextBlock Text="{Binding productName}" TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="#99FFFFFF" FontSize="15" />
</StackPanel>
</Grid>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
I have tried this and got outofmemoryerror:
<StackPanel Orientation="Vertical" Height="200" Width="150" Background="Transparent">
<!--Replace rectangle with image-->
<Image Source="{Binding image}" Margin="0,20" HorizontalAlignment="Left" VerticalAlignment="Bottom" Stretch="UniformToFill" Height="140" Width="119"></Image>
<Grid Margin="0,-335,0,0" HorizontalAlignment="Center" Background="Transparent" Height="30">
<TextBlock Text="{Binding brandName}" HorizontalAlignment="Center" FontSize="15" TextWrapping="NoWrap" Foreground="#FFAA1F17" />
</Grid>
<Grid Margin="70,-240,-10,0" Width="50" Height="50" Background="Transparent">
<!--<TextBlock Text="Discount" Foreground="White" FontSize="15" Margin="15,0,5,0"/>-->
<Image Source="{Binding imageSource}" Width="50" Height="50" ></Image>
<TextBlock Text="{Binding discountPercentage}" TextWrapping="NoWrap" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontSize="15" />
</Grid>
<StackPanel Width="150" Margin="0,-35,0,0" Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Black" Opacity="0.3">
<TextBlock Text="{Binding productName}" TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="#99FFFFFF" FontSize="15" />
</StackPanel>
</StackPanel>
self resolved. By replacing grid/stackpanel with a textblock on transparent image.

the property content is set more than once

I am getting the following error with my code shown below.
Error:
The property 'Content' is set more than once
Code:
<controls:PanoramaItem Header="headlines">
<TextBlock Text="{Binding Tones}" />
<ListBox Margin="0,0,-12,0" ItemsSource="{Binding Tones}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,0,0,17">
<Image Source="{Binding ImageUrl}" Height="75" Width="100"
Margin="12,10,9,0" VerticalAlignment="Top"/>
<StackPanel Width="311">
<TextBlock Text="{Binding Title}" TextWrapping="Wrap"
Style="{StaticResource PhoneTextLargeStyle}" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</controls:PanoramaItem>
A PanoramaItem can only have one child control but you currently have a TextBlock and a ListBox. To fix this, simply add another parent control to hold the TextBlock and ListBox (such as a StackPanel or a Grid). For example:
<controls:PanoramaItem Header="headlines">
<grid>
<TextBlock Text="{Binding Tones}" />
<!--Double line list with image placeholder and text wrapping-->
<ListBox Margin="0,0,-12,0" ItemsSource="{Binding Tones}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,0,0,17">
<!--Replace rectangle with image-->
<Image Source="{Binding ImageUrl}" Height="75" Width="100" Margin="12,10,9,0" VerticalAlignment="Top"/>
<!--<Rectangle Height="100" Width="100" Fill="#FFE5001b" Margin="12,0,9,0"/>-->
<StackPanel Width="311">
<TextBlock Text="{Binding Title}" TextWrapping="Wrap" Style="{StaticResource PhoneTextLargeStyle}"/>
<!--<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>-->
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</grid>
</controls:PanoramaItem>