Develop Reference

Element inside Flyout in XAML isn't accessible from Code Behind

I'm working on a UWP application and need some help with Flyout. I have a Flyout in my XAML with a few TextBlock elements but don't seem to be able to call those elements in the Code Behind. Everytime I try that, I get an Exception "The name TB does not exist in the current context."
I already searched for possible solutions and tried the following things: Made a clean build, Restarted VS 2017, Cleared the bin folder manually and then tried to rebuild
But nothing seems to work and I'm on a point where I don't know what to do.
<Page
x:Class="FuhrparkUWP.Pages.Parkhaeuser"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:converter="using:FuhrparkUWP.Converter"
xmlns:data="using:FuhrparkStructureUWP.Model"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.Resources>
<converter:PassendFuerToStringConverter x:Key="PassendFuerToStringConverterKey"></converter:PassendFuerToStringConverter>
<converter:BelegtStatusToImageConverter x:Key="BelegtStatusToImageConverterKey"></converter:BelegtStatusToImageConverter>
</Page.Resources>
<Grid>
<ComboBox Name="CmbSelectParkhaus" Header="Parkhaus" HorizontalAlignment="Center" VerticalAlignment="Top" Width="200" SelectionChanged="CmbSelectParkhaus_SelectionChanged"/>
<GridView ItemsSource="{x:Bind Parkplaetze}" Name="ContentGrid" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0, 100, 0, 0">
<GridView.ItemTemplate>
<DataTemplate x:Name="ImageTextDataTemplate" x:DataType="data:Parkplatz">
<StackPanel Height="280" Width="180" Margin="12" Tapped="Content_Tapped">
<Image Source="{Binding Path=IstBelegt, Converter={StaticResource BelegtStatusToImageConverterKey}}" Height="180" Width="180" Stretch="UniformToFill"/>
<StackPanel Margin="0,12">
<TextBlock Text="{x:Bind FahrzeugKennzeichen}"/>
<TextBlock Text="{Binding Path=PassendFuer, Converter={StaticResource PassendFuerToStringConverterKey}}" Style="{ThemeResource CaptionTextBlockStyle}" Foreground="{ThemeResource SystemControlPageTextBaseMediumBrush}"/>
</StackPanel>
<FlyoutBase.AttachedFlyout>
<Flyout>
<StackPanel>
<Image Source="/Assets/Images/ParkplatzFrei.png" Width="180" Height="180"></Image>
<TextBlock Name="TB"></TextBlock>
<TextBlock Text="Passend für: LKW, PKW, Motorrad"></TextBlock>
<TextBlock Text="Belegt durch: FREI"></TextBlock>
</StackPanel>
</Flyout>
</FlyoutBase.AttachedFlyout>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Grid>
</Page>
I expect to call TB.Text = "xyz" for example from the Code Behind page, but at the moment I'm not able to call it.
I'm still able to call the other elements outside from the Flyout like "CmbSelectParkhaus" though.

You cannot handle things inside a DataTamplate, datamplates are not actual ui entities, they are Templates.
Assuming you want to achieve the same kind of access across all of your GridView items, you have to attach dependency properties, and either create programmatic binds on the PrepareContainerForItemOverride or the appropriate xaml "{Binding}" expressions.
This just opens whole new rabbit hole, especially if you are unaware of at least a single thing i mentioned so far, but you can just look up the bolded words one by one.

HeaderedContentControl header template not being used

I'm fairly new to WPF and am working with some legacy code, not sure how to use the HeaderedContentControl Header. I'd like to put in a StackPanel and customize the look of a header, just not sure how to do that.
Could someone give me some guidance on what to do next?
I have this xaml and the HeaderTemplate is never used.
<UserControl x:Class="PEC.Admin.WindowsControls.Program.Views.ProgramProductEnrichmentColorsView"
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"
xmlns:commonControls="clr-namespace:ManagerConsole.Common.Controls;assembly=ManagerConsole.Common.Controls"
xmlns:program="clr-namespace:PEC.Admin.ViewModel.Program;assembly=PEC.Admin.ViewModel.Program"
mc:Ignorable="d"
d:DesignWidth="300"
d:DataContext="{d:DesignInstance program:ProgramProductEnrichmentColorsViewModel}">
<commonControls:ExpanderPanel IsExpanded="{Binding Path=IsExpanded,Mode=TwoWay}">
<HeaderedContentControl.HeaderTemplate> <!-- this never gets used... -->
<DataTemplate>
<StackPanel>
<Label Content="{Binding Path=Header}"></Label>
</StackPanel>
</DataTemplate>
</HeaderedContentControl.HeaderTemplate>
<StackPanel HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Width="Auto"
Margin="3"
Background="White">
<TextBlock Text="Source Type:"
Margin="0,5,0,0" />
<TextBox IsReadOnly="True"
IsTabStop="False"
Background="LightGray"
BorderThickness="0"
Text="{Binding Path=SourceTypeName, Mode=OneTime}" />
</StackPanel>
</commonControls:ExpanderPanel>
</UserControl>

HeaderTemplate is applied. To verify it - set a background to the Label in HeaderTemplate.
HeaderTemplate doesn't display anything though, because binding is incorrect. Template is applied to the data set in Header property, which currently has null value.
So change code as in the example below (I tried with Expander, hopefully it will work for custom commonControls:ExpanderPanel):
<Expander IsExpanded="{Binding Path=IsExpanded, Mode=TwoWay}"
Header="{Binding ComplexObject}">
<HeaderedContentControl.HeaderTemplate>
<DataTemplate>
<StackPanel>
<Label Background="Green" Content="{Binding PropertyOfTheObject}"/>
</StackPanel>
</DataTemplate>
</HeaderedContentControl.HeaderTemplate>
</Expander>
Header is a dependency property and can be set via Binding. Header becomes a source for bindings in a HeaderTemplate. Or it can be some constant (Header="Click to expand"), resource (Header="{StaticResource ExpandTitle}") or complex content, e.g.:
<Expander.Header>
<TextBlock Text="Click to expand"/>
</Expander.Header>

WPF Scrollviewer won't show in ListView if contains one item bigger then ListView itself

I have problem in my application where I have ListView with dynamic items. Items might have variable height. In case there is a one item and its height is bigger than height of whole ListView, ScrollViewer won't show.
Problem could be simplified in following example:
<Window x:Class="WpfApplication15.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow"
Width="300"
Height="200">
<ListView Height="100" Margin="10">
<ListViewItem Height="150" Background="LimeGreen">
<TextBlock Text="ITEM" />
</ListViewItem>
</ListView>
</Window>
Why is that? Is there anything I can do with it?

Try to set the VirtualizingPanel.ScrollUnit attached property to Pixel:
<ListView Height="100" Margin="10" VirtualizingPanel.ScrollUnit="Pixel">
<ListViewItem Height="150" Background="LimeGreen">
<TextBlock Text="ITEM" />
</ListViewItem>
</ListView>

Different method of switching pages hub class in VS C# Windows Universal

So, this may seem rather basic, but so far, the only method I've found in C# for switching the current page in windows universal app is to use the header clicked method combined with setting the IsHeaderInteractive to true. this doesn't look or feel very intuitive considering it just sticks in the little "see more" button that you click on. Rather, how would I go about adding a click event to the entire hub section that changes the page. Here's what I have right now.
private void HubSection_Click(object sender, HubSectionHeaderClickEventArgs e)
{
switch (e.Section.Name)
{
case "China":
Frame.Navigate(typeof(SubtopicPage));
break;
case "Japan":
Frame.Navigate(typeof(SubtopicPage));
break;
}
}
here's the XAML as well:
<Page
x:Class="TestApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestApp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource SystemControlForegroundBaseHighBrush}">
<Hub Header="Countries App" Foreground="#FFC3BFBF" SectionHeaderClick="HubSection_Click" Name="CountryHub">
<HubSection x:Name="China" MinWidth="256" Height="460" Background="#FF343434" Header="China" IsHeaderInteractive="True">
<DataTemplate>
<Grid Height="460" Width="256" VerticalAlignment="Bottom">
<Image Source="Assets/chinaFlag.bmp"/>
</Grid>
</DataTemplate>
</HubSection>
<HubSection x:Name ="Japan" MinWidth="256" Height="460" Background="#FF565454" Header="Japan" IsHeaderInteractive="True">
<DataTemplate>
<Grid Height="460" Width="256" VerticalAlignment="Bottom">
<Image Source="Assets/japanFlag.bmp" Height="169"/>
</Grid>
</DataTemplate>
</HubSection>
<HubSection Width="256" Height="460" Background="#FF343434">
</HubSection>
<HubSection Width="256" Height="460" Background="#FF565454">
<DataTemplate>
<Grid Height="460" Width="256" VerticalAlignment="Bottom"/>
</DataTemplate>
</HubSection>
</Hub>
</Grid>
currently two of the four hub sections don't have content, but that's beside the point. Thanks for the help in advance.

Agree with RicardoPons, as I known there is no method to get selected item.
As a work round, You can add Tabbed event of the HubSection. You can know which HubSection was tapped.
For example:
<Hub Header="Countries App" Foreground="#FFC3BFBF" SectionHeaderClick="HubSection_Click" Name="CountryHub">
<HubSection x:Name="China" MinWidth="256" Height="460" Background="#FF343434" Header="China" IsHeaderInteractive="True" Tapped="{x:Bind HubSectionTapped}">
<DataTemplate>
<Grid Height="460" Width="256" VerticalAlignment="Bottom">
<Image Source="Assets/dog.jpg" />
</Grid>
</DataTemplate>
</HubSection>
<HubSection x:Name ="Japan" MinWidth="256" Height="460" Background="#FF565454" Header="Japan" IsHeaderInteractive="True" Tapped="{x:Bind HubSectionTapped}">
<DataTemplate>
<Grid Height="460" Width="256" VerticalAlignment="Bottom">
<Image Source="Assets/color.jpg" Height="169" />
</Grid>
</DataTemplate>
</HubSection>
</Hub>
In code behind:
private void HubSectionTapped(object sender, TappedRoutedEventArgs e)
{
var hubSectiona = sender as HubSection;
var name = hubSectiona.Name;
NaviagteMethod(name);
}
public void NaviagteMethod(string name)
{
switch (name)
{
case "China":
Frame.Navigate(typeof(SubtopicPage));
break;
case "Japan":
Frame.Navigate(typeof(SubtopicPage));
break;
}
}

I think for now it is the only way.
I read the official article in MSDN documentation it seems there is not an event or property to get the current selected item.
https://msdn.microsoft.com/en-us/library/windows/apps/xaml/windows.ui.xaml.controls.hub.aspx?cs-save-lang=1&cs-lang=csharp#code-snippet-1

Adding custom class with XAML in ListBox C# WPF

I have a class PC that contains Image, Label (with XAML design) and I want to get a list of PCs in ListBox in other class.
I tried this, but I get error System.Windows.Markup.XamlParseException:
pc p = new pc();
list_pc.Items.Add(p);
(where list_pc is a ListBox)
This is the XAML for a single PC:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
x:Class="TnCyberCafe.pc"
Title="pc"
SizeToContent="WidthAndHeight"
ShowInTaskbar="False"
WindowStartupLocation="CenterScreen"
WindowStyle="None"
AllowsTransparency="True"
Background="Transparent" Width="95" Height="104.982">
<Grid HorizontalAlignment="Left" Margin="0,10,-15,10" Width="110">
<Image x:Name="image" HorizontalAlignment="Left" Height="96" VerticalAlignment="Top" Width="100" Source="Resources/aaa.png" RenderTransformOrigin="0.5,0.26" Margin="0,-16,0,0"/>
<Label Content="Label" HorizontalAlignment="Left" Height="25" Margin="20,70,0,-10" VerticalAlignment="Top" Width="45"/>
</Grid>
</Window>
This is the XAML for my list_pc:
<ListBox x:Name="liste_pc" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
List PCs
</ListBox>

Your first question regarding the System.Windows.Markup.XamlParseException:
As Garry Vass mentioned something went wrong, but does not tell you exactly what happened. If you are developing in Visual Studio, Click on Exceptions under Debug Tab and enable Common Language Runtime Exceptions. This will point you to the Error Code.
For the second question you should have databindings and ListBox Itemtemplate as below
<ListBox x:Name="liste_pc" ItemsSource="{Binding PCList}" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding PCImageSource}" />
<Label Content="{Binding Path=PCName}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
where PCList is the observable collection of PC Class object items