We Keep Coding

How can I reach image of itemtemplate in code behind?

<ListBox Grid.Row="1" Name="listBox" Background="#2e2e2e" BorderThickness="0" Margin="0,71.8,0,0">
<ListBox.ItemTemplate>
<DataTemplate >
<StackPanel Background="#1f1f1f" Height="150" Width="1169" MouseEnter="listBox_Selected" MouseLeave="listBox_Unselected" MouseLeftButtonDown="StackPanel_MouseLeftButtonDown">
<Image Name="listImg" Source="{Binding image}" Width="120" Height="150" HorizontalAlignment="Left" Stretch="Fill"/>
<TextBlock Foreground="White" Text="{Binding title}" FontSize="19" Margin="132,-140,0,0" HorizontalAlignment="Left"/>
<TextBlock Foreground="#FFABAAAA" Text="{Binding comment}" FontSize="17" Margin="132,-90,0,0" Height="Auto" TextWrapping="Wrap" HorizontalAlignment="Left"/>
<TextBlock Foreground="White" Text="{Binding username}" FontFamily="Poetsen One" FontSize="13" Margin="130,-25,0,0" Height="Auto" HorizontalAlignment="Left"/>
<TextBlock Foreground="CornflowerBlue" Text="{Binding cost}" FontSize="16" Margin="1080,-30,0,0" Height="Auto" HorizontalAlignment="Left"/>
<TextBlock Foreground="White" Text="{Binding id}" FontSize="15" Margin="0,0,0,0" HorizontalAlignment="Left"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I can't reach listImg.
I have to use it when I select the listbox item.
How can I reach it in code above?

Problems Binding with a GridView UWP

I have a Binding page for some bugs and another one for comments in my app. The first one work properly, but the second one don't show anything but the data(21 comments) load successfully.
I've been taking a look to the live Live Property Explorer and the first Grid have those options:
However, the second one have the ItemsSource set as null:
This should not be possible, because those items have the same code just with few changes to make them load different.
Here you have the code:
<Page.Resources>
<DataTemplate x:DataType="data:Book" x:Key="BookDataTemplate">
<StackPanel HorizontalAlignment="Center">
<Image Width="150" Height="150" Source="{x:Bind CoverImage}" />
<StackPanel HorizontalAlignment="center" Orientation="Horizontal">
<TextBlock FontSize="10" Text="{x:Bind DScore}" HorizontalAlignment="Center" Foreground="#FF21C721" />
<TextBlock FontSize="10" Text="{x:Bind DFav}" HorizontalAlignment="Center" Foreground="#FF9C9C9C" />
</StackPanel>
<TextBlock FontSize="16" Text="{x:Bind Title}" HorizontalAlignment="Center" Foreground="White" />
<TextBlock FontSize="10" Text="{x:Bind Author}" HorizontalAlignment="Center" Foreground="#FF9C9C9C" />
<ToolTipService.ToolTip>
<TextBlock Text="{x:Bind DData}"/>
</ToolTipService.ToolTip>
</StackPanel>
</DataTemplate>
</Page.Resources>
<GridView ItemsSource="{x:Bind Books}" AllowDrop="True" IsSwipeEnabled="True" IsItemClickEnabled="True" ItemClick="Content_ItemClick" Name="Content" Margin="0,100,0,40" CanReorderItems="True"
CanDragItems="True"
ItemTemplate="{StaticResource BookDataTemplate}" ReorderMode="Enabled"/>
And the Comments gridview:
<Page.Resources>
<DataTemplate x:DataType="data:Comment" x:Key="CommentDataTemplate">
<StackPanel HorizontalAlignment="Center">
<Grid>
<Rectangle Margin="50, 0, 0, 30" Fill="#FF144772" Height="100" Stroke="Black" Width="500" HorizontalAlignment="Center"/>
<Rectangle Margin="60, 0, 0, 45" Fill="#FF031131" Height="60" Stroke="Black" Width="60" HorizontalAlignment="Left"/>
<Rectangle Margin="140, 0, 0, 25" Fill="#FF103F91" Height="60" Stroke="Black" Width="360" HorizontalAlignment="Left"/>
<Image x:Name="image" HorizontalAlignment="Left" Height="50" Margin="65,18,0,0" VerticalAlignment="Top" Width="50" Source="Assets/profile.png"/>
<StackPanel HorizontalAlignment="center" Orientation="Horizontal">
<TextBlock Margin="0, 70, 400, 0" FontSize="10" Text="{x:Bind Date}" HorizontalAlignment="Center" Foreground="#FF9C9C9C" />
</StackPanel>
<TextBlock Margin="130, 0, 0, 0" FontSize="16" Text="{x:Bind Author}" HorizontalAlignment="Left" Foreground="White" />
<TextBlock Margin="150, 30, 0, 0" FontSize="11" Text="{x:Bind Body}" Width="360" HorizontalAlignment="Left" Foreground="#FF9C9C9C" />
<ToolTipService.ToolTip>
<TextBlock Text="{x:Bind Score}"/>
</ToolTipService.ToolTip>
</Grid>
</StackPanel>
</DataTemplate>
</Page.Resources>
<GridView ItemsSource="{x:Bind Comments}" AllowDrop="True" IsSwipeEnabled="True" IsItemClickEnabled="True" Name="Content" Margin="0,100,0,40" CanReorderItems="True"
CanDragItems="True"
ItemTemplate="{StaticResource CommentDataTemplate}" ReorderMode="Enabled"/>
Can somebody help me identify the problem here please?

In the XAML file of your 2nd page go to "Comments" in ItemsSource and press F12. If you could navigate to definition of Comments means your binding is successful but Comments is not getting populated. If you could not navigate to definition means binding is not working. In that case check if datacontext has been set for that page. Also check how "Comments" is spelled in XAML and in the property.

Why the "Landscape" position does not resize the LongListSelector?

Why when I put the phone in Landscape position, LongListSelectornão resizes?
Following image:
Following my XAML:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0" HorizontalAlignment="Center" VerticalAlignment="Center">
<phone:LongListSelector Name="lstConsPais"
HorizontalAlignment="Left"
VerticalAlignment="Top"
LayoutMode="List"
IsGroupingEnabled="False"
Width="456" SelectionChanged="lstConsPais_SelectionChanged">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<Border BorderBrush="#111" Margin="0, 10, 0, 0" BorderThickness="0,0,0,2">
<StackPanel VerticalAlignment="Center" Orientation="Horizontal">
<Image Height="100" Width="100" Source="{Binding NomeImgBandeira}" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding NomePais}" Style="{StaticResource PhoneTextGroupHeaderStyle}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="15,25,0,0" />
</StackPanel>
</StackPanel>
</Border>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</Grid>
I wanted him to fill the entire screen.
more or less like this:
but I do not want to tamper with the "width", I want "automatic"

how to place a horizontal line after each item in listbox

I am building an application for Windows Phone 7 where i am displaying a few data in listbox. I want to add an image after each item to distinguish it from another. My xaml code is:
<ListBox Name="listBox1" BorderThickness="0" Height="679" VerticalAlignment="Bottom" Margin="12,0,0,-29" Background="White" Grid.Row="1">
<ListBox.ItemTemplate>
<DataTemplate>
<ScrollViewer HorizontalScrollBarVisibility="Disabled" Height="80" Width="400">
<StackPanel Orientation="Horizontal" Margin="0,0,0,0" Background="White" Width="500">
<Image Source="{Binding ImageBind }" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,20,10" Height="100" Width="145" />
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding city_name}" Foreground="Red" FontFamily="Verdana" />
<TextBlock Text=", " Foreground="Red" FontFamily="Verdana" />
<TextBlock Text="{Binding state}" Foreground="Red" FontFamily="Verdana" />
</StackPanel>
<TextBlock Text="{Binding Path=city_description}" TextWrapping="Wrap" Foreground="Black" FontFamily="Verdana"></TextBlock>
<Image Source="Image/index.jpg"/>
</StackPanel>
</StackPanel>
</ScrollViewer>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The index.jpg image is the horizontal line i wanted to add. Please help where to add that image so that i get that image as a separator for each data

Check this:
http://social.msdn.microsoft.com/Forums/vstudio/en-US/e09926c2-5d53-4337-ba76-d1c786ec9ced/listbox-with-horizontal-lineseparator?forum=wpf
1st answer
Try something like this:
<ListBox Name="listBox1" BorderThickness="0" Height="679" VerticalAlignment="Bottom" Margin="12,0,0,-29" Background="White" Grid.Row="1">
<ListBox.ItemTemplate>
<DataTemplate>
<ScrollViewer HorizontalScrollBarVisibility="Disabled" Height="80" Width="400">
<StackPanel Orientation="Horizontal" Margin="0,0,0,0" Background="White" Width="500">
<Image Source="{Binding ImageBind }" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,20,10" Height="100" Width="145" />
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding city_name}" Foreground="Red" FontFamily="Verdana" />
<Separator Width="{Binding ElementName=listBox1, Path=ActualWidth}"/>
<TextBlock Text=", " Foreground="Red" FontFamily="Verdana" />
<Separator Width="{Binding ElementName=listBox1, Path=ActualWidth}"/>
<TextBlock Text="{Binding state}" Foreground="Red" FontFamily="Verdana" />
<Separator Width="{Binding ElementName=listBox1, Path=ActualWidth}"/>
</StackPanel>
<TextBlock Text="{Binding Path=city_description}" TextWrapping="Wrap" Foreground="Black" FontFamily="Verdana"></TextBlock>
<Separator Width="{Binding ElementName=listBox1, Path=ActualWidth}"/>
<Image Source="Image/index.jpg"/>
</StackPanel>
</StackPanel>
</ScrollViewer>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
This will help you ;)

How do I make an image in ListBox DataTemplate clickable?

I'm making a chat client for WP7 in which you can share photos.
We have a setup where a message appears in a little chat box with user's nickname, a StackPanel for an image (if a URL string is provided along with the message), and a StackPanel for the message text.
It'd be great if a user could tap directly on the image to see a larger version. However, I can't get any events to fire.
I've used the approach of changing a button's template to be just an image before (not in a data template though) and it's worked fine. But this DataTemplate (separate file from the full view) is not working.
How can I accomplish this? Is this doable in a ListBox, or am I stuck to the awkward Twitter style of having to select the whole message, then look at a full view of the image?
EDIT
I tried the GestureListener approach, but ran into a problem where it couldn't parse the event handler name and would just throw an exception when I ran the app.
My data templates are in separate XAML files. I assumed there wouldn't be any difference in defining each template in the same file as the PhoneApplicationPage. Is that correct?
<DataTemplate x:Name="LeftMessageTemplate">
<Grid Margin="0,0,0,17" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border Grid.Column="0" BorderThickness="3" BorderBrush="{StaticResource ChatPivotSubBrush}" Margin="0, 3, 9, 0" VerticalAlignment="Top">
<Image Source="{Binding AvatarURL}" Height="60" Width="60" VerticalAlignment="Top"/>
</Border>
<Grid Grid.Column="1" Width="372" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" HorizontalAlignment="Right" Orientation="Horizontal" Background="Transparent">
<Image Source="/my_chatclient;component/Images/chattheirspointercroppedwp7.png" VerticalAlignment="Top" Margin="0, 28, 0, 0" Height="19" Width="13"/>
<StackPanel Background="{StaticResource ChatPivotMainBrush}" Width="Auto" HorizontalAlignment="Left" MinHeight="66" VerticalAlignment="Top" Margin="0, 3, 0, 0" Orientation="Horizontal">
<StackPanel Margin="4, 4, 4, 4">
<Button>
<Button.Template>
<ControlTemplate>
<Image Source="{Binding PictureURLPreview}" VerticalAlignment="Top" MaxWidth="200"/>
</ControlTemplate>
</Button.Template>
<i:EventTrigger EventName="Click">
<GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding ViewPictureCommand, Mode=OneWay}" />
</i:EventTrigger>
</Button>
</StackPanel>
<StackPanel MaxWidth="340" Orientation="Vertical" Margin="12,12,12,12">
<TextBlock FontWeight="Bold" Foreground="{StaticResource ChatDarkerBlueBrush}" Text="{Binding CreatorNicknameLabel}" TextWrapping="NoWrap" Margin="0, 0, 0, 0" FontSize="18" />
<TextBlock MaxWidth="316" Foreground="{StaticResource ChatDarkerBlueBrush}" Text="{Binding Text}" TextWrapping="Wrap" Margin="0,0,0,0" FontSize="16" />
<TextBlock Foreground="{StaticResource ChatDarkerBlueBrush}" FontWeight="Light" Text="{Binding CreatedAtLabel}" TextWrapping="Wrap" Margin="0, 0,0 ,0" FontSize="14" />
</StackPanel>
</StackPanel>
</StackPanel>
</Grid>
</Grid>
</DataTemplate>

If I understood it correct, here is a way to accomplish it. Add the image to a button with an event handler. Something like:
<StackPanel Grid.Column="0" HorizontalAlignment="Right" Orientation="Horizontal" Background="Transparent">
<Button Click="ShowLarger" BorderThickness="0">
<Image Source="/my_chatclient;component/Images/chattheirspointercroppedwp7.png" VerticalAlignment="Top" Margin="0, 28, 0, 0" Height="19" Width="13"/>
</Button>
<StackPanel Background="{StaticResource ChatPivotMainBrush}" Width="Auto" HorizontalAlignment="Left" MinHeight="66" VerticalAlignment="Top" Margin="0, 3, 0, 0" Orientation="Horizontal">
<StackPanel Margin="4, 4, 4, 4">
<Button>
<Button.Template>

While there's not a awful lot of information here, I would recommend you bind a event to the Image itself, rather than using a Button's ContentTemplate for it.
With the Silverlight Toolkit you can simply use their geatureservice, like this:
<Image Source="{Binding PictureURLPreview}" VerticalAlignment="Top" MaxWidth="200">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener>
<i:EventTrigger EventName="Tap">
<GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding ViewPictureCommand, Mode=OneWay}" />
</i:EventTrigger>
</toolkit>
</toolkit:GestureService.GestureListener>
</Image>

Use the Tap-event:
<Image Tap="doYourThing ... />