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.

Responsive Windows App Element

Is there any XAML element that will automatically wrap to a new line for sub elements that don't have enough room on a line?
What I mean is that on a wide screen I'll get:
Box1 Box2 Box3
And on a narrow one:
Box1 Box2
Box3
Without having to listen to events and fix it by code.
The comments mention VariableSizedWrapGrid as a solution. But I can't figure out how to make it wrap.

You can use a simple GridView to do it. If you don't set a Height, it should work like a charm.
<GridView Name="xConcerts" ItemsSource="{x:Bind Artist.UpcomingEvents, Mode=OneWay}">
<GridView.ItemTemplate>
<DataTemplate x:DataType="songkick:EventExt">
<Border CornerRadius="8" Background="{ThemeResource ThemeGrayHighColorBrush}" Opacity="0.8">
<StackPanel Margin="18,2">
<TextBlock Text="{x:Bind FullDisplayDate, Converter={StaticResource FormatStringToDateDayConverter}}" Style="{ThemeResource ThemeDateBoldStyle}"/>
<TextBlock Text="{x:Bind FullDisplayDate, Converter={StaticResource FormatStringToDateMonthConverter}}" Style="{ThemeResource ThemeDateBoldStyle}" Margin="0,-4,0,0"/>
</StackPanel>
</Border>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemContainerTransitions>
<TransitionCollection>
<RepositionThemeTransition/>
</TransitionCollection>
</GridView.ItemContainerTransitions>
</GridView>

According to your requirement, using the WrapPanel control in WinRTXamlToolkit will meet your needs.
Sample code here:
<Page x:Class="TestDemo.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Tool="using:WinRTXamlToolkit.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:TestDemo"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Tool:WrapPanel>
<Button Width="200" Margin="10">1</Button>
<Button Width="200" Margin="10">2</Button>
<Button Width="200" Margin="10">3</Button>
</Tool:WrapPanel>
</Page>
And the output here:

UWP CommandBar - Content is completely separate context?

I've been trying to implement Microsoft's hamburger pattern in my own way for some time.
Final result was the following:
AppShell for containing current page and hamburger menu (menu always visible)
In Appshell, Grid with two rows: one 48px in height, one one-start height.
In first row, added a commandbar (global), and hamburger button (togglebutton with custom style for being 48px wide and tall, with the hamburger fonticon in the center)
In second row, SplitView with a ListBox on the Pane, and a Frame in the Content.
This way one has control over the content, while displaying a global menu and command bar. On the Navigated event of the Frame, I update the CommandBar to pull the primary and secondary commands from the Frame's Content's properties (I use a custom page control with those properties), and the content of the CommandBar (which is, of now, a single TextBlock with binding).
However, I wanted to move the ToggleButton into the CommandBar. It worked nicely, except the binding (IsChecked of ToggleButton is bound to IsPaneOpen of SplitView) does not work. I use the regular ElementName targeting, and would prefer to not to use a ViewModel property.
Does the CommandBar.Content use a different context? Or why doesn't the ElementName reference work?

Only way, how I was able to bind to AppBarToggleButton was to set the DataContext in the code behind.
XAML:
<Page.BottomAppBar>
<CommandBar x:Name="CommandBar">
<AppBarToggleButton x:Name="Button" IsChecked="{Binding IsPaneOpen, Mode=TwoWay}" Icon="Home" Label="Button"/>
</CommandBar>
</Page.BottomAppBar>
Code behind:
protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
Button.DataContext = SplitView;
}

This works for me:
<Page
x:Class="StackOverflowTests.MainPage"
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">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="48"/>
<RowDefinition/>
</Grid.RowDefinitions>
<CommandBar>
<CommandBar.Content>
<AppBarToggleButton Icon="Globe" IsChecked="{Binding ElementName=SplitView,Path=IsPaneOpen,Mode=TwoWay}"/>
</CommandBar.Content>
</CommandBar>
<SplitView Grid.Row="1" Name="SplitView" IsPaneOpen="{x:Bind Appbarbutton.IsChecked.Value,Mode=OneWay}">
<SplitView.Pane>
<ListBox>
<ListBoxItem>Foo</ListBoxItem>
<ListBoxItem>Bar</ListBoxItem>
</ListBox>
</SplitView.Pane>
<SplitView.Content>
<TextBlock>stuff here</TextBlock>
</SplitView.Content>
</SplitView>
</Grid>
<Page.BottomAppBar>
<CommandBar>
<CommandBar.Content>
<AppBarToggleButton Name="Appbarbutton" Icon="Home" />
</CommandBar.Content>
</CommandBar>
</Page.BottomAppBar>
</Page>

You have bind DataContext:
Example:
<Page.BottomAppBar >
<CommandBar x:Name="commandBar" DataContext="{Binding}">
<CommandBar.Content>
<StackPanel Margin="0,0">
<ListView ItemsSource="{Binding Confirmation.AvailableValues}" ItemContainerStyle="{StaticResource ListViewItemBase}">
<ListView.ItemTemplate>
<DataTemplate>
<Button Content="{Binding Value.DisplayName}" Command="{Binding DataContext.Confirm, ElementName=commandBar}" CommandParameter="{Binding Value}" HorizontalAlignment="Center"></Button>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Line Margin="5" X1="0" X2="1000" Y1="0" Y2="0" HorizontalAlignment="Stretch" Height="2" Stroke="#888888" StrokeThickness="1" ></Line>
</StackPanel>
</CommandBar.Content>
</CommandBar>
</Page.BottomAppBar>

WPF Expander overlay used in ItemsControl

I've been searching for some time but all solution I find only tackle parts of my issue.
I'd like to have an ItemsControl with each item containing an Expander. On expanding, the Expander's content should be shown as an overlay overlapping the other items in the ItemsControl and not moving them down.
The following XAML-Code does exactly as supposed to with one big issue: The Expander's content does not overlap the other items but is hidden behind them. I suppose this is due to the ZIndex as the following items in the ItemsControl are added after the Expander's content.
I managed to set one single Expander's ZIndex to 99 using style triggers but this seems to be a too complicated and error-prone solution. Any thoughts?
<Window x:Class="WpfTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow"
Height="350"
Width="525">
<Window.Resources>
<x:Array x:Key="items"
Type="sys:String"
xmlns:sys="clr-namespace:System;assembly=mscorlib">
<sys:String>One</sys:String>
<sys:String>Two</sys:String>
<sys:String>Three</sys:String>
<sys:String>Four</sys:String>
</x:Array>
<DataTemplate x:Key="template">
<Grid Background="Red" Margin="0,0,0,10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Text="{Binding}" />
<Canvas Height="25" Grid.Row="1">
<Expander ExpandDirection="Down" Header="Header" Grid.Row="1">
<Expander.Content>
<TextBlock Height="80" Text="Content" Background="Yellow" />
</Expander.Content>
</Expander>
</Canvas>
</Grid>
</DataTemplate>
</Window.Resources>
<Grid>
<ScrollViewer>
<ItemsControl ItemsSource="{StaticResource items}"
ItemTemplate="{StaticResource template}"
HorizontalContentAlignment="Stretch">
</ItemsControl>
</ScrollViewer>
</Grid>
</Window>

It's going to be tricky to achieve this in the way you are attempting it. The problem is the nested structure -- since each Canvas is nested inside a Grid, you won't be able to control its z-index relative to other Canvas element. To illustrate this, here is a schematic of the visual tree created by your current markup:
<StackPanel> <!-- items panel -->
<ContentPresenter> <!-- item wrapper -->
<Grid>
<Canvas>
</Canvas>
</Grid>
</ContentPresenter>
<ContentPresenter> <!-- item wrapper -->
<Grid>
<Canvas>
</Canvas>
</Grid>
</ContentPresenter>
</StackPanel>
With reference to the above, your goal will be to have the Canvas elements appear in front of the siblings of its parent ContentPresenter. This is impossible in this hierarchy, because ZIndex only applies relative to siblings of the same parent element. Now, there might be ways you could massage the above into a flat structure so that you could then apply ZIndex your expanded content as needed.
However, I think an easier and more natural approach would be to use Popup elements for the expanded content. A Popup is a framework primitive that is located outside of the visual tree, and will always sit on top of your other content. You can use a ToggleButton or something similar to create the "expand" effect. For example:
<StackPanel Grid.Row="1">
<ToggleButton x:Name="PopupToggle" Content="Expand" />
<Popup IsOpen="{Binding IsChecked,ElementName=PopupToggle}">
<TextBlock Height="80" Text="Content" Background="Yellow" />
</Popup>
</StackPanel>

How to adapt the app to multiple resolution in Windows8

I have the layout code below in xaml
<Grid>
<StackPanel x:Name="TestStackPanel" Grid.Row="2" Orientation="Horizontal">
<ScrollViewer x:Name="TestScrollViewer" Height="300" VerticalScrollBarVisibility="Auto">
<GridView x:Name="TestGridView"
Width="940"
Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
ItemTemplate="{StaticResource TestTemplate}"
ItemsPanel="{StaticResource TestItemPanelTemplate}"
ItemContainerStyle="{StaticResource TestItemStyle}"
SelectionMode="None"
HorizontalAlignment="Left"/>
</ScrollViewer>
<Button x:Name="TestButton" Content="ClickMe" VerticalAlignment="Bottom" Margin="10,5,0,0" Click="TestButton_Click"/>
</StackPanel>
</Grid>
This displays well in 1366*768 resolution, but if I change the resolution to 2560*1400, it couldn't displays as expected, I know it's certain, but how to adpat the layout to different resolutions? I have tried to add a ViewBox to encapsulate the Grid, it works well in FullScreenLandScape view, but when I change the app to Snap view, the Grid displays in a samll space.
Anyone can help?

Register to the LayoutUpdated event at the UI element.
And re-calculate the layout according to Window.Current.Bounds.Width.