We Keep Coding

Getting selected item in ListView without selecting an Item on UI

I'm working on a WPF application where I've made a ListView on UI which is two-way binding enabled. This WPF application is being developed for a windows 10 based smartphone. So whenever a user taps an item in the list whose data source is data-binded to back data collection, I've to do some operation for that item in code behind.
Now the problem is, I always receive a null object from the below function whenever the user taps on the item.
CartItem selectedItem = (CartItem)lv_CartItems.SelectedItem;
I only get a filled item object when the user actually selects an item by clicking on ListViewItem rather than tapping on it.
I want to get the selected item when the user taps on it. Is there any workaround available in WPF this problem? I've stuck here
My ListViewItem template looks like this.
<ListView Name="lv_CartItems" Loaded="lv_CartItems_Loaded"
HorizontalAlignment="Center" ScrollViewer.CanContentScroll="False"
ScrollViewer.VerticalScrollBarVisibility="Visible"
Width="250" Height="230" SelectionMode="Single"
>
<ListView.ItemTemplate>
<DataTemplate>
<Viewbox>
<Grid Width="230" Height="110" >
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width=".1*" />
<ColumnDefinition />
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition Width=".5*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border BorderBrush="LightGray" BorderThickness="1"
Grid.Row="0" Grid.Column="0"
Grid.ColumnSpan="6" Grid.RowSpan="3" >
</Border>
<Viewbox Grid.Row="0" >
<Image Name="img_ItemImage"
Source="{Binding Image, Mode=TwoWay }"
Width="20" Height=" 25" />
</Viewbox>
<Viewbox Grid.Column="2" Grid.ColumnSpan="3" VerticalAlignment="Top" >
<TextBlock Name="lbl_ItemName" TextWrapping="Wrap" Width="180" Foreground="Gray"
Text="{Binding Name , Mode=TwoWay }" >
</TextBlock>
</Viewbox>
<Viewbox Grid.Row="1" Margin="10,0" VerticalAlignment="Top" >
<TextBlock Foreground="Gray" >Qty:</TextBlock>
</Viewbox>
<Viewbox Grid.Row="2" Margin="0,0" VerticalAlignment="Top" >
<StackPanel Orientation="Horizontal" >
<Button Name="btn_Minus" FontWeight="ExtraBold" Tag="{Binding SKU_No,Mode=TwoWay}" Padding="0" Width="12"
Resources="{StaticResource cartitembutton}" Click="btn_Minus_Click" >
<Image Source="/Resources\Icons\minus.png" ></Image>
</Button>
<Border BorderThickness="1" Margin="2,0" Width="13" CornerRadius="2" BorderBrush="LightGray" >
<TextBlock Name="lbl_Quantity" FontWeight="Bold" Foreground="Gray"
HorizontalAlignment="Center" VerticalAlignment="Center"
Text="{Binding Quantity , Mode=TwoWay }" >
</TextBlock>
</Border>
<Button Name="btn_Increment" FontWeight="ExtraBold" Width="12"
Resources="{StaticResource cartitembutton}" Tag="{Binding SKU_No,Mode=TwoWay}"
Padding="0"
Click="btn_Increment_Click">
<Image Source="/Resources\Icons\union_10.png" ></Image>
</Button>
</StackPanel>
</Viewbox>
<Viewbox Grid.Row="1" Grid.Column="2" Margin="5,0"
HorizontalAlignment="Left" Grid.ColumnSpan="3" >
<TextBlock Name="lbl_Price" FontWeight="DemiBold"
Text="{Binding Price , Mode=TwoWay}" ></TextBlock>
</Viewbox>
<Viewbox Grid.Row="2" Grid.Column="2" Grid.ColumnSpan="3"
VerticalAlignment="Top" Margin="0,0" >
<TextBlock Name="lbl_Appearence"
Text="{Binding Appearance , Mode=TwoWay }"
TextWrapping="Wrap" Foreground="Gray" Width="210" >
</TextBlock>
</Viewbox>
<Viewbox Grid.Column="5" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="2,2"
>
<Button Name="btn_DeleteItem"
Click="btn_DeleteItem_Click"
Resources="{StaticResource cartitembutton}" >
<Image Source="/Resources/Icons/delete.png" ></Image>
</Button>
</Viewbox>
</Grid>
</Viewbox>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
This is how a listVeiw looks like.

You don't actually want the selected item, you want to know which item contained the button that was clicked- whether that item is selected or not.
You can do this with events, but the more "correct" way to do it in WPF is with commands.
Commands are a pattern which separate the logic of an action (e.g. deleting an item) from the visual component that triggers the action (e.g. the button the user clicks). A command includes a parameter, which you can use to specify which item the command is being executed on. There are a couple different types on commands in WPF, but I'll be explaining using RoutedCommand.
In your case you'd first declare your command(s) in your Window:
public static readonly RoutedCommand DeleteItemCommand =
new RoutedCommand("DeleteItem", typeof(MainWindow));
private void OnCanExecuteDeleteItem(object sender , CanExecuteRoutedEventArgs e)
{
e.CanExecute = e.Parameter != null;
}
private void OnExecuteDeleteItem(object sender, ExecutedRoutedEventArgs e)
{
SomeType item = (SomeType)e.Parameter;
//Actually delete the item
}
And you'd add a CommandBinding to your Window which links the command to the methods which handle it:
<Window.CommandBindings>
<CommandBinding Command="local:MainWindow.DeleteItemCommand" CanExecute="OnCanExecuteDeleteItem" Executed="OnExecuteDeleteItem"/>
</Window.CommandBindings>
And finally, to link your delete Button to the command:
<Button Name="btn_DeleteItem" Resources="{StaticResource cartitembutton}" Command="local:MainWindow.DeleteItemCommand" CommandParameter="{Binding}">
<Image Source="/Resources/Icons/delete.png"/>
</Button>
CommandParameter="{Binding}" works because your Button is inside a DataTemplate, so its DataContext will be the item that is being displayed. This lets you check e.Parameter in your routed event methods to see which item is being interacted with.

WPF listview items fires unlimited MouseEnter and MouseLeave events

I have list view with some items in it, an image with title and description.
I have to implement a functionality to show an hover with an image when user mouseenter in the area of image with in the list item.
Ever thing is working fine but have one problem.
Every time when i hover over any image, hovered image causing blinking underneath there will be unlimited calls of mouseenter and mouseleave events.
I did googling and find SCOTT HANSELMAN's blog post but nothing works for me.
<ListView ItemsSource="{Binding Path=CurrentSlideItems}" Name="listSlides" SelectionChanged="listSlides_SelectionChanged" KeyDown="listSlides_KeyDown" Padding="0" SelectionMode="Multiple" PreviewMouseDoubleClick="listSlides_PreviewMouseDoubleClick" Grid.ColumnSpan="2">
<ListView.ItemTemplate>
<DataTemplate>
<Grid MaxWidth="{Binding Path=ActualWidth,ElementName=listSlides}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.4*"/>
<ColumnDefinition Width="0.6*"/>
</Grid.ColumnDefinitions>
<Border Grid.Column="0" BorderBrush="Black" BorderThickness="1,1,1,1" Margin="0,2">
<Image Source="{Binding Path=Image}" MaxWidth="150" Name="image1" Stretch="Fill" Margin="0" MouseEnter="image1_MouseEnter" MouseLeave="image1_MouseLeave">
</Image>
</Border>
<StackPanel Orientation="Vertical" Grid.Column="1">
<TextBlock FontWeight="Bold" Text="{Binding Path=Title}" Margin="5,4,2,2" TextWrapping="Wrap" TextTrimming="WordEllipsis"/>
<TextBlock Text="{Binding Path=Description}" Margin="5,2,2,2" TextWrapping="Wrap" MaxHeight="80" TextTrimming="CharacterEllipsis" />
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Edit: with events
private void image1_MouseEnter(object sender, MouseEventArgs e)
{
var srcImg = e.Source as System.Windows.Controls.Image;
showPopup(srcImg);
}
private void image1_MouseLeave(object sender, MouseEventArgs e)
{
var pop = (Popup)this.FindResource("popup");
if (!pop.IsMouseCaptured)
{
if (!popupFlag)
{
pop.IsOpen = false;
}
}
}

How to use a Popup binded to a ToggleButton inside a ListView in xaml wpf?

I want to make a list of ToggleButtons. Each of them is binded to a popup.
I had a problem with that, so I tried to put everything inside a StackPanel.
But, now, when the app is running, it shows an empty space (for the Popup) right after the ToggleButton. What can I do to solve that?
I've just added two images:
The first one is when the page is being uploaded.
The second one is when I scroll down the page.
<ListView x:Name="ListOfRecipes" HorizontalAlignment="Center" VerticalAlignment="Top" ItemsSource="{Binding}" Grid.Row="1" Margin="25,0.333,25,35" ScrollViewer.VerticalScrollMode="Enabled" Grid.RowSpan="5" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<ToggleButton x:Name="RecipeButton" Grid.Row="1" BorderBrush="#FF65C365" VerticalAlignment="Center" HorizontalAlignment="Center" Click="Button_Click" Height="150" Width="328" >
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" Height="128" Width="328">
<Image Source="{Binding Path=ImageUri}" Height="128" Width="128" Margin="0,6,0,-5.667" />
<StackPanel Orientation="Vertical" HorizontalAlignment="Left" VerticalAlignment="Top" Height="128" Width="192">
<TextBlock Height="25" Width="190" Foreground="#FF6FDC13" Text="{Binding Name}" VerticalAlignment="Top" />
<Image Name="YesOrNoImage" Source="{Binding Path=YesOrNoImage}" Width="102" Height="102" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
</StackPanel>
</StackPanel>
</ToggleButton>
<Popup IsOpen="{Binding IsChecked, ElementName=RecipeButton, Mode=TwoWay}" Height="514" Width="328" VerticalAlignment="Center" Name="PopupOne" Grid.Row="1" Grid.RowSpan="4" IsLightDismissEnabled="True" IsHoldingEnabled="False" ScrollViewer.VerticalScrollMode="Enabled" >
<Border BorderBrush="#FF65C365" BorderThickness="1" Background="White" Height="514" Width="328">
<StackPanel Orientation="Vertical" ScrollViewer.VerticalScrollMode="Enabled">
<Image Source="{Binding Path=ImageUri}" Height="328" Width="328" />
<TextBlock Foreground="#FF6FDC13" Text="{Binding Name}" HorizontalAlignment="Left" FontSize="28" />
<ScrollViewer VerticalScrollMode="Enabled" >
<TextBlock Foreground="Black" Text="{Binding RecipeText}" HorizontalAlignment="Left" FontSize="18" />
</ScrollViewer>
</StackPanel>
</Border>
</Popup>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

It seems that the issue is caused by the <PopUp Height=514/>
To test it, set the height to 0 to see if it fixes the gap. If so, you can bind the visibility to PopUp.IsOpen using a Visibility converter (I think Blue MVVM has one). Since I'm not very educated on Converters at the moment, I came up with a workaround.
public RecipeButton : INotifyPropertyChanged {
// Need to implement INotifyPropertyChanged logic on IsCheckedVisiblity for UI to be notified of visibility changes
public Visibility IsCheckedVisibility { get; set; }
private bool _IsChecked;
public bool IsChecked {
get { return _IsChecked };
set { _IsChecked = value;
this.IsCheckedVisibility = value == true ? Visiblity.Collapsed : Visiblity.Visible;
}
}
<PopUp Visibility = "{Binding IsCheckedVisibility}"/>
Let me know if that doesn't work and I'll try something else.

Hiding/Showing side panel

I am trying to hide/show a panel on the right side of my screen when a button is clicked, however, it is not working exactly as I intended.
Here are a few pics:
Start
This is what my screen originally looks like at startup.
When I click Resize Grid for the first time, this is what the page looks like:
This is actually what I want to happen. The images have shrunk appropriately so that they can all still be viewed.
Two further clicks of Resize Grid results in the 1st image shown above being re-displayed, followed by this:
Can anyone help me with this so that this doesn't occur?
Here is my code so far:
XAML
<Window x:Class="VideoManager.MoviePanel"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MoviePanel" Height="1024" Width="1463" WindowStartupLocation="CenterScreen">
<Window.Resources>
<DataTemplate x:Key="ItemTemplate">
<WrapPanel Orientation="Vertical" Width="Auto">
<Image Width="200" Height="300" Stretch="Fill" Source="{Binding Image}"/>
<TextBlock Text="{Binding Name}" HorizontalAlignment="Center"/>
</WrapPanel>
</DataTemplate>
</Window.Resources>
<Grid x:Name="movie_grid" HorizontalAlignment="Left" Width="1463">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="102" />
<RowDefinition />
</Grid.RowDefinitions>
<ListView
Name="MovieListView"
ItemTemplate="{StaticResource ItemTemplate}"
ItemsSource="{Binding Path = movies}" Margin="0,0,0,0" SelectionChanged="MovieListView_SelectionChanged" Grid.Row="1">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="5" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
<TextBlock x:Name="SampleTextBlock" Margin="1228,36,49,43" >
<InlineUIContainer>
<TextBox Height="23" TextWrapping="Wrap" Text="Search" Width="200" TextChanged="TextBox_TextChanged"/>
</InlineUIContainer>
</TextBlock>
<Button Content="Home" HorizontalAlignment="Left" Margin="46,50,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click_Home"/>
<Button Name="collapse" Content="Resize Grid" HorizontalAlignment="Left" Margin="176,50,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
<ListView HorizontalAlignment="Left" Width = "0" Height="872" Grid.Row="1" VerticalAlignment="Top" Name="sidebar" SelectionChanged="sidebar_SelectionChanged">
<ListView.View>
<GridView>
<GridViewColumn>
<TextBlock Text="hello"/>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
</Grid>
C#
private void Button_Click(object sender, RoutedEventArgs e) {
// collapse main grid and show sidebar
if (this.collapse.Name == "collapse")
{
MovieListView.Margin = new System.Windows.Thickness(0,0,280,0);
sidebar.Width = 280;
sidebar.Margin = new System.Windows.Thickness(1183,0,0,0);
this.collapse.Name = "expand";
}
// expand main grid and hide sidebar
else if (this.collapse.Name == "expand")
{
MovieListView.Width = 1463;
MovieListView.Margin = new System.Windows.Thickness(0, 0, 0, 0);
sidebar.Width = 0;
sidebar.Margin = new System.Windows.Thickness(1463, 0, 0, 0);
this.collapse.Name = "collapse";
}
}

just use the expander control (set it to what direction you desire eg left up right or down) and dont forget to set the window size to auto.
example:
WPF Expander Control

Adding content to PivotItem dynamically

I have a page with a Pivot. It´s based on the Visual Studio Template.
<!--Pivot Control-->
<phone:Pivot SelectionChanged="evt_pivot_SelectionChanged">
<phone:Pivot.Title>
<StackPanel HorizontalAlignment="Center">
<!-- <TextBlock Text="MyApp" /> -->
<Image Stretch="None" HorizontalAlignment="Left" Margin="0" MinWidth="50" MaxHeight="50" Source="/mAppData/logo.png"/>
</StackPanel>
</phone:Pivot.Title>
<!--Pivot item one-->
<phone:PivotItem Header="Favoriten">
<!--Double line list with text wrapping-->
<phone:LongListSelector Margin="13,0,0,0" ItemsSource="{Binding Items}">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,25">
<Grid VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Grid.ColumnSpan="2" Text="FELIX ClubRestaurant (Berlin)" TextWrapping="NoWrap" Style="{StaticResource PhoneTextLargeStyle}" VerticalAlignment="Top" Margin="0,0,0,22" />
<Image Grid.Column="0" Width="110" Height="20" Source="/mAppData/stars-3.png" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="0"/>
<TextBlock Grid.Column="1" Text="10 min." TextWrapping="NoWrap" Margin="0" Style="{StaticResource PhoneTextSubtleStyle}" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
</Grid>
<Grid VerticalAlignment="Top" Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Width="100" Height="100" Source="http://img.myserver.net/news-teaser//p189j19861b36c5d1pp012i21grgd.gif"/>
<Image Grid.Column="1" Width="100" Height="100" Source="http://img.myserver.net/news-teaser//p187qrndfcj0la0f12clfkv10ec7.gif"/>
<Image Grid.Column="2" Width="100" Height="100" Source="http://img.myserver.net/news-teaser/005e5d03f058fa8f7bd95f6410dfc6d6.gif"/>
<Image Grid.Column="3" Width="100" Height="100" Source="http://img.myserver.net/news-teaser/3c05cbf76fba7ada5182b4426e55d96b.gif"/>
</Grid>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</phone:PivotItem>
<!--Pivot item two-->
<phone:PivotItem Header="Empfohlen">
</phone:PivotItem>
</phone:Pivot>
I added in CodeBehind the handling for the event SelectionChanged. That works fine. So I can capture by code, when user comes to the second PivotItem.
private async void evt_pivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
int mPivotIndex = Convert.ToInt16(((Pivot)sender).SelectedIndex.ToString());
if (mPivotIndex == 1)
{
// HERE I WANT TO INSERT THE SOLUTION
}
}
Now comes my problem: When user navigates to seconds item, I want to:
request some data from an WebService (this in not the problem)
transform the data (this is not the problem) and
populate the data in a LongListSelector (THIS IS MY PROBLEM PART 1)
In case that an error occures, I want not to display the LongListSelector but a TextBox showing a message (THIS IS MY PROBLEM PART 2)
How can I get my 2 problems get working?

You will need to bind the text/content of your controls in the itemtemplate to the data collection fieldname
Text="{Binding Fieldname}"
http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj207023(v=vs.105).aspx
In your error handling, set the visibility of the Longlistselector to Collapsed. Then you can show another control which displays the textbox
<StackPanel>
<LongListSelector x:Name=”MyListSelector”>
..stuff
</LongListSelector>
<TextBlock x:Name=”MyError” Visibility=”Collapsed”> </TextBlock>
</StackPanel>
Catch (Exception Ex)
{
MyListSelector.Visibility = Visibility.Collapsed
MyError.Visibility = Visibility.Visible
MyError.Text = Ex.Message;
}

you can hide the Longlist selector and add the Textbox with the Error message directly from the code behind. see the code below.
try
{
//make the service call and do your stuff
}
catch(exception ex)
{
MyListSelector.Visibility = Visibility.Collapsed;
var errorTextBox = new TextBox();
errorTextBox.Text = "some Error has occured";
//add all the properties you want to add for textbox such as color,height,fontsiz ect..
//Name your pivotitem control, say pivotitem1
pivotitem1.Content = errorTextBox;
}
hope this helps.
Note: uncompiled code. pardon compilation errors