We Keep Coding

In UWP, how to have action button inside ItemRepeater?

I have an issue putting an action button in my ItemRepeater. I proceeded the same way as I do in ListView :
<muxc:ItemsRepeater Margin="0,24,0,0" ItemsSource="{x:Bind ViewModel.Team.Events, Mode=OneWay}">
<muxc:ItemsRepeater.ItemTemplate>
<DataTemplate x:DataType="models:Event">
<controls:Expander
HorizontalContentAlignment="Left"
Header="{x:Bind Name, Mode=OneWay}"
ExpandDirection="Down"
>
<StackPanel HorizontalAlignment="Left" Padding="24">
<TextBlock Text="{x:Bind Name}" FontSize="36" />
<TextBlock Text="{x:Bind Description}" />
<StackPanel Spacing="4" Orientation="Horizontal">
<TextBlock Text="{x:Bind Start}" />
<TextBlock Text="-" />
<TextBlock Text="{x:Bind End}" />
</StackPanel>
<TextBlock Text="{x:Bind Type}" />
<Grid Width="1000" Margin="0,24,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="13*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="13*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<TextBlock FontSize="24" Text="Participations" />
<ListView ItemsSource="{x:Bind Participations}">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate x:DataType="models:Participation">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="9*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<TextBlock Text="{x:Bind Username}" />
<FontIcon Grid.Column="1" Glyph="{x:Bind Confirmed, Converter={StaticResource BooleanIconConverter}}"></FontIcon>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
<StackPanel Grid.Column="2">
<TextBlock FontSize="24" Text="Discrepancies" />
<Grid Margin="8">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<TextBlock Text="Player" />
<TextBlock Text="Type" Grid.Column="1"/>
<TextBlock Text="Reason" Grid.Column="2"/>
<TextBlock Text="Delay" Grid.Column="3"/>
</Grid>
<ListView ItemsSource="{x:Bind Discrepancies}">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate x:DataType="models:Discrepancy">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<TextBlock Text="{x:Bind Username}" />
<TextBlock Text="{x:Bind Type}" Grid.Column="1"/>
<TextBlock Text="{x:Bind Reason}" Grid.Column="2"/>
<TextBlock Text="{x:Bind DelayLength}" Grid.Column="3"/>
<Button Grid.Column="4" HorizontalAlignment="Right">
<Button.Flyout>
<Flyout>
<StackPanel>
<TextBlock Style="{ThemeResource BaseTextBlockStyle}" Text="Are you sure ?" Margin="0,0,0,12" />
<Button Click="DeleteDiscrepancy" Content="Yes" />
</StackPanel>
</Flyout>
</Button.Flyout>
<StackPanel Spacing="8" Orientation="Horizontal">
<FontIcon Glyph="" />
</StackPanel>
</Button>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</Grid>
<StackPanel Spacing="16" Orientation="Horizontal" FlowDirection="RightToLeft">
<Button Click="HandleClickAddDiscrepancy">
<StackPanel Spacing="8" Orientation="Horizontal">
<TextBlock Text="Add Discrepancy"></TextBlock>
<FontIcon Glyph=""/>
</StackPanel>
</Button>
<Button>
<StackPanel Spacing="8" Orientation="Horizontal">
<TextBlock Text="Edit Event"></TextBlock>
<FontIcon Glyph=""/>
</StackPanel>
</Button>
<Button>
<StackPanel Spacing="8" Orientation="Horizontal">
<TextBlock Text="Delete Event"></TextBlock>
<FontIcon Glyph=""/>
</StackPanel>
</Button>
</StackPanel>
</StackPanel>
</controls:Expander>
</DataTemplate>
</muxc:ItemsRepeater.ItemTemplate>
</muxc:ItemsRepeater>
And in my code-behind :
private void HandleClickAddDiscrepancy(object sender, RoutedEventArgs e) {
var evt = (sender as Button)?.DataContext as Event;
if(ViewModel.AddDiscrepancyCommand.CanExecute(evt)) {
ViewModel.AddDiscrepancyCommand.Execute(evt);
}
}
But in this code-behind method, the DataContext of my button is null. Shouldn't it be the currend element of the list, in which section the button I clicked is ?
How should I proceed to implement such feature ?
Thanks in advance !

WPF Buttons disappear on 55" screen

I developed a wpf-app with C# in Visual Studio 2017.
When deploying the software on the target devices (55" NEC Touchscreens, Resolution 1920x1080) the buttons I designed will disappear when the app launches, while the rest of the MainWindow stays in place. I set in <Window> tag Height="1080" Width="1920". When testing the software on my 1920x1080 screen on my desktop (22") the buttons were in place.
<Button Style="{StaticResource FlatButtonStyle}" Click="QuickGuide_Click" Name="QuickGuide" Background="#253135" Margin="375,531,1362,375">
<TextBlock Text="Quick Guide" TextAlignment="Center" Foreground="AntiqueWhite" VerticalAlignment="Center" FontFamily="xyz" FontSize="12" Margin="0,59,0,58"/>
</Button>
I have four Buttons, all with just different positions.
This is the whole XAML:
<Window x:Class="Startup.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Prometheus" Height="1080" Width="1920"
WindowState="Maximized"
WindowStyle="None" ResizeMode="NoResize"
WindowStartupLocation="CenterScreen"
>
<Window.Background>
<ImageBrush ImageSource="Resource/background_img.png"></ImageBrush>
</Window.Background>
<Grid Margin="12">
<Grid Margin="10,4,-10,361" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="120"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="1" Content="Start" HorizontalAlignment="Right" Margin="0,10,0,0" VerticalAlignment="Top" Width="101" RenderTransformOrigin="-0.013,0.15" Name="GetEventsBtn" Click="GetEvents" Height="34" IsDefault="True" TabIndex="2" Visibility="Hidden" />
<TextBlock HorizontalAlignment="Left" Margin="76,68,0,0" TextWrapping="Wrap" Text="Hi" VerticalAlignment="Top" FontFamily="" Height="60" Width="613" Foreground="#FFE0D2D2" FontSize="48"/>
<TextBlock HorizontalAlignment="Left" Margin="76,133,0,0" TextWrapping="Wrap" Text="Please choose one option below to get started quickly." VerticalAlignment="Top" FontFamily="" Height="46" Width="499" Foreground="#FFE0D2D2" FontSize="20"/>
</Grid>
<Button Style="{StaticResource FlatButtonStyle}" Click="QuickGuide_Click" Name="QuickGuide" Background="#253135" Margin="375,531,1362,375">
<TextBlock Text="Quick Guide" TextAlignment="Center" Foreground="AntiqueWhite" VerticalAlignment="Center" FontFamily="" FontSize="12" Margin="0,59,0,58"/>
</Button>
<Button Style="{StaticResource FlatButtonStyle}" Click="PlanAMeeting_Click" Name="PlanAMeeting" Margin="170,531,1576,375">
<TextBlock Grid.Row="1" Text="Plan a meeting" TextAlignment="Center" Foreground="AntiqueWhite" VerticalAlignment="Center" FontFamily="" FontSize="12"></TextBlock>
</Button>
<Button Style="{StaticResource FlatButtonStyle}" Click="CreateAMeeting_Click" Name="CreateAMeeting" Margin="375,319,1362,587">
<TextBlock Grid.Row="1" TextAlignment="Center" Foreground="AntiqueWhite" VerticalAlignment="Center" FontFamily="" FontSize="12"> Create a new <LineBreak></LineBreak> meeting for now</TextBlock>
</Button>
<Button Style="{StaticResource FlatButtonStyle}" Click="StartAMeeting_Click" Name="StartAMeeting" Margin="170,319,1576,587">
<TextBlock Grid.Row="1" TextWrapping="Wrap" TextAlignment="Center" Foreground="AntiqueWhite" VerticalAlignment="Center" FontFamily="" FontSize="12">Start a scheduled<LineBreak></LineBreak> meeting</TextBlock>
</Button>
<Grid MaxHeight="200" MaxWidth="600" Margin="1147,-306,39,306" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions >
<RowDefinition Height="60" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<TextBlock Name="GR1Z1" Foreground="White" FontSize="16" FontWeight="Bold" Grid.Row="1" Text="Please wait while loading..."></TextBlock>
<TextBlock Name="GR1Z2" Foreground="White" Grid.Row="2"></TextBlock>
<TextBlock Name="GR1Z3" Foreground="White" Grid.Row="3"></TextBlock>
<TextBlock Name="GR1Z4" Foreground="White" Grid.Row="4"></TextBlock>
<TextBlock Name="GR1Z5" Foreground="White" Grid.Row="5"></TextBlock>
</Grid>
<Grid MaxHeight="200" MaxWidth="600" Margin="1147,96,39,306">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<TextBlock Name="GR2Z1" Grid.Row="1" Foreground="White" FontSize="16" FontWeight="Bold"></TextBlock>
<TextBlock Name="GR2Z2" Grid.Row="2" Foreground="White"></TextBlock>
<TextBlock Name="GR2Z3" Grid.Row="3" Foreground="White"></TextBlock>
<TextBlock Name="GR2Z4" Grid.Row="4" Foreground="White"></TextBlock>
<TextBlock Name="GR2Z5" Grid.Row="5" Foreground="White"></TextBlock>
</Grid>
</Grid>
and the style
<Style TargetType="Button" x:Key="FlatButtonStyle">
<Setter Property="Background" Value="#253135"/>
<Setter Property="Foreground" Value="#253135"/>
<Setter Property="Width" Value="150"/>
<Setter Property="Height" Value="150"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border BorderThickness="0"
Background="{TemplateBinding Background}"
CornerRadius="12"
Name="Border">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="Border" Property="Background" Value="White" />
<Setter TargetName="Border" Property="BorderBrush" Value="Black" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

This is just to give you the idea:
I removed all Margin properties, in order to not use an absolute position, but relative positions if you want to achieve a dynamic layout.
I put your left part of the layout into a grid with three rows where the first two are for your headers text, and the last one for the buttons.
In the last row I put another grid with two rows and two columns where each cell contains a buttons
This part of markup corresponds to the next grid after your: <Grid Margin="12">:
<Grid HorizontalAlignment="Left">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock
Grid.Row="0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
FontSize="48"
Foreground="#FFE0D2D2"
Text="Hi"
TextWrapping="Wrap" />
<TextBlock
Grid.Row="1"
HorizontalAlignment="Left"
VerticalAlignment="Top"
FontSize="20"
Foreground="#FFE0D2D2"
Text="Please choose one option below to get started quickly."
TextWrapping="Wrap" />
<Grid Grid.Row="2">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button
Name="QuickGuide"
Grid.Row="0"
Grid.Column="0"
Background="#253135"
Style="{StaticResource FlatButtonStyle}">
<TextBlock
VerticalAlignment="Center"
FontSize="12"
Foreground="AntiqueWhite"
Text="Quick Guide"
TextAlignment="Center" />
</Button>
<Button
Name="PlanAMeeting"
Grid.Row="1"
Grid.Column="1"
Style="{StaticResource FlatButtonStyle}">
<TextBlock
VerticalAlignment="Center"
FontSize="12"
Foreground="AntiqueWhite"
Text="Plan a meeting"
TextAlignment="Center" />
</Button>
<Button
Name="StartAMeeting"
Grid.Row="1"
Grid.Column="0"
Style="{StaticResource FlatButtonStyle}">
<TextBlock
VerticalAlignment="Center"
FontSize="12"
Foreground="AntiqueWhite"
TextAlignment="Center"
TextWrapping="Wrap">
Start a scheduled
<LineBreak />
meeting
</TextBlock>
</Button>
<Button
Name="CreateAMeeting"
Grid.Row="0"
Grid.Column="1"
Style="{StaticResource FlatButtonStyle}">
<TextBlock
VerticalAlignment="Center"
FontSize="12"
Foreground="AntiqueWhite"
TextAlignment="Center">
Create a new
<LineBreak />
meeting for now
</TextBlock>
</Button>
</Grid>
</Grid>

Top Alignment inside WPF ListBox WPF XAML

I have a problem top aligning my stack panels/grids in my WPF window.
Any ideas on what I'm doing wrong? It seems to be occurring when I try to top align content within a listbox, that displays items using a horizontally aligned stackpanel.
If I set the Height of the Grid that holds the ListBox with ItemsSource = {Binding BoardMarkerRows} to say 1400, alignment then starts working correctly (but I wanted this grid to have an auto height).
Screenshot showing alignment off:
Here is my XAML
<Viewbox Grid.ColumnSpan="2" VerticalAlignment="Top">
<StackPanel VerticalAlignment="Top">
<StackPanel Name="StackPanelOptions">
<StackPanel Orientation="Horizontal ">
<Button Content="Init" HorizontalAlignment="Left" Margin="2" VerticalAlignment="Top" Width="75" Click="Init"/>
<Button Content="Rotate" HorizontalAlignment="Left" Margin="2" VerticalAlignment="Top" Width="75" Click="Button_Click_1"/>
<Button Content ="Start" Command="{Binding BoardMarkerStartUpdatesCommand}" Margin="2"/>
<Button Content ="Hide" Name="ButtonHideHeader" Margin="2" Click="ButtonHideHeader_Click"/>
<TextBlock Margin="2">
<TextBlock.Text>
<MultiBinding StringFormat="Status: {0}">
<Binding Path="BoardMarker.Status" />
</MultiBinding>
</TextBlock.Text>
</TextBlock>
<TextBlock Margin="2">
<TextBlock.Text>
<MultiBinding StringFormat="{}{0} Columns">
<Binding Path="BoardMarker.BoardMarkerColumns.Count " />
</MultiBinding>
</TextBlock.Text>
</TextBlock>
<TextBox Height="24" TextWrapping="Wrap" Text="{Binding BoardMarker.MaximumResultDate}" Width="271"/>
<CheckBox Content="Use Maximum Result Date" IsChecked="{Binding BoardMarker.UseMaximumResultDate}"/>
<Label Content="Number Rows"/>
<TextBox Height="24" TextWrapping="Wrap" Margin="2" Text="{Binding BoardMarker.BoardMarkerSettings.NumberRowsPerColumn}" Width="50"/>
<Label Content="Days Offset"/>
<TextBox Height="24" TextWrapping="Wrap" Margin="2" Text="{Binding BoardMarker.DaysOffset}" Width="50"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label Content="Show All Runners"/>
<TextBox Height="24" TextWrapping="Wrap" Margin="2" Text="{Binding BoardMarker.ShowAll}" Width="300"/>
</StackPanel>
</StackPanel>
<StackPanel Orientation="Vertical " VerticalAlignment="Top">
<StackPanel >
<Viewbox VerticalAlignment="Top" Stretch="Uniform">
<ListBox ItemsSource ="{Binding BoardMarker.BoardMarkerColumns}" Height="Auto" Width="Auto">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid VerticalAlignment="Top">
<ListBox Height="Auto"
ItemsSource="{Binding .BoardMarkerRows}" Margin="5" Width="Auto" HorizontalAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid >
<Grid Height="Auto" Background="LightGreen" Width="180" Visibility="{Binding ConverterParameter=ArkleEvent
, Converter={StaticResource BoardMarketRowTypeToVisibilityConverter}}" VerticalAlignment="Top" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="75"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--<TextBlock Text="{Binding RowType}" />-->
<TextBlock Text="{Binding ArkleEvent.Name}" Margin="2" Width="Auto" Height="Auto" FontWeight="Bold" />
<TextBlock Grid.Column="1" HorizontalAlignment="Right" Text="{Binding ArkleEvent.Going}" Margin="2" Width="Auto" Height="Auto" />
</Grid>
<Grid Background="LightBlue" HorizontalAlignment="Left" Height="Auto" VerticalAlignment="Top" Width="180"
Visibility="{Binding ConverterParameter=ArkleMarket, Converter={StaticResource BoardMarketRowTypeToVisibilityConverter}}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="110"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" HorizontalAlignment="Left" FontWeight="Bold">
<TextBlock.Text>
<MultiBinding StringFormat="{}{0:HH:mm} {1}">
<Binding Path="ArkleMarket.ExpectedOffDate" />
<!--<Binding Path="RowType" />-->
<Binding Path="ArkleMarket.RaceLength" />
</MultiBinding>
</TextBlock.Text>
</TextBlock>
<TextBlock Grid.Column="1" HorizontalAlignment="Right">
<TextBlock.Text>
<MultiBinding StringFormat=" {0} Run {1} NR">
<Binding Path="ArkleMarket" Converter="{StaticResource ArkleMarketToNumberRunnersConverter}" ConverterParameter="StillRunning" />
<!--<Binding Path="RowType" />-->
<Binding Path="ArkleMarket" Converter="{StaticResource ArkleMarketToNumberRunnersConverter}" ConverterParameter="NR" />
<!--<Binding Path="ArkleMarket" Converter="{StaticResource ArkleMarketToNumberRunnersConverter}" ConverterParameter=",ConverterParameter=NR />-->
</MultiBinding>
</TextBlock.Text>
</TextBlock>
</Grid>
<TextBlock Text="---------------------------------" Margin="0,-3,0,-3" Foreground="DodgerBlue"
Visibility="{Binding ConverterParameter=ArkleSelectionStaticFirst,
Converter={StaticResource BoardMarketRowTypeToVisibilityConverter}}"/>
<Grid
Visibility="{Binding ConverterParameter=ArkleSelectionStatic,
Converter={StaticResource BoardMarketRowTypeToVisibilityConverter}}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="88"/>
<ColumnDefinition Width="35"/>
<ColumnDefinition Width="38"/>
</Grid.ColumnDefinitions>
<!--<TextBlock Text="{Binding RowIndex}" Margin="2" Width="Auto" Height="Auto" />-->
<TextBlock Grid.Column="0" Text="{Binding ArkleSelection.SelectionNumber,StringFormat={}{0:00}}" Margin="2" Width="15" />
<TextBlock Grid.Column="1" Text="{Binding ArkleSelection.Name}" Margin="2" Width="100" />
<TextBlock Grid.Column="2" Text="{Binding ArkleSelection.PriceCurrent}" Margin="2" Width="Auto" HorizontalAlignment="Right" />
<TextBlock Grid.Column="3" Text="{Binding ArkleSelection.OpeningPrice}" Margin="2" Width="Auto" Foreground="DarkGray" HorizontalAlignment="Right" TextDecorations="Strikethrough" />
</Grid>
<Grid Visibility="{Binding ConverterParameter=ArkleSelectionRotating, Converter={StaticResource BoardMarketRowTypeToVisibilityConverter}}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="88"/>
<ColumnDefinition Width="35"/>
<ColumnDefinition Width="38"/>
</Grid.ColumnDefinitions>
<!--<TextBlock Text="{Binding RowIndex}" Margin="2" Width="Auto" Height="Auto" />-->
<TextBlock Grid.Column="0" Text="{Binding ArkleSelection.SelectionNumber,StringFormat={}{0:00}}" Margin="2" Width="15" />
<TextBlock Grid.Column="1" Text="{Binding ArkleSelection.Name}" Margin="2" Width="100" />
<TextBlock Grid.Column="2" Text="{Binding ArkleSelection.PriceCurrent}" Margin="2" Width="Auto" HorizontalAlignment="Right" />
<TextBlock Grid.Column="3" Text="{Binding ArkleSelection.OpeningPrice}" Margin="2" Width="Auto" Foreground="DarkGray" HorizontalAlignment="Right" />
</Grid>
<StackPanel Visibility="{Binding ConverterParameter=TextRow,
Converter={StaticResource BoardMarketRowTypeToVisibilityConverter}}">
<Label Content="{Binding Text}" />
</StackPanel>
<Grid Visibility="{Binding ConverterParameter=ArkleSelectionResult,
Converter={StaticResource BoardMarketRowTypeToVisibilityConverter}}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="88"/>
<ColumnDefinition Width="35"/>
<ColumnDefinition Width="38"/>
</Grid.ColumnDefinitions>
<!--<TextBlock Text="{Binding RowIndex}" Margin="2" Width="Auto" Height="Auto" />-->
<TextBlock Grid.Column="0" Text="{Binding ArkleSelection.SelectionNumber,StringFormat={}{0:00}}" Margin="2" Width="15" />
<TextBlock Grid.Column="1" Text="{Binding ArkleSelection.Name}" Margin="2" Width="100" />
<TextBlock Grid.Column="2" Text="{Binding ArkleSelection.PriceCurrent}" Margin="2" Width="Auto" HorizontalAlignment="Right" />
<TextBlock Grid.Column="3" Text="{Binding ArkleSelection.FinishingPosition,Converter={StaticResource ArkleSelectionFinishPositionToOrdinalDisplayText}}" Margin="2" Width="Auto" HorizontalAlignment="Right" />
</Grid>
<StackPanel Visibility="{Binding ConverterParameter=ArkleSelectionNonRunner, Converter={StaticResource BoardMarketRowTypeToVisibilityConverter}}">
<StackPanel Orientation="Horizontal">
<!--<TextBlock Text="{Binding RowIndex}" Margin="2" Width="Auto" Height="Auto" />-->
<TextBlock Text="{Binding ArkleSelection.SelectionNumber,StringFormat={}{0:00}}" Margin="2" Width="15" />
<TextBlock Text="{Binding ArkleSelection.Name}" Margin="2" Width="100" Foreground="DarkGray" />
<TextBlock Text="NR" Margin="2" Width="30" Foreground="DarkGray" />
<TextBlock Text="{Binding ArkleSelection.OpeningPrice}" Margin="2" Width="30" Foreground="DarkGray" />
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Viewbox>
</StackPanel>
</StackPanel>
</StackPanel>
</Viewbox>
</Grid>

Add to the parent-listBox VerticalContentAlignment="Top"
Edit:
Little demo, with minimal changes from the source:
<Viewbox Grid.ColumnSpan="2" VerticalAlignment="Top">
<StackPanel VerticalAlignment="Top">
<StackPanel Orientation="Vertical " VerticalAlignment="Top">
<StackPanel Height="338" >
<Viewbox VerticalAlignment="Top" Stretch="Uniform">
<ListBox VerticalContentAlignment="Top" Height="Auto" Width="Auto">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid VerticalAlignment="Top">
<ListBox Height="Auto" Margin="5" Width="Auto" HorizontalAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Width="40" Height="40">Some Child</TextBlock>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.Items>
<TextBlock />
<TextBlock />
<TextBlock />
</ListBox.Items>
</ListBox>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.Items>
<ListBoxItem>
<TextBlock />
<ListBoxItem.Style>
<Style TargetType="ListBoxItem" >
<Setter Property="Template" >
<Setter.Value>
<ControlTemplate>
<Border Margin="5" Background="Red" Height="150" Width="40" >
<TextBlock >Demo tol item</TextBlock>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBoxItem.Style>
</ListBoxItem>
<TextBlock />
<TextBlock />
<TextBlock />
</ListBox.Items>
</ListBox>
</Viewbox>
</StackPanel>
</StackPanel>
</StackPanel>
</Viewbox>

I dont have enough reputation to post this as a comment, so I'm posting as an answer.
I believe your problem may be in your ListBox.ItemTemplate:
...
<ListBox.ItemTemplate>
<DataTemplate>
<Grid VerticalAlignment="Top">
<ListBox Height="Auto"
ItemsSource="{Binding .BoardMarkerRows}" Margin="5" Width="Auto" HorizontalAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid > // Missing vertical allignment in this grid
<Grid Height="Auto" Background="LightGreen" Width="180" Visibility="{Binding ConverterParameter=ArkleEvent
, Converter={StaticResource BoardMarketRowTypeToVisibilityConverter}}" VerticalAlignment="Top" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="75"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--<TextBlock Text="{Binding RowType}" />-->
<TextBlock Text="{Binding ArkleEvent.Name}" Margin="2" Width="Auto" Height="Auto" FontWeight="Bold" />
<TextBlock Grid.Column="1" HorizontalAlignment="Right" Text="{Binding ArkleEvent.Going}" Margin="2" Width="Auto" Height="Auto" />
</Grid>
...

How to access the texblocks in a listbox?

I have a listbox which I can successfully update with the data but now I want to access two specific textblocks which I want to collapse and make the other visible. here is my xaml:
<ListBox Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" HorizontalAlignment="Stretch" Name="myPM_MListBox" Margin="-5,0,-5,0" SelectionChanged="myPMListBox_SelectionChanged">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0,0,0,0" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Grid.Row="0" Grid.Column="0" Margin="5,0,0,0" Background="#FF009E49" BorderThickness="1" BorderBrush="#FF505050">
<TextBlock Margin="5,5,5,5" Text="Message Date" FontSize="16" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#FFFFFFFF" FontWeight="Normal" />
</Border>
<Border Grid.Row="0" Grid.Column="1" Margin="0,0,5,0" Background="#FFEFEFEF" BorderThickness="1" BorderBrush="#FF505050">
<TextBlock Margin="5,5,5,5" x:Name="PMMessagePubDate" Text="{Binding shdMsgPublishTime}" FontSize="16" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#FF000000" FontWeight="Normal" />
</Border>
<Border Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Margin="5,0,5,0" Background="#FFEFEFEF" BorderThickness="1,1,1,0" BorderBrush="#FF505050">
<TextBlock Margin="5,5,5,5" x:Name="PM_MLimitedBody" Text="{Binding shdMessageText}" FontSize="16" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#FF000000" FontWeight="Normal" />
</Border>
<Border Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Margin="5,0,5,0" Background="#FFEFEFEF" BorderThickness="1,0,1,1" BorderBrush="#FF505050">
<TextBlock Margin="5,5,5,5" x:Name="PM_MFullBody" Text="Show more..." FontSize="16" HorizontalAlignment="right" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="Blue" FontWeight="Normal" Tapped="ShowFullBody_Tap" />
</Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I want to hide PM_MLimitedBody textblock and show the PM_MFullBody textblock for the ShowFullBody_Tap event handler I have. But seems like I can't access the Visibility properties of these textblok in my .cs file. is there a way for me to access these textblock's visibility property in my .cs file?

You can use the sender of ShowFullBody_Tap will be the TextBox that defines that event. You can then use VisualTreeHelper.GetParent(...) to get the Border and then the Grid and then look at Grid.Children to find the other borders with their textboxes.

Complete DataTemplate clickable?

I have following DataTemplate for usage within my phone.LongListSelector in my XAML view:
<DataTemplate x:Name="myLocationsListTemplate">
<StackPanel Margin="0,0,0,15">
<Grid VerticalAlignment="Top" Margin="0,0,5,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="120" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" TextTrimming="WordEllipsis" Text="{Binding Name}" TextWrapping="NoWrap" Style="{StaticResource PhoneTextLargeStyle}" VerticalAlignment="Top" Margin="0,0,0,22" />
<Image Grid.Column="0" Width="138" Height="25" Source="/mAppData/stars-3.png" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="0"/>
<TextBlock Grid.Column="1" Text="{Binding DistanceInMeterFormatted, FallbackValue=fallback, TargetNullValue=nullvalue, Mode=OneWay}" TextWrapping="NoWrap" Style="{StaticResource PhoneTextSubtleStyle}" HorizontalAlignment="Right" Margin="0,0,-3,20" VerticalAlignment="Bottom"/>
<TextBlock Grid.Column="1" Text="vor 10 min." TextWrapping="NoWrap" Margin="0" Style="{StaticResource PhoneTextSubtleStyle}" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
</Grid>
<Grid VerticalAlignment="Top" Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Width="100" Height="100" Source="{Binding PreviewImg1}"/>
<Image Grid.Column="1" Width="100" Height="100" Source="{Binding PreviewImg2}"/>
<Image Grid.Column="2" Width="100" Height="100" Source="{Binding PreviewImg3}"/>
<Image Grid.Column="3" Width="100" Height="100" Source="{Binding PreviewImg4}"/>
</Grid>
</StackPanel>
</DataTemplate>
Now I want the complete DataTemplate Content made "clickable". Means: If user clicks on a TextBlock or one of the four Images or on whatever displayed in die List, an action should be performed with a databound property (saying the Name from the bound data should be given).
Any ideas how to get this working?

Why don't you just stick your entire template into a button? You can style the button if needs be to remove any default appearance you don't like. eg.
<Style x:Key="BlankButtonStyle" TargetType="ButtonBase">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ButtonBase">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="Transparent" />
</Style>