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.

Calling MainWindow method from a UserControl class

I'm working on a C# WPF application where the MainWindow XAML defines a series of menu tabs.
I have a UserControl class for license settings that needs to toggle the visibility of these tabs based on certain activities.
My first attempt was to create a public method in MainWindow and call it from the UserControl class.
Window mainWindow = Application.Current.MainWindow;
mainWindow.myPublicMethod();
This doesn't work because my method isn't defined in the Window class.
I then tried to cast it to a MainWindow object:
MainWindow mainWindow = (MainWindow)Application.Current.MainWindow;
mainWindow.myPublicMethod();
This doesn't work because it cannot find the type MainWindow since it is in a different project.
I tried to add a reference to that project but it complains about a circular dependency.
Is there a recommended way of accomplishing what I need to do?
Update
UserControl class code
public event EventHandler licenseActivated;
protected void onLicenseActivated()
{
var handler = licenseActivated;
if (handler != null)
{
handler(this, EventArgs.Empty);
}
}
MainWindow.xaml code
Added event at the bottom right before the closing tag
<telerik:RadTabControl Grid.Row="0" Margin="1,1,1,0" Background="White" ItemContainerStyle="{StaticResource ShellTabItemStyleMain}"
x:Name="ContentGrid" HeaderBackground="{StaticResource HeaderBackground1}" SelectionChanged="ContentGrid_SelectionChanged"
BorderThickness="0">
<telerik:RadTabItem Name="ModelCatalogTab" MouseDown="ModelCatalogTab_MouseDown" VerticalAlignment="Center" >
<telerik:RadTabItem.Header>
<StackPanel Background="Transparent" Orientation="Horizontal" Margin="0">
<Image Width="16" Height="16" Margin="0,0,0,4" x:Name="MyModelsImage" Source="{StaticResource MyImgModelsBlue}" />
<TextBlock Margin="3,0,0,4">My Models</TextBlock>
</StackPanel>
</telerik:RadTabItem.Header>
<uc:ucwpfCatalog x:Name="ModelCatalog" Width="Auto" Height="Auto" HorizontalAlignment="Left" Foreground="{StaticResource defaultForeground}"/>
</telerik:RadTabItem>
<telerik:RadTabItem Name="DataSetTab" IsEnabled="False" Foreground="{StaticResource DarkBrush}" MouseDown="DataSetTab_MouseDown" VerticalAlignment="Center">
<telerik:RadTabItem.Header>
<StackPanel Background="Transparent" Orientation="Horizontal" Margin="0">
<Image Width="16" Height="16" Margin="0,0,0,4" x:Name="MyDataSetImage" Source="{StaticResource MyImgDataSetGray}" />
<TextBlock Margin="3,0,0,4">Data</TextBlock>
</StackPanel>
</telerik:RadTabItem.Header>
</telerik:RadTabItem>
<telerik:RadTabItem Name="VariablesTab" IsEnabled="False" Foreground="{StaticResource DarkBrush}" MouseDown="VariablesTab_MouseDown" VerticalAlignment="Center" >
<telerik:RadTabItem.Header>
<StackPanel Background="Transparent" Orientation="Horizontal" Margin="0">
<Image Width="16" Height="16" Margin="0,0,0,4" x:Name="MyVariablesImage" Source="{StaticResource MyImgVariablesGray}" />
<TextBlock Margin="3,0,0,4">Variables</TextBlock>
</StackPanel>
</telerik:RadTabItem.Header>
</telerik:RadTabItem>
<telerik:RadTabItem Name="ModelBuildingTab" IsEnabled="False" Foreground="{StaticResource DarkBrush}" MouseDown="ModelBuildingTab_MouseDown" VerticalAlignment="Center">
<telerik:RadTabItem.Header>
<StackPanel Background="Transparent" Orientation="Horizontal" Margin="0">
<Image Width="16" Height="16" Margin="0,0,0,4" x:Name="MyModelBuildImage" Source="{StaticResource MyImgModelingGray}" />
<TextBlock Margin="3,0,0,4">Predictive Modeling</TextBlock>
</StackPanel>
</telerik:RadTabItem.Header>
<ucmb:ucwpfModelBuilding x:Name="ModelBuilding" Margin="-10,-5,-12,-12" Width="Auto" Height="Auto" Foreground="{StaticResource defaultForeground}"/>
</telerik:RadTabItem>
<telerik:RadTabItem Name="ClusteringTab" IsEnabled="False" Foreground="{StaticResource DarkBrush}" MouseDown="ClusteringTab_MouseDown" VerticalAlignment="Center">
<telerik:RadTabItem.Header>
<StackPanel Background="Transparent" Orientation="Horizontal" Margin="0">
<Image Width="16" Height="16" Margin="0,0,0,4" x:Name="MyClusteringImage" Source="{StaticResource MyImgClustersGray}" />
<TextBlock Margin="3,0,0,4">Clustering</TextBlock>
</StackPanel>
</telerik:RadTabItem.Header>
</telerik:RadTabItem>
<telerik:RadTabItem Name="LogsViewerTab" IsEnabled="False" Foreground="{StaticResource DarkBrush}" MouseDown="LogsViewerTab_MouseDown" VerticalAlignment="Center">
<telerik:RadTabItem.Header>
<StackPanel Background="Transparent" Orientation="Horizontal" Margin="0">
<Image Width="16" Height="16" Margin="0,0,0,4" x:Name="MyLogsImage" Source="{StaticResource MyImgLogsGray}" />
<TextBlock Margin="3,0,0,4">Logs</TextBlock>
</StackPanel>
</telerik:RadTabItem.Header>
</telerik:RadTabItem>
<telerik:RadTabItem Name="AppSettingsTab" MouseDown="AppSettingsTab_MouseDown" VerticalAlignment="Center">
<telerik:RadTabItem.Header>
<StackPanel Background="Transparent" Orientation="Horizontal" Margin="0">
<Image Width="16" Height="16" Margin="0,0,0,4" x:Name="MyOptionsImage" Source="{StaticResource MyImgSettingsBlue}" />
<TextBlock Margin="3,0,0,4">Settings</TextBlock>
</StackPanel>
</telerik:RadTabItem.Header>
</telerik:RadTabItem>
<uc:ucwpfAppOptions licenseActivated="AppOptions_LicenseActivated" />
</telerik:RadTabControl>
MainWindow.xaml.cs
private void AppOptions_LicenseActivated(object sender, EventArgs e)
{
enableMenuTab(ModelCatalogTab);
}

This is a good use case for an event.
Using an event allows any parent to use this usercontrol for its own purposes, not just your particular MainWindow class. You can use the usercontrol in other applications, or elsewhere in this application. We call this "loose coupling".
UserControl1.xaml.cs
public event EventHandler ThingHappened;
protected void OnThingHappened()
{
var handler = ThingHappened;
if (handler != null)
{
handler(this, EventArgs.Empty);
}
}
public void SomeRandomMethod()
{
DoStuff();
OnThingHappened();
DoOtherStuff();
}
MainWindow.xaml
<myns:UserControl1 ThingHappened="UserControl1_ThingHappened" />
MainWindow.xaml.cs
private void UserControl1_ThingHappened(object sender, EventArgs e)
{
myPublicMethod();
}

How to use an already bound key in the code behind?

I want to use my Tab key to validate the value inserted into a textbox. I also want my Tab key to move on to the next textbox if the validation went well.
So I have my XAML file:
<StackPanel FocusManager.FocusedElement="{Binding ElementName=DVM_Positive_ReadOut}" Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center" Height="400" Width="602" >
<StackPanel Orientation="Horizontal" Margin="5" Height="80">
<Label HorizontalContentAlignment="Left" VerticalAlignment="Center" Padding="5" FontSize="25" Content="DVM Positive Readout" Width="290"/>
<TextBox Style="{StaticResource CodeDigit}" x:Name="DVM_Positive_ReadOut" Width="300" Height="50" IsReadOnly="{Binding Positive_ReadOnly}" Text="{Binding DVM_Pos, UpdateSourceTrigger=PropertyChanged}">
<TextBox.InputBindings>
<KeyBinding Key="Tab" Command="{Binding ValidateReadOnly}" CommandParameter="{Binding ElementName=DVM_Positive_ReadOut}"/>
</TextBox.InputBindings>
</TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="5" Height="80">
<Label HorizontalContentAlignment="Left" VerticalAlignment="Center" Padding="5" FontSize="25" Content="DVM Negative Readout" Width="290" />
<TextBox Style="{StaticResource CodeDigit}" x:Name="DVM_Negavtive_ReadOut" Width="300" Height="50" IsReadOnly="{Binding Negative_ReadOnly}" Text="{Binding DVM_Neg, UpdateSourceTrigger=PropertyChanged}">
<TextBox.InputBindings>
<KeyBinding Key="Tab" Command="{Binding ValidateReadOnly}" CommandParameter="{Binding ElementName=DVM_Negavtive_ReadOut}"/>
</TextBox.InputBindings>
</TextBox>
</StackPanel>
<StackPanel >
<Button Content="Enter" FontSize="25" Width="300" Height="50" Margin="50">
<Button.InputBindings>
<KeyBinding Key="Return" Command="{Binding ValidateInsert}" CommandParameter="{Binding ElementName=EnterButton}"/>
</Button.InputBindings>
</Button>
<Label HorizontalContentAlignment="Center" VerticalAlignment="Center" Padding="5" FontSize="25" Content="{Binding TestGroupLabel}" Width="290" />
</StackPanel>
</StackPanel>
As you can see at line 7, I bound the Tab key to ValidateReadOnly which is used in my ViewModel.
Now I also want to use my Tab key to switch between textboxes. So I wrote in my code behind file:
private void Window_KeyDown(object sender, KeyEventArgs e)
{
if (e.Key == Key.Space)
{
e.Handled = true;
return;
}
if (e.Key == Key.Tab)
{
TraversalRequest tRequest = new TraversalRequest(FocusNavigationDirection.Next);
UIElement keyboardFocus = Keyboard.FocusedElement as UIElement;
if (keyboardFocus != null)
{
keyboardFocus.MoveFocus(tRequest);
}
e.Handled = true;
}
}
The problem here is that I cannot use my Tab key for the code in my code-behind file because I have bound the Tab key to ValidateReadOnly in my ViewModel.
Yes, I could write the focus code from my code-behind file in my ViewModel with the validation code, but I found it hard to work with focus in the ViewModel.

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.

ManipulationCompleted event is not firing on Button

In my Windows Phone 8.1 Universal Application, I have a ListView with a button in the ItemTemplate, and I need to see when that button's ManipulationStarted and ManipulationCompleted events are fired. Currently ManipulationStarted works fine, but ManipulationCompleted does not. Could someone help explain why?
SnapsPage.xaml
<Grid Grid.Row="0" Background="#88686868">
<Grid.RowDefinitions>
<RowDefinition Height="130" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Vertical" Margin="20,0,0,0">
<TextBlock Text="{Binding Path=Manager.Account.Username, FallbackValue='loading...'}" Margin="0,12,0,0" Style="{ThemeResource HeaderTextBlockStyle}"/>
<TextBlock x:Uid="Snaps" Text="SNAPS" Style="{ThemeResource TitleTextBlockStyle}" Typography.Capitals="SmallCaps"/>
</StackPanel>
<ScrollViewer x:Name="ScrollViewer" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled"
Padding="0,0,0,20" Grid.Row="1" HorizontalContentAlignment="Stretch">
<ListView HorizontalContentAlignment="Stretch"
ItemsSource="{Binding Path=Manager.Account.Snaps}">
<ListView.ItemTemplate>
<DataTemplate>
<Button x:Name="ButtonSnap" Style="{StaticResource BasicEmptyButtonStyle}"
ManipulationStarting="ButtonSnap_OnManipulationStarting"
ManipulationCompleted="ButtonSnap_OnManipulationCompleted"
ManipulationMode="All"
Command="{Binding ElementName=ItemsControl, Path=DataContext.TryDownloadMediaCommand}"
CommandParameter="{Binding}">
<!-- Content Here -->
</Button>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel HorizontalAlignment="Stretch"></VirtualizingStackPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</ScrollViewer>
</Grid>
<Grid Grid.Row="0" x:Name="MediaGrid" Background="#FF000000" IsHitTestVisible="False">
<Image x:Name="MediaImage" IsHitTestVisible="False"/>
<Grid Width="45" Height="45" Background="#99000000"
VerticalAlignment="Top" HorizontalAlignment="Right" Margin="25">
<TextBlock Text="10" VerticalAlignment="Center" HorizontalAlignment="Center" FontFamily="Segoe WP Semibold" FontSize="24" />
</Grid>
</Grid>
SnapsPage.cs
private void ButtonSnap_OnManipulationStarting(object sender, ManipulationStartingRoutedEventArgs e)
{
Debug.WriteLine("ButtonSnap_OnManipulationStarting");
var button = sender as Button;
if (button == null) return;
var snap = button.DataContext as Snap;
if (snap == null) return;
_relevantSnap = snap;
_isFingerDown = true;
_scrollYIndex = ScrollViewer.VerticalOffset;
_holdingTimer.Start();
}
private void ButtonSnap_OnManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
{
Debug.WriteLine("ButtonSnap_OnManipulationCompleted");
_isFingerDown = false;
if (_isMediaOpen)
DisposeMediaTidily();
}

Note: I tested with Windows Phone 8.1 XAML App (not Silverlight)
The Button has a ManipulationMode of System which, according to the docs, means that you should not get manipulation events.
An element must have a ManipulationMode value other than None or System to be a manipulation event source