Windows Phone Context Menu Item Text Not Appearing - xaml

I have a Windows Phone 8 app using XAML/C#. My app has an ItemsControl that relies on a data template. My DataTemplate looks like the following:
<DataTemplate x:Key="myTemplate">
<Grid Margin="0,0,0,8">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Text="{Binding DisplayName}" TextWrapping="NoWrap" Style="{StaticResource PhoneTextLargeStyle}" TextTrimming="WordEllipsis" >
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu>
<toolkit:MenuItem x:Name="customerMenuItem" Foreground="White" Header="View Customer Profile" Click="customerMenuItem_Click" Tag="{Binding Path=CustomerName}" />
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</TextBlock>
<TextBlock Text="{Binding Summary}" TextWrapping="NoWrap" Grid.Row="1" Style="{StaticResource PhoneTextSmallStyle}" />
</Grid>
<StackPanel Orientation="Horizontal" Grid.Column="1"><!-- Stuff here --></StackPanel>
</Grid>
</DataTemplate>
This DataTemplate is referenced in the main part of my XAML as shown here:
<Grid x:Name="ContentPanel" Grid.Row="1" Grid.ColumnSpan="2" Margin="12,0,12,0">
<ScrollViewer>
<ItemsControl x:Name="myItemsControl" ItemTemplate="{StaticResource myTemplate}" ItemsSource="{Binding Customers}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>
</Grid>
Please note, the "toolkit" namespace comes from clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit. When I hold my finger (or mouse) on the TextBlock, a context menu appears. However, I never see the words "View Customer Profile". I just see a block box that represents the context menu itself. I know that the item is there though. I know because the customerMenuItem_Click event successfully fires. I have a MessageBox in there that shows the value of the Tag. That value is always correct. For some reason though the menu item text is not appearing. What am I doing wrong?

You put Foreground = "White". Context menu is on white background. That is why you don't see your menu item.

Related

SOLVED Pressing on ScrollViewer inside ListBox Item doesn't select the Item

I gave a ListBox that lists items. The items, can vary in size, but follow the same pattern:
picture................Metadata
ID
<ListBox Name="View" Grid.Row="2" ItemsSource="{Binding Human, ElementName=uc}"
SelectedItem="{Binding SelectedHuman, ElementName=uc}"
MouseDoubleClick="OnSubjectEditClick"
VerticalContentAlignment="Center"
VirtualizingPanel.IsVirtualizing="True"
VirtualizingPanel.ScrollUnit="Pixel"
ScrollViewer.CanContentScroll="True"
Grid.IsSharedSizeScope="True"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate >
<DataTemplate >
<Border BorderBrush="#565656" BorderThickness="1" Margin="10" Padding="10">
<Grid>
<Grid.RowDefinitions>
<RowDefinition MaxHeight="300" />
<RowDefinition MaxHeight="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" MinWidth="300" MaxWidth="500" SharedSizeGroup="col1"/>
<ColumnDefinition MaxWidth="500" Width="*" SharedSizeGroup="col2"/>
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.Column="0" MaxHeight="300" MaxWidth="300" Source="{Binding Thumb}"/>
<TextBlock Grid.Column="0" Grid.Row="1" Text="{Binding Name}" FontWeight="Bold" TextAlignment="Center"/>
<local:MetadataView Grid.Column="1" Grid.RowSpan="2" Metadata="{Binding Metadata}" HorizontalAlignment="Stretch" VerticalAlignment="Center" IsEdit="False" />
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The items inside Metadata .xaml looks like this. StackPanels containing actual Metadata are automatically generated by code inside "DisplayMode":
<Grid VerticalAlignment="Center" HorizontalAlignment="Stretch">
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" CanContentScroll="False" Height="300" >
<StackPanel x:Name="DisplayMode" VerticalAlignment="Center" Grid.IsSharedSizeScope="True" >
...........
<StackPanel/> //AutoGenerated
............
</StackPanel>
</ScrollViewer>
</Grid>
The problem I'm facing is the fact, that I need to be able to select an item inside the ListBox. But, by adding ScrollViewer in Metadata.xaml it seems I Reroute the selector, so it is trying to select an item in Metadata ScrollViewer instead of ListBox when I press the part of the ListBox containing Metadata. If I press on Thumbnail, or even RightClick on any part of the ListBox - it seems to select just fine.
[SOLVED] After playing around with available options in ScrollViewer I stumbled across Focusable. Setting it to False did the trick.
I hope it will help someone in the future.
<Grid VerticalAlignment="Center" HorizontalAlignment="Stretch">
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" CanContentScroll="False" Height="300" Focusable="False" >
<StackPanel x:Name="DisplayMode" VerticalAlignment="Center" Grid.IsSharedSizeScope="True" >
</StackPanel>
</ScrollViewer>
</Grid>

C# UWP - The first image inside ListView is incorrectly sized

I have a simple layout that basically displays a list of items in ListView using an ItemsWrapGrid as the panel template. The problem I am having is that the first image in the ListView is always bigger than the rest, even with a fixed width / height set. I am completely stumped.
An image of the problem:
The ListView XAML is:
<ListView ItemsSource="{Binding Currencies}" ItemTemplate="{StaticResource PortfolioCurrencyTemplate}">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal" Width="Auto" Height="Auto"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
The data template:
<Page.Resources>
<DataTemplate x:Key="PortfolioCurrencyTemplate" x:DataType="viewModels:PortfolioViewModel">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
BorderBrush="Black"
BorderThickness="1"
CornerRadius="2"
Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Grid.ColumnSpan="1" MaxWidth="100" MaxHeight="100" Source="https://www.cryptocompare.com/media/19633/btc.png"/>
<TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding Name}" VerticalAlignment="Center"/>
<TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding Symbol}" VerticalAlignment="Center"/>
<TextBlock Grid.Column="1" Grid.Row="2" Text="{Binding LastPrice}" VerticalAlignment="Center"/>
</Grid>
</DataTemplate>
</Page.Resources>
Instead of using ListView and changing ItemsPanelTemplate to create a GridView Effect and tackle issues one by one, I would suggest you switch to AdaptiveGridView.
You can install Nuget Package for UWP Community Toolkit from Here
Add below namespace to your page
xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
Now your ListView needs to be replaced like below.
<controls:AdaptiveGridView ItemsSource="{Binding Currencies}"
ItemTemplate="{StaticResource PortfolioCurrencyTemplate}"
DesiredWidth="250"/>
Output from Designer
Good Luck.

Different XAML Hub content aligment in design mode and in emulator

I have a StackPanel representing the top bar and a Hub representing books items. Both wrapped in the grid with two rows.
The problem is that in design mode hub content aligned properly to the top, just below my top bar. But in emulator it looks like all content aligned to the center of the hub.
In design time it looks like this:
But in emulator it looks like this:
Here is my XAML code:
<Page.Resources>
<DataTemplate x:Key="HubSectionHeaderTemplate">
<TextBlock Margin="0,0,0,-10" Text="{Binding}" FontSize="19" FontFamily="Open Sans" FontWeight="Light" FontStretch="ExtraExpanded" Foreground="#FF30323E">
<!--<TextBlock.RenderTransform>
<CompositeTransform/>
</TextBlock.RenderTransform>-->
</TextBlock>
</DataTemplate>
<!-- Grid-appropriate item template as seen in section 2 -->
<DataTemplate x:Key="Standard200x180TileItemTemplate">
<Grid Margin="0,0,15,15" Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" VerticalAlignment="Top">
<Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}" Height="165" Width="115"/>
<!--<TextBlock Text="{Binding Title}" VerticalAlignment="Bottom" Margin="9.5,0,0,6.5" Style="{ThemeResource BaseTextBlockStyle}"/>-->
</Grid>
</DataTemplate>
</Page.Resources>
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Margin="0,-25,0,0">
<StackPanel.Background>
<ImageBrush ImageSource="Assets/CatalogTopBar.png" Stretch="UniformToFill"/>
</StackPanel.Background>
<Button x:Name="searchButton" Margin="0,25,-30,0" Height="15" Width="10" Content="" HorizontalAlignment="Right" VerticalAlignment="Center" BorderThickness="0" >
<Button.Background>
<ImageBrush ImageSource="Assets/noun_23695_cc.png" Stretch="Uniform"/>
</Button.Background>
</Button>
</StackPanel>
<Hub x:Name="Hub" x:Uid="Hub" Grid.Row="1" Background="White" Margin="0,25,0,0" VerticalContentAlignment="Top" VerticalAlignment="Top">
<HubSection x:Uid="HubSection2" Header="Популярные книги" Width="Auto"
DataContext="{Binding Groups[0]}" HeaderTemplate="{ThemeResource HubSectionHeaderTemplate}" >
<DataTemplate>
<GridView
Margin="0,-10,0,0"
ItemsSource="{Binding Items}"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Items In Group"
ItemTemplate="{StaticResource Standard200x180TileItemTemplate}"
SelectionMode="None"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick"
ContinuumNavigationTransitionInfo.ExitElementContainer="True">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
</DataTemplate>
</HubSection>
</Hub>
</Grid>
</Page>
Ho-ho-ho... I finally managed to find the problem. After spending WEEKS!!! WEEKS, Carl! After spending few weeks I found out by accident that there is a MASSIVE "application name" <Hub.title> above my <Grid>.
It was not visible because of the white background and white font color of the text. By accidentally changing <RequestedTheme="Light"> I was finally able to see this text, because default font color changed to black. The text "application name" itself was not in my XAML source file, it was attached by localization facilities with x:Uid ="Hub" and corresponding value in resources.resw. After deleting x:Uid my layout returned to normal...

XAML element inside of ItemsControl DataTemplate sometimes has null parent (WinRT)

I'm making a win8 app. I have an ItemsControl with a DataTemplate. Inside this DataTemplate, there is a Grid. Inside this Grid there is a WebView and a ProgressRing. I have an event for LoadCompleted on the WebView, at which time I want to disable the ProgressRing. My thought was to use the following:
ProgressRing pr = ((sender as FrameworkElement).Parent as Grid).Children.First(t => t.GetType().Equals(typeof(ProgressRing))) as ProgressRing;
pr.IsActive = false;
And this works sometimes, but sometimes it claims that ((sender as FrameworkElement).Parent) is null. I verified from debugging that in these cases, the sender is still the correct WebView. The WebView is being shown on the screen and is formatted correctly - so how could its parent be null?
Here's the XAML:
<ItemsControl Margin="40,0,40,0" x:Name="resultsItemsControl">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Margin="50,0">
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" MaxWidth="150"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="100" MaxWidth="100"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" x:Name="viewInBrowser" IsEnabled="False" Style="{StaticResource PreviewLinkAppBarButtonStyle}" Margin="0,0,40,0" Click="viewInBrowser_Click_1"></Button>
<TextBlock HorizontalAlignment="Left" TextAlignment="Left" Grid.Column="1" FontSize="30" Margin="0,20,0,20" FontWeight="Bold" FontFamily="Georgia" VerticalAlignment="Center" Text="{Binding Name}"></TextBlock>
<ProgressRing x:Name="loadingProgressRing" Margin="20,0" Grid.Column="2" Foreground="White" IsActive="True" HorizontalAlignment="Left" VerticalAlignment="Center"></ProgressRing>
<WebView ScriptNotify="WebView_ScriptNotify_1" Grid.Column="0" Grid.ColumnSpan="14" Grid.Row="1" Source="{Binding CurrentSearchUrl}" Width="0" LoadCompleted="WebView_LoadCompleted_1"></WebView>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I wouldn't use a WebView in an ItemsControl at all, but you could try putting your entire template in a UserControlm then you handle the event inside of the UserControl and don't need to care about sender, since you can just name the Grid and access a named Grid.

Silverlight ToolKit DragDrop problem

I have pane with two grid and there is a listbox in both grid. I'd like to add Drag & Drop feature to the pane, so the user can drag a list element in the left listbox and drop it in the right listbox. I found many great tutorials and I could add the appropriate code to my pane but when the application is running and I click on the menu item of my pane it does not load. If I delete the drag & drop code everything works fine, so the problem is definitely the Drag & Drop feature.
<telerikDocking:RadPane x:Class="Module_TestModule1.PaneSzD" telerikDocking:RadDocking.SerializationTag="Module_TestModule1.PaneSzD"
xmlns:telerikDocking="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Docking"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:toolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="PaneSzD1" Header="PaneSzD" IsHidden="True">
<StackPanel Orientation="Horizontal">
<Grid x:Name="LeftGrid" Width="250">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<toolkit:ListBoxDragDropTarget AllowDrop="True" Grid.Row="0">
<ListBox Name="lbLRecords">
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ListBox>
</toolkit:ListBoxDragDropTarget>
<StackPanel Grid.Row="1" Height="Auto">
<TextBox Name="tbLRecord" KeyDown="tbLRecord_KeyDown" />
<Button Name="btnLAddRecord" Content="Add Record" Height="30" Click="btnLAddRecord_Click" ></Button>
</StackPanel>
</Grid>
<StackPanel Orientation="Vertical">
<Button Name="btnLMoveRecord" Content="Move Record From Left" Height="30" Click="btnLMoveRecord_Click" Margin="10,5,10,5" />
<Button Name="btnRMoveRecord" Content="Move Record From Right" Height="30" Click="btnRMoveRecord_Click" Margin="10,5,10,5" />
</StackPanel>
<Grid x:Name="RightGrid" Width="250">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<toolkit:ListBoxDragDropTarget AllowDrop="True" Grid.Row="0">
<ListBox Name="lbRRecords">
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ListBox>
</toolkit:ListBoxDragDropTarget>
<StackPanel Grid.Row="1" Height="Auto">
<TextBox Name="tbRRecord" KeyDown="tbRRecord_KeyDown" />
<Button Name="btnRAddRecord" Content="Add Record" Height="30" Click="btnRAddRecord_Click"></Button>
</StackPanel>
</Grid>
</StackPanel>
</telerikDocking:RadPane>
Thanks for any help!
All the info to do this using the Silverlight Control Toolkit can be found here: http://themechanicalbride.blogspot.com/2009/08/new-with-silverlight-toolkit-drag-and.html