We Keep Coding

Hover Focus exceeding the ListViewItem width in UWP C#

I have a simple horizontal ListView where it will show trending anime. It is a horizontal ListView. But as in this image, in the One-Piece anime, the hover is present. but due to screenshot, the hover is hidden. when the hovered ListViewItem is focused, it is showing some extra sapces on both sides of the main element, How do I rectify it??
Any Ideas...
My ListView is below:
<ListView ScrollViewer.IsHorizontalRailEnabled="True"
ScrollViewer.HorizontalScrollMode="Enabled"
ScrollViewer.HorizontalScrollBarVisibility="Hidden"
ScrollViewer.VerticalScrollMode="Disabled"
ScrollViewer.IsVerticalRailEnabled="False"
SelectionMode="None"
IsSwipeEnabled="False"
IsItemClickEnabled="True"
x:Name="AnimeTrendingList"
ItemClick="AnimeTrendingList_ItemClick"
UseSystemFocusVisuals="False">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate x:DataType="data:MediaElement">
<Grid
Width="150"
Height="300"
CornerRadius="10">
<Grid.ContextFlyout>
<MenuFlyout>
<MenuFlyoutItem
x:Name="AnimeSaveImage"
Text="Save Image"
Click="AnimeSaveImage_Click"
Tag="{x:Bind CoverImage.ExtraLarge.AbsoluteUri}"/>
<MenuFlyoutItem
x:Name="AnilistUrlCopy"
Text="Copy AniList URL"
Click="AnilistUrlCopy_Click"
Tag="{x:Bind SiteUrl.ToString()}"/>
<MenuFlyoutItem
x:Name="AnilistOpenUrl"
Text="Open in Browser"
Click="AnilistOpenUrl_Click"
Tag="{x:Bind SiteUrl.ToString()}"/>
<MenuFlyoutItem
x:Name="EmbedableBannerSave"
Text="Save Embeddable Image"
Click="EmbedableBannerSave_Click"
Tag="{x:Bind Id.ToString()}"/>
</MenuFlyout>
</Grid.ContextFlyout>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Width="150">
<Image Stretch="UniformToFill">
<Image.Source>
<BitmapImage UriSource="{x:Bind CoverImage.Large.AbsoluteUri}"/>
</Image.Source>
</Image>
<!--<Canvas ToolTipService.ToolTip="Currently Airing">
<Rectangle Canvas.Top="5"
Canvas.Left="5"
Width="25"
Height="25"
Fill="{StaticResource CustomAcrylicInAppLuminosity}"/>
<Ellipse Width="15"
Height="15"
Canvas.Left="10"
Canvas.Top="10"
Fill="LightGreen"/>
</Canvas>-->
</Grid>
<StackPanel
Width="150"
Background="{ThemeResource SystemAltLowColor}"
Grid.Row="1"
BorderThickness="1"
Canvas.ZIndex="2">
<TextBlock Text="{x:Bind Title.UserPreferred}"
TextTrimming="CharacterEllipsis"
FontSize="15"
FontWeight="Bold"
Margin="5, 15, 5, 2"
ToolTipService.ToolTip="{x:Bind Title.UserPreferred}"/>
<TextBlock Text="{x:Bind Studios.Nodes[0].Name}"
FontStyle="Italic"
FontSize="12"
Margin="5, 0, 5, 5"
Foreground="{ThemeResource SystemBaseMediumHighColor}"/>
<TextBlock Text="{x:Bind sys:String.Format(x:Null, '{0} • {1} Episodes', Format, Episodes)}"
FontSize="12"
Margin="5, 2, 5, 5"/>
<Grid Margin="5, 0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0"
Orientation="Horizontal"
Margin="5">
<FontIcon Glyph=""
FontSize="12"
Foreground="Yellow"/>
<TextBlock Text="{x:Bind Trending.ToString()}"
FontSize="12"
Margin="5, 0, 0, 0"
VerticalAlignment="Center"/>
</StackPanel>
<StackPanel Grid.Column="1"
Orientation="Horizontal"
Margin="5"
HorizontalAlignment="Left">
<FontIcon Glyph=""
FontSize="12"
Foreground="Red"/>
<TextBlock Text="{x:Bind Favourites.ToString()}"
FontSize="12"
Margin="5, 0, 0, 0"
VerticalAlignment="Center"/>
</StackPanel>
</Grid>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

Hover Focus exceeding the ListViewItem width in UWP C#
It looks the default ListViewItem background, and it will highlight when point over or point pressed. you could set them as Transparent to disable this behavior. please refer to the following code taht place in the app resource dictionary.
<Application.Resources>
<SolidColorBrush x:Key="ListViewItemBackgroundPointerOver" Color="Transparent" />
<SolidColorBrush x:Key="ListViewItemBackgroundPressed" Color="Transparent" />
</Application.Resources>

UWP: Cannot Implicitly Convert Button to AppBarButton

When I run my C# UWP app in debug mode with Visual Studio it works fine, however after trying to Create an App Package, I get an error during the build:
Cannot implicitly convert type 'Windows.UI.Xaml.Controls.Button' to 'Windows.UI.Xaml.Controls.AppBarButton'. An explicit conversion exists (are you missing a cast?)
I don't actually have any Buttons in the xaml code, they're all AppBarButtons. Can anyone see what I've got wrong? The Xaml is below.
<Page
x:Class="Sheet_Music_Reader.Views.ScoreViewer"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Sheet_Music_Reader.Views"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:muxc="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
mc:Ignorable="d">
<Grid Margin="0,-125,0,0" Background="{ThemeResource AcrylicInAppFillColorDefaultBrush}">
<CommandBar DefaultLabelPosition="Right" Height="42" HorizontalContentAlignment="Left" >
<CommandBar.Content>
<AppBarButton FocusVisualPrimaryThickness="0" FocusVisualSecondaryThickness="0" VerticalAlignment="Top" HorizontalAlignment="Left" Icon="Back" x:Name="BackButton" ToolTipService.ToolTip="Back" Click="BackButton_Click"/>
</CommandBar.Content>
<AppBarSeparator/>
<AppBarElementContainer>
<InkToolbar x:Name="inkToolbar" VerticalAlignment="Center" HorizontalAlignment="Left" Orientation="Horizontal" TargetInkCanvas="{x:Bind inkCanvasA}">
<InkToolbarCustomToggleButton
x:Name="toggleButton"
Click="CustomToggle_Click"
ToolTipService.ToolTip="Touch Writing">
<SymbolIcon Symbol="{x:Bind TouchWritingIcon}"/>
</InkToolbarCustomToggleButton>
</InkToolbar>
</AppBarElementContainer>
<AppBarSeparator/>
<AppBarElementContainer VerticalAlignment="Center">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<TextBlock Margin="0,0,10,0" VerticalAlignment="Center" Padding="10,0,0,0">Go to page:</TextBlock>
<TextBox FocusEngaged="GoToTextBox_FocusEngaged" AllowFocusWhenDisabled="True" AllowFocusOnInteraction="True" x:Name="GoToTextBox" BorderThickness="0" VerticalAlignment="Center" KeyDown="GoToTextBox_KeyDown" InputScope="Number" IsHitTestVisible="True" IsEnabled="True"/>
<AppBarButton Width="40" Height="45" Click="GoToPage" VerticalAlignment="Center" BorderThickness="0" Background="Transparent">🡢</AppBarButton>
</StackPanel>
</AppBarElementContainer>
<AppBarSeparator/>
<AppBarButton Label="Fullscreen" Icon="FullScreen" x:Name="FullscreenButton" ToolTipService.ToolTip="Fullscreen" Click="FullscreenButton_Click"/>
<AppBarSeparator/>
<AppBarButton Label="Bookmarks" Icon="Bookmarks" x:Name="BookMarksButton" ToolTipService.ToolTip="Bookmarks">
<AppBarButton.Flyout>
<Flyout Placement="Bottom">
<StackPanel Margin="0,20,0,0" Background="Transparent">
<StackPanel x:Name="bookmarkstackpanel" Margin="10" Background="Transparent">
<TextBlock x:Name="nobookmarkmessage" Text="You have no bookmarks." />
<StackPanel x:Name="bookmarkstacker" Orientation="Horizontal" Background="Transparent">
<ListView x:Name="bookmarkslist" Margin="0,0,5,0">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ContentPresenter/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
</ListView>
<ListView x:Name="bookmarkslistdeleter" Width="53">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ContentPresenter/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
</ListView>
</StackPanel>
</StackPanel>
<AppBarButton Content="Create Bookmark" Width="140" BorderThickness="1" BorderBrush="gray" Height="50" HorizontalAlignment="Center" Margin="30,0,30,0" FontSize="18" Click="NewBookmarksButton_Click"></AppBarButton>
</StackPanel>
</Flyout>
</AppBarButton.Flyout>
</AppBarButton>
</CommandBar>
<ProgressRing x:Name="LoadingIndicator" Height="100" Width="100"/>
<TextBlock x:Name="LoadingText" Text="Opening PDF" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Margin="0,180,0,0"/>
<TextBlock x:Name="LoadingText2" Text="Large documents may take a moment to open for the first time" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="16" Margin="0,270,0,0"/>
<AppBarButton Width="0" Height="0" x:Name="focusremover"></AppBarButton>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="0,45,0,0" Grid.Row="1" x:Name="DoubleGrid">
<ScrollViewer x:Name="landscapescroller" ZoomMode="Enabled" MinZoomFactor="1" MaxZoomFactor="7" HorizontalScrollBarVisibility="Visible" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
VerticalScrollBarVisibility="Visible">
<Grid x:Name="biggergrid">
<Grid x:Name="landscapeEnclosingGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
</Grid.RowDefinitions>
<Grid Grid.Column="0" Grid.Row="0" Margin="0,0,0,0" x:Name="leftimagegrid">
<Image x:Name="leftimage" VerticalAlignment="Center" Source="/Assets/enScore-logo-grey-large.png" HorizontalAlignment="Right"/>
</Grid>
<Grid Grid.Column="1" Grid.Row="0" Margin="0,0,0,0">
<Image x:Name="rightimage" VerticalAlignment="Center" Source="/Assets/enScore-logo-grey-large.png" HorizontalAlignment="Left"/>
</Grid>
</Grid>
<InkCanvas x:Name="inkCanvasA" />
</Grid>
</ScrollViewer>
</Grid>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" x:Name="SingleImage" Margin="-1000,45,-1000,0" Grid.Row="1">
<ScrollViewer ZoomMode="Enabled" MinZoomFactor="1" MaxZoomFactor="7" HorizontalScrollBarVisibility="Visible" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
VerticalScrollBarVisibility="Visible" Name="singlescroller">
<Grid x:Name="biggergridtwo">
<Grid x:Name="portraitEnclosingGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
</Grid.RowDefinitions>
<Grid Margin="0,0,0,0" Grid.Column="0" Grid.Row="0">
<Image x:Name="SingleImagefield" VerticalAlignment="Center" Source="/Assets/enScore-logo-grey-large.png" HorizontalAlignment="Center"/>
</Grid>
</Grid>
<ScrollViewer MinZoomFactor="2" MaxZoomFactor="2" HorizontalScrollMode="Disabled" ZoomMode="Disabled" VerticalScrollMode="Disabled">
<InkCanvas x:Name="inkCanvasB" Width="4000"/>
</ScrollViewer>
</Grid>
</ScrollViewer>
</Grid>
<RelativePanel x:Name="PageTurningCanvas" Margin="0,40,0,0">
<Grid PointerPressed="TurnPageLeftButton_PointerPressed" PointerEntered="Grid_PointerEntered" PointerMoved="Grid_PointerEntered" x:Name="TurnPageLeftButton" RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignBottomWithPanel="True" RelativePanel.AlignTopWithPanel="True" Width="100" Opacity="0" VerticalAlignment="Center" HorizontalAlignment="Left" Background="Transparent"/>
<Grid PointerPressed="TurnPageRightButton_PointerPressed" PointerEntered="Grid_PointerEntered" PointerMoved="Grid_PointerEntered" x:Name="TurnPageRightButton" RelativePanel.AlignRightWithPanel="True" RelativePanel.AlignBottomWithPanel="True" RelativePanel.AlignTopWithPanel="True" Width="100" Opacity="0" VerticalAlignment="Center" HorizontalAlignment="Right" Background="Transparent"/>
</RelativePanel>
</Grid>
</Page>

cant get Xaml to tab between TextBoxes

I am trying to get my view to only tab between a pick username textbox and a massage textbox xaml. My first problem is the tab gets stuck on the enter username, my guess is it has a custom control for search suggestions that is next in line. Also it tabs through every button in the view and i don't want it to do that. I have tried to add a Tabindex to both textboxes and it has no effect. I left the Tabidex in both textboxs so you know which ones I am trying to tab between.
<UserControl x:Class="Clinical.Patient.Views.SendMessageDialogView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-
compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
d:DataContext="{d:DesignInstance
Type=viewModels:SendMessageDialogViewModel}"
mc:Ignorable="d"
d:DesignWidth="320"
xmlns:properties="clr-namespace:Clinical.Patient.Properties"
xmlns:viewModels="clr-namespace:Clinical.Patient.ViewModels"
xmlns:patient="clr-namespace:Clinical.Patient"
xmlns:self="clr-namespace:System;assembly=mscorlib"
xmlns:views="clr-namespace:Clinical.Patient.Views"
d:DesignHeight="350"
xmlns:termAutoComplete="clr-
namespace:Clinical.Patient.Controls.TermAutoComplete"
xmlns:controls="clr-namespace:Clinical.Patient.Controls"
KeyboardNavigation.TabNavigation="Local">
<UserControl.Resources>
<viewModels:IsAtLeastGradeConverter x:Key="IsAtLeastGradeConverter"/>
<viewModels:IsAtLeastAutoCloseGradeConverter x:Key="IsAtLeastAutoCloseGradeConverter"/>
</UserControl.Resources>
<Border Padding="8"
MinWidth="320"
ClipToBounds="False">
<Border BorderThickness="1"
BorderBrush="{DynamicResource FocusBorderBrush}"
CornerRadius="2"
Background="{DynamicResource FocusBackgroundBrush}">
<Border.Effect>
<DropShadowEffect Color="{DynamicResource SubtleDivideBorderColor}"
Opacity="1"
ShadowDepth="0"
BlurRadius="10" />
</Border.Effect>
<StackPanel Orientation="Vertical"
Margin="10">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="{x:Static properties:Strings.SharingReportIs}"
Foreground="{DynamicResource CommonTextBrush}"
FontSize="13"
FontWeight="Bold"/>
<Border Grid.Column="1"
Width="180"
Margin="5 5 20 5"
HorizontalAlignment="Left"
Background="{DynamicResource FocusBackgroundBrush}"
BorderBrush="{DynamicResource FocusBorderBrush}"
BorderThickness=".5"
CornerRadius="8,8,8,8">
<DockPanel HorizontalAlignment="Center">
<views:ExamTypeIconView DockPanel.Dock="Left"
Type="{Binding ExamType}"
Foreground="{DynamicResource CommonTextBrush}"
IconHeight="30"/>
<StackPanel DockPanel.Dock="Left"
Margin="3">
<TextBlock Text="{Binding Status}"
Foreground="{DynamicResource CommonTextBrush}"
FontSize="13"/>
<TextBlock Text="{Binding Accession}"
Foreground="{DynamicResource CommonTextBrush}"
FontSize="13"/>
</StackPanel>
</DockPanel>
</Border>
</Grid>
<DockPanel HorizontalAlignment="Left"
MinWidth="280"
Margin="0 5 0 0">
<Button
x:Name="To"
HorizontalAlignment="Right"
MinWidth="65"
Margin="0,4,4,4"
IsDefault="True"
Command="{Binding ToCommand}"
Content="to.." Width="65" />
<TextBox x:Name="SendTo"
Text="{Binding Recipient, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
Style="{DynamicResource NavigationSearchTextBox}"
FontSize="{DynamicResource OneAndAQuarterFontSize}"
Padding="0 3 0 3"
VerticalAlignment="Center"
Width="225"
TabIndex="0"/>
<termAutoComplete:TermAutoComplete AutoCompleteSource="{Binding AutoCompleteSource}"
Padding="0 0 0 0"
TextBox="{Binding ElementName=SendTo}"/>
</DockPanel>
<Grid Margin="0 5 0 0">
<TextBlock Text="{x:Static properties:Strings.SharingMessage}"
Foreground="{DynamicResource CommonTextBrush}"
FontSize="13"
FontWeight="Bold" />
</Grid>
<TextBox x:Name="PeerReviewComments"
Margin="0 5 0 0"
MinLines="5"
AcceptsReturn="True"
TextWrapping="Wrap"
Text="{Binding Message, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Width="295"
TabIndex="1"/>
<DockPanel
MinWidth="280"
Margin="0,5,-5,0"
>
<Button
x:Name="Save"
HorizontalAlignment="Right"enter code here
MinWidth="65"
Margin="0,4,4,4"
IsDefault="True"
Command="{Binding SendCommand}"
Content="Send" Width="65"
DockPanel.Dock="Right"
/>
<Button
x:Name="Cancle"
HorizontalAlignment="Right"
MinWidth="65"
Margin="0,4,4,4"
IsDefault="True"
Command="{Binding CancelCommand}"
Content="Cancel" Width="65"
DockPanel.Dock="Right"
/>
</DockPanel>
</StackPanel>
</Border>
</Border>
</UserControl>

I believe you need to replace "TabIndex" with "KeyboardNavigation.TabIndex".
If that doesn't work, you can also skip elements in the tab sequence by setting KeyboardNavigation.IsTabStop on the element in XAML.
KeyboardNavigation.IsTabStop="False"
Source

For controls where tab "gets stuck" add:
KeyboardNavigation.TabNavigation="Continue"
To avoid tab hitting a control add:
KeyboardNavigation.IsTabStop="False"

Binding using MVVM on Windows 8.1

I am developing an app on Windows 8.1 and using MVVM Light Framework.
So this is the partial XAML on one of my views.
Basically, I have a ViewModel_Queue which I contains a command that I need to call when a button is pressed inside the FlyoutMenu. My problem is, how will I be able to call this ViewModel_Queue where inside a binding ItemControl which is inside in another ItemControl which is then binded as well?
<ItemsControl Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" ItemsSource="{Binding Person.Child}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Border Background="#FF808080" Width="200">
<Grid>
<TextBlock Text="{Binding Name}" FontSize="15" Foreground="White" Margin="10" VerticalAlignment="Center" FontWeight="Bold" />
</Grid>
</Border>
<ItemsControl ItemsSource="{Binding Counters}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Width="120" Background="#0F000000">
<!-- get header color -->
<Border Height="20">
<i:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:InvokeCommandAction Command="{Binding DataContext.Queue.Command_DoSomething, ElementName=mainGrid}" />
</core:EventTriggerBehavior>
</i:Interaction.Behaviors>
</Border>
<TextBlock Text="{Binding Total}" FontSize="15" Foreground="Black" Margin="10" TextAlignment="Center" x:Name="outcomeCounterCell" Tapped="outcomeCounterCell_Tapped">
<FlyoutBase.AttachedFlyout>
<Flyout Placement="Bottom" x:Name="MenuFlyout" FlyoutPresenterStyle="{StaticResource FlyoutPresenterRoundStyle}">
<Grid Width="200">
<StackPanel>
<Border Background="#7FFF0000" CornerRadius="8,8,0,0">
<TextBlock Text="Update" TextAlignment="Center" FontSize="15" Margin="0,10" Foreground="White" />
</Border>
<TextBlock Text="{Binding Total}" TextAlignment="Center" FontSize="30" Margin="0,20,0,0" Foreground="Black" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,20">
<Border BorderThickness="1" BorderBrush="#7F000000" CornerRadius="5,0,0,5" Width="50">
<TextBlock Text=" - " TextAlignment="Center" FontSize="20" FontWeight="Bold" Margin="0,5" />
<i:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:InvokeCommandAction Command="{Binding Command_Decrement}" CommandParameter="{Binding }" />
</core:EventTriggerBehavior>
</i:Interaction.Behaviors>
</Border>
<Border BorderThickness="1" BorderBrush="#7F000000" CornerRadius="0,5,5,0" Width="50">
<TextBlock Text=" + " TextAlignment="Center" FontSize="20" FontWeight="Bold" Margin="0,5" />
<i:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:InvokeCommandAction Command="{Binding Command_Increment}" CommandParameter="{Binding }" />
</core:EventTriggerBehavior>
</i:Interaction.Behaviors>
</Border>
</StackPanel>
</StackPanel>
</Grid>
</Flyout>
</FlyoutBase.AttachedFlyout>
</TextBlock>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

How to define the Location of a Popup to be different from the Button Location in a ListView? XAML C# WPF

I have a ListView of ToggleButtons. Every button is binded to a Popup window.
Every Popup window is being opened at the same place as the button, but I want it to be at the same place as the first button.
Here is the code and images:
The buttons:
This is what happens when the first button is open:
This is what happens when the second button is open:
<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>
<Grid.RowDefinitions>
<RowDefinition Height="90*" />
<RowDefinition Height="150*" />
<RowDefinition Height="0*" />
</Grid.RowDefinitions>
<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="0" Width="328" VerticalAlignment="Center" Name="PopupOne" IsLightDismissEnabled="True" IsHoldingEnabled="False" ScrollViewer.VerticalScrollMode="Enabled" Visibility="{Binding IsChecked, ElementName=RecipeButton}">
<Border BorderBrush="#FF65C365" BorderThickness="1" Background="White" Height="514" Width="328">
<ScrollViewer VerticalScrollMode="Enabled" >
<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" />
<TextBlock Foreground="Black" Text="{Binding RecipeText}" HorizontalAlignment="Left" FontSize="18" />
</StackPanel>
</ScrollViewer>
</Border>
</Popup>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

In the popup you can define a grid and set the popup height there
Something like this:
<Popup x:Name="resultsPopup"
AllowsTransparency="True"
IsOpen="{Binding IsResultsPopupOpen,
Mode=TwoWay,
UpdateSourceTrigger=PropertyChanged}"
Placement="Bottom"
PlacementTarget="{Binding ElementName=SearchBox}"
StaysOpen="False">
<Grid Width="{Binding ActualWidth,
ElementName=SearchBox}"
Height="300">
</Grid>
</Popup>
UPDATE:
You can place the popup wherever you want with the Placement property as shown above, the set the binding of the "PlacementTarget" to the control you want to bind.
In the example above the popup will be shown below the UI control named SearchBox