Develop Reference

Vertical scrollbar for a listview within an expander

I have a grid(user-control) as follows with rows 1:5 being an Expander which holds a ListView, however my attempts to get the Vertical scrollbar for the ListView within the Expander have not been successful.
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="*"></RowDefinition> <!--Expander with ListView-->
<RowDefinition Height="*"></RowDefinition> <!--Expander with ListView-->
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
The Expander with the ListView is as below, I also attempted enclosing the Expander within a ScrollViewer but then the sizing of the collapsed header takes up all the space
<Expander IsExpanded="True"
Background="#1F4762"
BorderBrush="#1F4762"
Foreground="#FFEEEEEE"
Grid.Row="1"
Visibility="{qc:Binding '$P.View.Count > 0 ? Visibility.Visible: Visibility.Collapsed', P={Binding AListCVS}}"
BorderThickness="1,1,1,0">
<Expander.Header>
<TextBlock FontWeight="Bold"
VerticalAlignment="Center"
Margin="5"
FontSize="14"
Width="200">
<Run Text="A Listers : " />
<Run Text="{Binding AListCVS.View.Count, Mode=OneWay}"></Run>
</TextBlock>
</Expander.Header>
<Expander.Content>
<ListView
HorizontalContentAlignment="Stretch"
AlternationCount="2"
Style="{StaticResource aCompareTemplate}"
ItemTemplateSelector="{StaticResource ATemplateSelector}"
x:Name="lview"
ItemsSource="{Binding AListCVS.View}"
Visibility="{Binding }">
</ListView>
</Expander.Content>
</Expander
The list template is as follows
<Style x:Key="aCompareTemplate"
TargetType="ListView">
<!--Control Template-->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListView">
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0"
MinWidth="900"
VerticalAlignment="Center"
Background="#D4E3F4">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"></ColumnDefinition>
<ColumnDefinition MinWidth="200"></ColumnDefinition>
<ColumnDefinition MinWidth="400"></ColumnDefinition>
<ColumnDefinition Width="200*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border Grid.Column="0"
Height="30">
<TextBlock Text=""
FontWeight="Bold"
VerticalAlignment="Center"
HorizontalAlignment="Center"
TextWrapping="Wrap" />
</Border>
<Border Grid.Column="1"
Height="30">
<TextBlock Text=""
FontWeight="Bold"
HorizontalAlignment="Left"
VerticalAlignment="Center" />
</Border>
<Border Grid.Column="2"
Height="30">
<TextBlock Text="A Data"
FontWeight="Bold"
HorizontalAlignment="Left"
VerticalAlignment="Center" />
</Border>
<Border Grid.Column="3"
Height="30">
<TextBlock Text="B Data"
FontWeight="Bold"
HorizontalAlignment="Left"
VerticalAlignment="Center" />
</Border>
</Grid>
<ItemsPresenter Grid.Row="1"></ItemsPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
Any pointers are much appreciated.

Usually the problem with Scroll is due to the container in which it is inserted allow infinite size, and therefore it does not appear. Possibly you can correct this by setting a MaxHeight to your Grid.Row, or to your ListView.
Edit.: as was suggested by #FelixD. and as my above comment helped to solve the problem I am putting it here so the question can be marked as resolved.

UWP C# - Problems with Grid in a Listview

I am writing a little app in C# for windows 10, and I have a listview as below, which is already in a grid.
However the grid I am adding to the listview doesn't expand out to fill the space, it is just grows as wide as the length of the data contained in the field bound to it. What am I doing wrong? I don't want to use fixed fields, I'd prefer to use a relative proportion of the page width.
Help!
<Grid x:Name="RootGrid" Margin="5" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="FolderMate" Style="{StaticResource SampleHeaderTextStyle}"/>
<Button x:Name="GetFilesAndFoldersButton"
Grid.Row="1"
Grid.Column="0"
Content="Get files and folders"
Click="GetFilesAndFoldersButton_Click"
Margin="0,10,0,10"/>
<TextBlock x:Name="FileInfo"
Grid.Row="1"
Grid.Column="1"
Grid.ColumnSpan="3"
VerticalAlignment="Center"
Margin="10"
Foreground="Green"/>
<Button x:Name="ResetButton"
Grid.Row="1"
Grid.Column="5"
Content="reset"
HorizontalAlignment="Right"
Click="ResetButton_Click"
Margin="0,10,10,0"/>
<!--<ScrollViewer VerticalScrollMode="Auto"
VerticalScrollBarVisibility="Auto"
Grid.Row="2"
Grid.ColumnSpan="5"
BorderBrush="Black"
BorderThickness="2"
Background="Chartreuse"
Margin="0,5,0,5">-->
<ListView x:Name="ThisList"
Grid.Row="2"
Grid.ColumnSpan="5"
Background="LightBlue"
Margin="5"
IsItemClickEnabled="True"
ItemClick="ThisList_ItemClick">
<ListView.ItemTemplate>
<DataTemplate>
<Grid BorderThickness="1" BorderBrush="Red" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Background="Aquamarine" Grid.Column="0">
<SymbolIcon Symbol="Folder" HorizontalAlignment="Center" Margin="15 0"/>
</Border>
<Border Background="Yellow" Grid.Column="1">
<TextBlock Text="{Binding FName}" Margin="10" />
</Border>
<Border Background="Cyan" Grid.Column="2">
<TextBlock Text="{Binding FTime}" Margin="10"/>
</Border>
<Border Background="Tomato" Grid.Column="3">
<TextBlock Text="{Binding FSize}" HorizontalAlignment="Right" Margin="10"/>
</Border>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<!--</ScrollViewer>-->
</Grid>

You need to set the HorizontalContentAlignment inside ListView.ItemContainerStyle for ListViewItem to Stretch.
Your Full XAML For ListView will be like below.
<ListView x:Name="ThisList"
Grid.Row="2"
Grid.ColumnSpan="5"
Background="LightBlue"
Margin="5"
ItemsSource="{Binding data}"
IsItemClickEnabled="True"
ItemClick="ThisList_ItemClick">
<ListView.ItemTemplate>
<DataTemplate>
<Grid BorderThickness="1" BorderBrush="Red" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Background="Aquamarine" Grid.Column="0">
<SymbolIcon Symbol="Folder" HorizontalAlignment="Center" Margin="15 0"/>
</Border>
<Border Background="Yellow" Grid.Column="1">
<TextBlock Text="{Binding FName}" Margin="10" />
</Border>
<Border Background="Cyan" Grid.Column="2">
<TextBlock Text="{Binding FTime}" Margin="10"/>
</Border>
<Border Background="Tomato" Grid.Column="3">
<TextBlock Text="{Binding FSize}" HorizontalAlignment="Right" Margin="10"/>
</Border>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
See in the end, How I added ItemContainerStyle Targeting Only ListViewItem.
Final Output will be
Good Luck.

Might be it will helpful for you. I had used like that-
<ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Auto">
<StackPanel>
<ListView x:Name="UserMessageList">
<ListView.ItemTemplate>
<DataTemplate x:DataType="local1:MessageModel">
<StackPanel>
//Add your conrole
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</ScrollViewer>

WPF Grid Rows and ResizeGrip do not anchor correctly

once again after hours of struggle with WPF I need your awesome help.
I have read many different StackOverflows, nonetheless, I cannot seem to get my current situation working and I don't understand why. I have chosen to use a Grid in contrast to a DockPanel and I would like to keep it that way as well. According to what I have read the row definitions are ok, the second row of the template grid should automatically stretch. Unfortunately it does not, as it seems that the last row of the grid does not move away.
This is how my window looks at the moment:
As you can see is the blue row not at the bottom of the window. In fact, the window should not be that long in the first place.
This is the code snippet of my Generic.xaml file that is relevant to the problem.
The way it works is, that I have a Skin with a custom control group:
<!-- Window START-->
<ControlTemplate x:Key="WindowTemplate" TargetType="{x:Type Window}">
<Border BorderBrush="LightGray" BorderThickness="1" Background="Red" Padding="0" VerticalAlignment="Stretch">
<Grid x:Name="WindowRoot" Margin="0" VerticalAlignment="Top" Background="Blue" MouseDown="Window_MouseDown">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="75"/>
<ColumnDefinition Width="25"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<!-- HEADER START-->
<Frame x:Name="header_background" Grid.Column="0" Grid.ColumnSpan="4" Grid.Row="0" Background="#ddd" BorderThickness="0 0 0 1" BorderBrush="#c9c9c9"/>
<Image x:Name="LogoICon" Source="/MTApp;component/Resources/Icon.png" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Left" Margin="10 8"/>
<Label x:Name="windowTitle" Grid.ColumnSpan="2" Content="{TemplateBinding Title}" VerticalAlignment="Center" Foreground="#393939" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" FontFamily="Segoe UI Regular" FontSize="12"/>
<Grid Grid.Column="2" Grid.ColumnSpan="2" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="35"/>
<ColumnDefinition Width="18"/>
<ColumnDefinition Width="19"/>
<ColumnDefinition Width="18"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="10"/>
<RowDefinition Height="20" />
<RowDefinition Height="10" />
</Grid.RowDefinitions>
<Button x:Name="minimizeBtn" Content="0" FontFamily="Marlett" Foreground="#393939" Background="Transparent" BorderThickness="0" Grid.Row="1" Grid.Column="1" Margin="3 0 0 0" Click="minimizeBtn_Click"/>
<Button x:Name="maximizeBtn" Content="2" FontFamily="Marlett" Foreground="#393939" Background="Transparent" BorderThickness="0" Grid.Row="1" Grid.Column="2" Margin="3 0 0 0" Click="maximizeBtn_Click"/>
<Button x:Name="quitBtn" Content="r" FontFamily="Marlett" Foreground="#393939" Background="Transparent" BorderThickness="0" Grid.Row="1" Grid.Column="3" Margin="3 0 0 0" Click="quitBtn_Click"/>
</Grid>
<!-- HEADER END-->
<!-- CONTENT START-->
<ContentPresenter Grid.Column="0" Grid.ColumnSpan="4" Grid.Row="1" Height="Auto"/>
<!-- CONTENT END-->
<!-- FOOTER START-->
<Border x:Name="footer_background" Grid.Column="0" Grid.ColumnSpan="4" Grid.Row="2" Height="25">
<ResizeGrip />
</Border>
<!-- FOOTER END-->
</Grid>
</Border>
</ControlTemplate>
<!-- Window END-->
<Style x:Key="LightSkin_0_1" TargetType="Window">
<Setter Property="WindowStyle" Value="None" />
<Setter Property="AllowsTransparency" Value="True" />
<Setter Property="ResizeMode" Value="CanResizeWithGrip" />
<Setter Property="Template" Value="{StaticResource WindowTemplate}" />
<Style.Triggers>
<DataTrigger Binding="{Binding WindowState}" Value="Maximized">
</DataTrigger>
</Style.Triggers>
</Style>
And my MainWindow.xaml is:
<Window x:Class="UHashIt.MainWindow"
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:local="clr-namespace:UHashIt"
mc:Ignorable="d"
Title="Window title"
WindowStartupLocation="CenterScreen"
MinHeight="275"
MinWidth="700"
Width="700"
Style="{DynamicResource LightSkin_0_1}">
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- Menu -->
<Border VerticalAlignment="Top" Padding="5" Background="#f2f2f2" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" BorderThickness="0 0 0 1" BorderBrush="LightGray">
<DockPanel >
<Menu DockPanel.Dock="Left">
<MenuItem Header="File">
<MenuItem Header="Add File" />
<MenuItem Header="Export.." />
<Separator />
<MenuItem Header="Close"/>
</MenuItem>
<MenuItem Header="Help">
<MenuItem Header="Online Documentation" />
<MenuItem Header="About"/>
</MenuItem>
</Menu>
</DockPanel>
</Border>
<!-- Menu End -->
<!-- Content -->
<Grid Grid.Row="1" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="150*"/>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="150*"/>
<ColumnDefinition Width="25"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="40" />
<RowDefinition Height="30" />
<RowDefinition Height="40" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Label Style="{DynamicResource headline4}" Content="File 1" Grid.Row="0" Grid.Column="1"/>
<TextBox Grid.Row="1" Style="{DynamicResource NormalTextBox}" Grid.Column="1"/>
<Button Grid.Column="2" Grid.Row="1" Style="{DynamicResource CommonButton}" Height="30" Width="30" VerticalAlignment="Top"/>
<Label Style="{DynamicResource headline5}" Grid.Row="1" Grid.Column="3"/>
<Label Style="{DynamicResource headline4}" Content="File 2" Grid.Row="2" Grid.Column="1"/>
<TextBox Grid.Row="3" Style="{DynamicResource NormalTextBox}" Grid.Column="1"/>
<Button Grid.Column="2" Grid.Row="3" Style="{DynamicResource CommonButton}" Height="30" Width="30" VerticalAlignment="Top"/>
<Label Style="{DynamicResource headline5}" Grid.Row="3" Grid.Column="3"/>
<!-- Hash Button and Selection -->
<ComboBox Grid.Row="4" Grid.Column="1" HorizontalAlignment="Left" Width="200" Height="30">
<ComboBoxItem>
Please Choose Your Algorithm
</ComboBoxItem>
</ComboBox>
<Button Grid.Column="1" Grid.Row="4" Style="{DynamicResource ActionBtn}" Content="Button" HorizontalAlignment="Right"/>
<!-- End-->
</Grid>
<!-- Content End-->
</Grid>
I cannot explain myself why the "blue bar" is not attached to the bottom. Despite the fact, that the window is so big.

I think you want to change this:
<Grid x:Name="WindowRoot" Margin="0" VerticalAlignment="Top" Background="Blue" MouseDown="Window_MouseDown">
to this:
<Grid x:Name="WindowRoot" Margin="0" VerticalAlignment="Stretch" Background="Blue" MouseDown="Window_MouseDown">

Persistent Navigation Bar in XAML for Windows 8 App

How do I implement a persistent navigation bar. Basically an app bar that cannot be dismissed even by the right click action. MS as referred to this in this article ( https://msdn.microsoft.com/en-us/library/windows/apps/xaml/dn440584.aspx ) when discussing the flat navigation in the calculator app and also here ( http://blogs.windows.com/bloggingwindows/2014/05/13/windows-store-refresh-makes-it-easier-to-find-apps/ ) when reviewing changes to the windows store app in windows 8.1.

Here's how you do it.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" x:Name="NavigationPart" Orientation="Horizontal">
<Button Content="Home" />
<Button Content="Products" />
<Button Content="Contact" />
</StackPanel>
<Frame Grid.Row="1" x:Name="ContentPart" />
</Grid>
Best of luck!

After reading your question i started googling and was not able to find any already available app bars for that. So as far as i know there is nothing like persistent App Bar. IsSticky property does help to some extent but still can be dismissed by right click.
But still you can customize things by yourself...
As for eg. you have referred this page in your question.
You can make your own implementation for the same.
This is my implementation just to get you started...
<Page
x:Class="App2.BlankPage5"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App2"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="120"/>
<RowDefinition />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="Green">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Horizontal">
<Rectangle Width="80" Height="80">
<Rectangle.Fill>
<ImageBrush ImageSource="Assets/windows-image.jpg" />
</Rectangle.Fill>
</Rectangle>
<TextBlock Text="Home" FontSize="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</StackPanel>
<TextBlock Text="Top Charts" Grid.Column="1" FontSize="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBlock Text="Categories" Grid.Column="2" FontSize="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBlock Text="Collection" Grid.Column="3" FontSize="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBlock Text="Accounts" Grid.Column="4" FontSize="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Width="110" Height="110">
<Rectangle.Fill>
<ImageBrush ImageSource="Assets/back.png" />
</Rectangle.Fill>
</Rectangle>
<TextBlock Margin="10, 0, 0, 0" Text="Store" FontSize="70" Grid.Column="1" Foreground="Black" HorizontalAlignment="Left" VerticalAlignment="Center"/>
</Grid>
<Grid Grid.Row="2" >
<TextBlock Text="Your Content Here" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="100" Foreground="Black"/>
</Grid>
</Grid>
</Page>
It produces the following output :
I have not worked on the respective event handlers and i hope you can do that according to your needs.
A Basic Advice : Don't try to make too many changes to the already available design templates. Stick to them and only apply the required changes.

Panoramaview styling issue

I want to format the standard PanoramaApp, when selecting new project from visual studio, but am having trouble doing so.
I want to edit "Third Item" to show the borders with 2 subheadings neatly which will later be used in databindings, however I am not sure how to do that? I have tried playing around with the formatting of listbox / longlistselector but cannot seem to get my formatting and items template to work.
So now I am trying to create a grid which will contain all the different pics with subheadings, however I don't think this is the correct way of doing it
<phone:PanoramaItem Header="third item" Orientation="Horizontal">
<!--Double wide Panorama with large image placeholders-->
<Grid>
<Grid VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid HorizontalAlignment="Left">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Grid.Row="0" Background="#FFFFC700" Height="173" Width="173" />
<TextBlock Text="Heading1" FontSize="16" HorizontalAlignment="Left" TextWrapping="Wrap" Grid.Row="1" Margin="0,0,0,0" Width="167"/>
<TextBlock Text="Heading2" Grid.Row="2" Margin="12,0,0,0" />
<Border Grid.Column="1" Background="#FFFFC700" Height="173" Width="173" Margin="12,0,0,0"/>
<Border Grid.Column="2" Background="#FFFFC700" Height="173" Width="173" Margin="12,0,0,0"/>
<Border Grid.Column="3" Background="#FFFFC700" Height="173" Width="173" Margin="12,0,0,0"/>
</Grid>
<StackPanel Grid.Row="1" HorizontalAlignment="Left" Orientation="Horizontal" Margin="0,12,0,0">
<Border Background="#FFFFC700" Height="173" Width="173" Margin="12,0,0,0"/>
<Border Background="#FFFFC700" Height="173" Width="173" Margin="12,0,0,0"/>
<Border Background="#FFFFC700" Height="173" Width="173" Margin="12,0,0,0"/>
<Border Background="#FFFFC700" Height="173" Width="173" Margin="12,0,0,0"/>
</StackPanel>
</Grid>
</Grid>
</phone:PanoramaItem>

You should be able to replace the sample:
<Border Background="#FFFFC700" Height="173" Width="173" Margin="12,0,0,0"/>
With the following
<StackPanel>
<Border Background="#FFFFC700" Height="173" Width="173" Margin="12,0,0,0"/>
<TextBlock Text="Heading1" FontSize="16" HorizontalAlignment="Left" TextWrapping="Wrap" Margin="0,0,0,0" Width="167"/>
<TextBlock Text="Heading2" Margin="12,0,0,0" />
</StackPanel>