We Keep Coding

Datatemplate binding displays nothing

I've got this code:
<GroupBox Style="{DynamicResource MaterialDesignCardGroupBox}" Grid.Row="0" Grid.Column="0" >
<Label Content="{Binding MatchController.Match.TeamHome}" />
<GroupBox.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Height="32" Width="32" Source="{Binding MatchController.Match.TeamHomeShield}" />
<Label Content="{Binding MatchController.Match.TeamHome}" />
<TextBlock Margin="8,0,0,0" VerticalAlignment="Center" Style="{StaticResource MaterialDesignSubheadingTextBlock}" Text="{Binding Match.TeamHome}"/>
</StackPanel>
</DataTemplate>
</GroupBox.HeaderTemplate>
</GroupBox>
As you can see I've got a header template with a DataTemplate inside the GroupBox. The strange thing is the Label outside the GroupBox displays the value of TeamHome correctly however inside the StackPanel in the DataTemplate nothing is displayed and the binding is the same, why? Mystery of the life.

You need to bind your GroupBox to a datasource, then it will be available to the template.
<GroupBox Style="{DynamicResource MaterialDesignCardGroupBox}"
Grid.Row="0"
Grid.Column="0"
DataContext="{Binding MatchController}">
<Label Content="{Binding MatchController.Match.TeamHome}" />
<GroupBox.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Height="32"
Width="32"
Source="{Binding Match.TeamHomeShield}" />
<Label Content="{Binding Match.TeamHome}" />
<TextBlock Margin="8,0,0,0"
VerticalAlignment="Center"
Style="{StaticResource MaterialDesignSubheadingTextBlock}"
Text="{Binding Match.TeamHome}" />
</StackPanel>
</DataTemplate>
</GroupBox.HeaderTemplate>
</GroupBox>

<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Height="32" Width="32" Source="{Binding MatchController.Match.TeamHomeShield}" />
<Label Content="{Binding RelativeSource={RelativeSource AncestorType={x:Type Window}}, Path=DataContext.MatchController.Match.TeamHome}" />
<TextBlock Margin="8,0,0,0" VerticalAlignment="Center" Style="{StaticResource MaterialDesignSubheadingTextBlock}" Text="{Binding Match.TeamHome}"/>
</StackPanel>
</DataTemplate>
</GroupBox.HeaderTemplate>
If the DataContext of your code is set on the Window element, use this code. Otherwise, just change to the type of the nearest element that has this DataContext.

WPF GridView: Determining held item

I'm trying to highlight the selected item in a bridview from a windows application.
To be more precise:
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemsGridView"
AutomationProperties.Name="Items"
TabIndex="1"
Grid.RowSpan="2"
Padding="116,136,116,46"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
ItemClick="openRessource"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}">
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="200" Height="250" Holding="openHoldMenu">
<Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}">
<Image Source="{Binding icon}" Stretch="None"/>
</Border>
<Image Source="{Binding downloaded}" Width="30" Height="30" Margin="5" HorizontalAlignment="Right" VerticalAlignment="Top"/>
<StackPanel VerticalAlignment="Bottom" Background="{ThemeResource ListViewItemOverlayBackgroundThemeBrush}">
<TextBlock Text="{Binding Mode=OneWay}" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" Height="60" Margin="15,0,15,0" FontWeight="SemiBold"/>
<TextBlock Text="{Binding description, Mode=OneWay}" Foreground="{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,10" FontSize="12"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
This is my XAML, fairly simple, I just have a Holding event which brings up a menu in my page.
My problem is that I want to know which item has been held to create a border around it so that the user knows which item is selected.
I can easily access the bound item in my list but can't get the grid element selected.
If anyone know how to, that would be really appreciated.
Thank you!

Should be able to make a trigger such as this:
http://stackoverflow.com/questions/4539909/wpf-datagrid-selected-row-style

When Item is selected from Combo Box, some element with Combo Box Light Dismiss is getting generated - XAML

On one of the XAML Pages, I have 3 combo boxes on left side and ListView with Horizontal Scroll on the right.
The three combo boxes are not cascading combo boxes. If I click any of the three combo boxes, under "PopupRoot", some ComboBoxLightDismiss gets generated which has width and height of the entire screen. This leave my screen in the hang state as this is some invisible canvas. I am not able to figure out the reason for this.
Visual Tree before Combo box Click
Visual Tree after Combo Box is click or any item is selected
I am adding the XAML code for the left User Control of the combo boxes as well the page below:
UserControl XAML Code which includes 3 Combo Boxes
<StackPanel Margin="10,0,0,0">
<TextBlock x:Name="textBlockSourceLabel" Text="Source" Margin="0,6,6,6" Style="{StaticResource LeftNavTextBlock}"/>
<ComboBox Height="30" x:Name="comboBoxSourceName" Margin="0,6,6,6" FontSize="14"
Style="{StaticResource NewComboBoxStyle}" ItemContainerStyle="{StaticResource NewComboBoxItem}"
ItemsSource="{Binding Codes,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
SelectedValue="{Binding SourceFile.FeedCode,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
Width="250">
<interactivity:Interaction.Behaviors>
<awbehaviors:ComboBoxKeyboardSelection/>
<core:EventTriggerBehavior EventName="SelectionChanged">
<core:InvokeCommandAction Command="{Binding LoadSelectedSourceCommand}" CommandParameter="{Binding SelectedValue, ElementName=comboBoxSourceName}"/>
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</ComboBox>
<TextBlock x:Name="textBlockFiscalMonthLabel" Text="Calendar Month" Margin="0,6,6,6" Style="{StaticResource LeftNavTextBlock}" />
<ComboBox Height="30" x:Name="comboBoxFileFiscalMonth" FontSize="14" Margin="0,6,6,6" Width="250" ItemsSource="{Binding MonthNames}"
DisplayMemberPath="Item1" SelectedValue="{Binding SourceFile.CalendarMonth,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
SelectedValuePath="Item2" Style="{StaticResource NewComboBoxStyle}" ItemContainerStyle="{StaticResource NewComboBoxItem}">
</ComboBox>
<TextBlock x:Name="textBlockFiscalYearLabel" Margin="0,6,6,6" Text="Calendar Year" Style="{StaticResource LeftNavTextBlock}"/>
<ComboBox Height="30" x:Name="comboxBoxFileFiscalYear" Margin="0,6,6,6" FontSize="14"
ItemsSource="{Binding Years,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
SelectedValue="{Binding SourceFile.CalendarYear,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
Style="{StaticResource NewComboBoxStyle}" ItemContainerStyle="{StaticResource NewComboBoxItem}"
Width="250"></ComboBox>
XAML code for Page which includes the ListView and UserControl
<Grid Style="{StaticResource LayoutRootStyle}" x:Name="gridLayout" VerticalAlignment="Stretch">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="80*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Background="#FFADB9CA">
<UserControls:FeedInformation DataContext="{Binding FeedInformationVM}" HorizontalAlignment="Stretch" Margin="0" Height="{Binding ActualHeight, ElementName=Row1}" Background="{StaticResource gridcontainerBackGroundBrush}"/>
</Grid>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="10*"/>
<RowDefinition Height="90*" x:Name="GridRow"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*" x:Name="GridColumn"/>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" HorizontalAlignment="Stretch" x:Name="titleGrid">
<TextBlock Style="{StaticResource NewHeaderTextStyle}" Text="{Binding FeedSourceFileStatus.FileName}" Margin="10,0,0,0"/>
</Grid>
<Grid Grid.Row="1">
<ListView IsItemClickEnabled="False" IsSwipeEnabled="False" IsDoubleTapEnabled="False" IsTapEnabled="False" SelectionMode="None"
Margin="12,25,50,25" BorderThickness="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Height="{Binding ActualHeight, ElementName=GridRow}"
ItemsSource="{Binding SubItemsCollection, ElementName=pgControl, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
ScrollViewer.HorizontalScrollBarVisibility="Visible"
ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.VerticalScrollBarVisibility="Auto"
ItemContainerStyle="{StaticResource LvItemStyle}">
<ListView.ItemTemplate>
<DataTemplate>
<ListView SelectionMode="None" IsZoomedInView="False" IsHoldingEnabled="False" IsSwipeEnabled="False" x:Name="ListRow" Tag="{Binding RowNo}"
ItemsSource="{Binding FeedData, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" HorizontalAlignment="Stretch"
VerticalAlignment="Center" ItemContainerStyle="{StaticResource LvItemStyle}" AllowDrop="True"
ShowsScrollingPlaceholders="True" CanDragItems="{Binding RowNo, Converter={StaticResource ListInttoBooleanConverter}}">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Height="35" Width="120" HorizontalAlignment="Center" >
<Rectangle StrokeDashArray="1 1 0.3 1" Height="30" VerticalAlignment="Top" IsHitTestVisible="False" Opacity="0.5"
Stroke="Gray" StrokeThickness="1" Margin="0" StrokeEndLineCap="Square" StrokeDashOffset="1.5"
Visibility="{Binding Tag, Converter={StaticResource RowNotoVisibilityConverter4}, ElementName=ListRow}"
Fill="#FF9DC3E6"/>
<TextBlock Text="{Binding FeedCellData, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
FontSize="12" LineHeight="13" Foreground="{StaticResource TaxHubItemForegroundBrush}" TextTrimming="WordEllipsis" Width="120" AllowDrop="True" Padding="5,1,1,1" TextWrapping="NoWrap"
VerticalAlignment="Top" Tag="{Binding Tag, ElementName=ListRow}" ToolTipService.ToolTip="{Binding FeedCellData}"
Height="{Binding Tag, Converter={StaticResource RowtoHeightConverter}, RelativeSource={RelativeSource Mode=Self}}" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsStackPanel Margin="0,0,0,0" Width="Auto" Orientation="Horizontal" Height="35" VirtualizingStackPanel.VirtualizationMode="Standard"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical" VirtualizingStackPanel.VirtualizationMode="Standard"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</Grid>
</Grid>
</Grid>
I don't seem to figure out the reason for this canvas getting generated when combobox is clicked.
Note: This application is moved from Win 8.1 App to Win 10 UWP app. This seems to be working fine in the 8.1 app which is made compatible with win 10 but this problem is coming from using this in UWP
After debugging, I realized that this is happening because of using VirtualizingStackPanel in the outer ListView. In my ListView, every row has 200 columns. When I removed VirtualizingStackPanel, horizontal scroll bar for the whole List doesnt appear and I am not able to move horizontally. Does anybody can help with this?

Image covers ListView on wpf

My problem is this:
I got this ListView -
<ListView ItemsSource="{Binding GameRow1}" ItemTemplate="{StaticResource GamePiecesTemplate}" VerticalAlignment="Bottom" Grid.Column="12" Grid.Row="1" />
and I got this Image -
<Image Grid.Column="12" Grid.Row="1" Source="/Images/Gray_triangle2.png" Stretch="Fill"/>
The problem is that the Image covers my ListView and I can't the ListView items. is there a way to set picture to be on a grid cell as background?
this is the ItemTemplate btw:
<DataTemplate x:Key="GamePiecesTemplate">
<StackPanel>
<Image Source="{Binding IsWhite , Converter={StaticResource GamePiceToImgSrc}}" Height="50" Width="50" ></Image>
<Label HorizontalAlignment="Center" Content="{Binding Path=UserName}" />
</StackPanel>
</DataTemplate>

binding height/width to child element in XAML

Let me start by saying sorry if this is a duplicate. I was unable to find an answer in any of the similar posts that I have read. I am having an issue where I have a Border control whose Height and Width are bound to the ActualHeight and ActualWidth of a TextBlock that is a child of the Border.
Everything displays fine in the designer, but for some reason at run-time, the Border control is not visible. I am not sure if it is because the Height or Width may be 0, or perhaps the Visibility is being set some other way. If I hard code the Height/Width then everything displays the same in the designer and at runtime, but something is acting bizarre with this binding. Even more bizarre, is that they were working before, and I'm not sure what I could have done to break them. Here is my XAML:
<Grid Visibility="{Binding Path=Contacts.Count, Converter={StaticResource ItemCountToVisibilityConverter}}" >
<Border CornerRadius="5"
BorderBrush="White"
BorderThickness="2"
Padding="20,15,0,15"
Margin="0,15,0,15">
<ListView ItemsSource="{Binding Path=Contacts}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Path=Name}" />
<TextBlock Text="{Binding Path=Number}" />
<TextBlock Text="{Binding Path=EmailAddress}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Border>
<Border Background="White"
CornerRadius="5"
Height="{Binding Path=ActualHeight, ElementName=ContactsTextBlock}"
Width="{Binding Path=ActualWidth, ElementName=ContactsTextBlock}"
VerticalAlignment="Top">
<TextBlock Text="Contact Information"
x:Name="ContactsTextBlock"
Foreground="Black"
Padding="5,2,5,2"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
</Grid>
It is the second Border control in the XAML that is having the issue. As I said, it displays properly in the designer, but for some reason at runtime, the Border control as well as the TextBlock it contains are not visible. Also, the Grid is working properly, as well as the ListView and the first Border. It is simply the second Border and it's TextBlock that are not functioning properly.
Thanks in advance!
Here is what it looks like at design-time:

Let the Grid do the dirty work for you. I believe the Grid is one of the best controls WPF has.
The trick is dividing the vertical space in three slices, where the two on the top are sized accordingly to the desired space. That is, the TextBlock will determine how tall will be the row pair. You don't have to do anything than enjoying the result...
Here is a sample XAML (I cut the Visibility property for sake of simplicity):
<Grid Margin="40,20">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border
CornerRadius="5"
BorderBrush="White"
BorderThickness="2"
Padding="20,15,20,15"
Background="DimGray"
Grid.Row="1"
Grid.RowSpan="2"
>
<ListView ItemsSource="{Binding Path=Contacts}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Path=Name}" />
<TextBlock Text="{Binding Path=Number}" />
<TextBlock Text="{Binding Path=EmailAddress}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Border>
<Border
Background="White"
CornerRadius="5"
Grid.Row="0"
Grid.RowSpan="2"
HorizontalAlignment="Center"
>
<TextBlock
Text="Contact Information"
x:Name="ContactsTextBlock"
Foreground="Black"
Padding="5,2,5,2"
/>
</Border>
</Grid>
Please, note the ListView border is sharing the middle row, so that the borderline will run "striking" the text.
That renders as follows:

You may want to set up BorderThickness and BorderBrush:
<Border Background="White"
Border Background="White"
CornerRadius="5"
BorderThickness="1"
BorderBrush="Gray"
HorizontalAlignment="Center"
VerticalAlignment="Top">
<TextBlock Text="Contact Information"
x:Name="ContactsTextBlock"
Foreground="Black"
Padding="5,2,5,2"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>