I'm facing problem with handling different screen sizes and the problem is text!
I have next section:
This is display 1024x768
This is display 2560x1440
On Stack someone gave me hint that ViewBox can help me to solve this problem, ok i try this:
But what is this?
When text doesn't fit, it shrinks - that is nice, but how to tell other ( same-level elements ) to take the same shrink level?
In other words, i want all text the same size.
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="9*"/>
</Grid.RowDefinitions>
<Image HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Source="arrow_step_1.png" Stretch="Fill" />
<Image Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Source="arrow_step_1.png" Stretch="Fill"/>
<Image Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Source="arrow_step_1.png" Stretch="Fill"/>
<Image Grid.Column="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Source="arrow_step_1.png" Stretch="Fill"/>
<Viewbox>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="One" FontSize="20"/>
</Viewbox>
<Viewbox Grid.Column="1">
<TextBlock Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Two" FontSize="20"/>
</Viewbox>
<Viewbox Grid.Column="2">
<TextBlock Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Threeeeeeeeeee" FontSize="20"/>
</Viewbox>
<Viewbox Grid.Column="3">
<TextBlock Grid.Column="3" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Four" FontSize="20"/>
</Viewbox>
</Grid>
Try placing your ViewBox at the root level instead.. it should look something like this:
<ViewBox>
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
...
</Grid>
</ViewBox>
You may want to play around with the Stretch property of the ViewBox to achieve your desired result. But I'd reckon to use the "Fill" option.
I've been using this method for my games and apps to adapt to different screen ratios and sizes.
Related
I gave a ListBox that lists items. The items, can vary in size, but follow the same pattern:
picture................Metadata
ID
<ListBox Name="View" Grid.Row="2" ItemsSource="{Binding Human, ElementName=uc}"
SelectedItem="{Binding SelectedHuman, ElementName=uc}"
MouseDoubleClick="OnSubjectEditClick"
VerticalContentAlignment="Center"
VirtualizingPanel.IsVirtualizing="True"
VirtualizingPanel.ScrollUnit="Pixel"
ScrollViewer.CanContentScroll="True"
Grid.IsSharedSizeScope="True"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate >
<DataTemplate >
<Border BorderBrush="#565656" BorderThickness="1" Margin="10" Padding="10">
<Grid>
<Grid.RowDefinitions>
<RowDefinition MaxHeight="300" />
<RowDefinition MaxHeight="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" MinWidth="300" MaxWidth="500" SharedSizeGroup="col1"/>
<ColumnDefinition MaxWidth="500" Width="*" SharedSizeGroup="col2"/>
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.Column="0" MaxHeight="300" MaxWidth="300" Source="{Binding Thumb}"/>
<TextBlock Grid.Column="0" Grid.Row="1" Text="{Binding Name}" FontWeight="Bold" TextAlignment="Center"/>
<local:MetadataView Grid.Column="1" Grid.RowSpan="2" Metadata="{Binding Metadata}" HorizontalAlignment="Stretch" VerticalAlignment="Center" IsEdit="False" />
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The items inside Metadata .xaml looks like this. StackPanels containing actual Metadata are automatically generated by code inside "DisplayMode":
<Grid VerticalAlignment="Center" HorizontalAlignment="Stretch">
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" CanContentScroll="False" Height="300" >
<StackPanel x:Name="DisplayMode" VerticalAlignment="Center" Grid.IsSharedSizeScope="True" >
...........
<StackPanel/> //AutoGenerated
............
</StackPanel>
</ScrollViewer>
</Grid>
The problem I'm facing is the fact, that I need to be able to select an item inside the ListBox. But, by adding ScrollViewer in Metadata.xaml it seems I Reroute the selector, so it is trying to select an item in Metadata ScrollViewer instead of ListBox when I press the part of the ListBox containing Metadata. If I press on Thumbnail, or even RightClick on any part of the ListBox - it seems to select just fine.
[SOLVED] After playing around with available options in ScrollViewer I stumbled across Focusable. Setting it to False did the trick.
I hope it will help someone in the future.
<Grid VerticalAlignment="Center" HorizontalAlignment="Stretch">
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" CanContentScroll="False" Height="300" Focusable="False" >
<StackPanel x:Name="DisplayMode" VerticalAlignment="Center" Grid.IsSharedSizeScope="True" >
</StackPanel>
</ScrollViewer>
</Grid>
I am using ad control in my xaml as below
<Page
x:Class="namespace"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:namespace"
xmlns:ViewModels="using:namespace.ViewModels"
xmlns:common="using:namespace.Classes"
xmlns:stringBind="using:namespace.Classes"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:q42controls="using:Q42.WinRT.Controls"
xmlns:UI="using:Microsoft.Advertising.WinRT.UI"
Background="Gray"
mc:Ignorable="d">
<Page.Resources>
<ViewModels:ArticleViewModel x:Key="ViewModel" />
<DataTemplate x:Key="headerTest">
</DataTemplate>
<DataTemplate x:Key="pivotTemplate">
<StackPanel Margin="-15 0 -15 0">
<Grid>
<Image x:Name="PlaceHolderImage" Source="Assets/PlaceHolder.jpg"></Image>
<Image q42controls:ImageExtensions.CacheUri="{Binding ImageURL}" Tag="{Binding ImageURL}" Tapped="ImageView"></Image>
</Grid>
<StackPanel Background="White">
<TextBlock Text="{Binding UpdatedDate}" FontSize="15" HorizontalAlignment="Center"
VerticalAlignment="Center" Pivot.SlideInAnimationGroup="GroupTwo" Margin="10 10 0 10"
FontFamily="{StaticResource ContentControlThemeFontFamily}"
Foreground="#777"></TextBlock>
<Border VerticalAlignment="Bottom" Height="1" Background="Black" Opacity="0.1">
</Border>
<TextBlock x:Name="HeadLine" Text="{Binding HeadLine}"
Margin="10 5 10 -5" TextWrapping="Wrap"
FontSize="{Binding HeadlineFontSize}" Foreground="Black"
FontFamily="{StaticResource HeadlineCommonFamiy}"
Pivot.SlideInAnimationGroup="GroupTwo"/>
<TextBlock Text="{Binding Abstract}" TextWrapping="Wrap" FontSize="{Binding AbstractFontSize}"
Pivot.SlideInAnimationGroup="GroupTwo" Margin="10 5 10 10"
Foreground="#999"
FontFamily="{StaticResource AbstractCommonFamily}"/>
</StackPanel>
<StackPanel x:Name="descriptionSP" Background="White">
<Image Source="Assets/PlaceHolder.jpg" Width="300" Height="250"></Image>
<UI:AdControl
AutoRefreshIntervalInSeconds="60"
ApplicationId="3f83fe91-d6be-434d-a0ae-7351c5a997f1"
AdUnitId="10865270"
HorizontalAlignment="Center"
Height="250"
IsAutoRefreshEnabled="True"
VerticalAlignment="Top"
Margin="5,-240,5,5"
Width="300"
ErrorOccurred="AdControl_ErrorOccurred"/>
<RichTextBlock IsTextSelectionEnabled="False" x:Name="richTextBlock"
local:Properties.Html="{Binding ArticleDetail}" TextWrapping="Wrap"
FontSize="{Binding FontSize}"
Pivot.SlideInAnimationGroup="GroupTwo" Margin="10,10,10,-20"
FontFamily="{StaticResource ContentControlThemeFontFamily}">
</RichTextBlock>
<Image Source="Assets/PlaceHolder.jpg" Width="300" Height="250"></Image>
<UI:AdControl
AutoRefreshIntervalInSeconds="60"
ApplicationId="3f83fe91-d6be-434d-a0ae-7351c5a997f1"
AdUnitId="10865270"
HorizontalAlignment="Center"
Height="250"
IsAutoRefreshEnabled="True"
VerticalAlignment="Top"
Margin="5,-220,5,5"
Width="300" Loaded="AdControl_Loaded"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</Page.Resources>
<Page.BottomAppBar>
<CommandBar Foreground="Black" Background="White">
<CommandBar.PrimaryCommands>
<AppBarButton x:Uid="Share" Click="Share_Click" Label="Share">
<AppBarButton.Icon>
<BitmapIcon UriSource="/Assets/Share.png" Height="30" Margin="0,-5,0,0"/>
</AppBarButton.Icon>
</AppBarButton>
<AppBarButton Icon="Favorite" Name="favIcon" Click="Favorite_Click" Label="Favorite" Margin="0,-2,0,0"></AppBarButton>
</CommandBar.PrimaryCommands>
</CommandBar>
</Page.BottomAppBar>
<Grid Background="#f2f2f2" x:Name="grid">
<Grid x:Name="LoadingGrid" Visibility="Visible">
<ProgressRing x:Name="progressRing" IsActive="True" Foreground="#d03438" HorizontalAlignment="Center" Width="60"
Height="50" VerticalAlignment="Center" Margin="0 20 0 0"></ProgressRing>
</Grid>
<Grid x:Name="mainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Image x:Name="logoImage" Grid.Row="0" Source="Assets/18600.png" HorizontalAlignment="Center" Margin="0,5,0,0"></Image>
<ScrollViewer x:Name="swipeBetweenPages" Grid.Row="1" Visibility="Collapsed">
<Pivot DataContext="{StaticResource ViewModel}" x:Name="pivot" Margin="0,-45,0,0"
HeaderTemplate="{StaticResource headerTest}"
ItemTemplate="{StaticResource pivotTemplate}" ItemsSource="{Binding Articles}" SelectionChanged="pivot_SelectionChanged">
</Pivot>
</ScrollViewer>
</Grid>
<Grid Visibility="Collapsed" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Black" Name="popUp">
<Grid.RowDefinitions>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Image Source="/Assets/Close_White.png" HorizontalAlignment="Right" Grid.Row="1" Tapped="CloseImage"></Image>
<ScrollViewer x:Name="scroll" ZoomMode="Enabled" Grid.Row="2">
<Image x:Name="popUpImage" VerticalAlignment="Center" Margin="0,-50,0,0"></Image>
</ScrollViewer>
</Grid>
</Grid>
By using the above xaml piece of code, I can render ad properly, But i cant scroll the page when i scroll over the ad control. Please someone guide to solve the issue. Any help on this would be very much helpful to solve the issue
Expected output
Thanks in advance
By using the above xaml piece of code, I can render ad properly, But i cant scroll the page when i scroll over the ad control.
You need to set the height of your ScrollViewer explicitly:
<Grid x:Name="mainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Image x:Name="logoImage" Grid.Row="0" Source="Assets/18600.png" HorizontalAlignment="Center" Margin="0,5,0,0"></Image>
<ScrollViewer x:Name="swipeBetweenPages" Grid.Row="1" Visibility="Visible" Height="300">//here I set the height of ScrollViewer to 300
<Pivot DataContext="{StaticResource ViewModel}" x:Name="pivot" Margin="0,-45,0,0"
HeaderTemplate="{StaticResource headerTest}"
ItemTemplate="{StaticResource pivotTemplate}" ItemsSource="{Binding Articles}" SelectionChanged="pivot_SelectionChanged">
</Pivot>
</ScrollViewer>
</Grid>
I set the ScrollViewer's height to 300 and when the Content's height is bigger than 300. ScrollViewer will show correctly.
Update: Here is the complete demo: AdControlSample
To show the Pivot Header you need to set the margin of Pivot Control to Margin="0,0,0,0" and also you need to fill your defined header template headerTest:
<Page.Resources>
<DataTemplate x:Key="headerTest">
<StackPanel>
<TextBlock Text="{Binding HeadLine}"></TextBlock>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="pivotTemplate">
...
Fix the margin:
<Grid x:Name="mainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Image x:Name="logoImage" Grid.Row="0" Source="Assets/18600.png" HorizontalAlignment="Center" Margin="0,5,0,0"></Image>
<ScrollViewer x:Name="swipeBetweenPages" Grid.Row="1" Visibility="Visible">
<Pivot x:Name="pivot" Margin="0,0,0,0"
HeaderTemplate="{StaticResource headerTest}"
ItemTemplate="{StaticResource pivotTemplate}" SelectionChanged="pivot_SelectionChanged">
</Pivot>
</ScrollViewer>
</Grid>
And here is the result:
You need to put the ScrollViewer inside the PivotItem's DataTemplate.
Currently the ScrollViewer wraps the whole Pivot, but the pivot itself handles the scroll event which means the ScrollViewer does not receive it. You can confirm this when you hover the scroll bar with your mouse and scroll - in this case it will work, because the mouse is no longer inside the Pivot itself.
The solution would look like this:
<DataTemplate x:Key="pivotTemplate">
<ScrollViewer>
<StackPanel Margin="-15 0 -15 0">
...
</StackPanel>
</ScrollViewer>
</DataTemplate>
Why does my UWP (Universal Windows Platform) App force extra space at the top and bottom of my app even though there is nothing there?
Here's what it looks like:
Even though in Visual Studio 2013 (design mode) you can see that the blue bounding box displays the bottom of the page as follows:
The outer grey is the device it would be running on.
The XAML looks like the following:
<Page
x:Class="CYaPass.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CYaPass"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Height="515" Width="570" Background="LightGray" Loaded="Page_Loaded">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="320"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Grid.Row="0">
<TextBlock FontSize="16" HorizontalAlignment="Center">1. Select a Site/Key</TextBlock>
<ListView BorderThickness="2" BorderBrush="Aquamarine"
x:Name="SiteListBox" HorizontalAlignment="Stretch" VerticalAlignment="Center" Height="251"
Margin="10,10,0,0" Width="Auto" SelectionChanged="SiteListBox_SelectionChanged">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Padding" Value="5,0,0,0" />
</Style>
</ListView.ItemContainerStyle>
<ListViewItem Content="Item 2"/>
</ListView>
<StackPanel Margin="10,0,0,0" Orientation="Horizontal" Grid.Column="0">
<Button x:Name="DeleteSiteButton" Content="Delete Site"
HorizontalAlignment="Right" Margin="0,0,0,0" VerticalAlignment="Top" Click="DeleteSiteButton_Click"/>
<Button x:Name="AddSiteButton" Content="Add Site" HorizontalAlignment="Right"
Margin="10,0,0,0" VerticalAlignment="Top" Click="AddSiteButton_Click"/>
</StackPanel>
</StackPanel>
<TextBox x:Name="passwordTextBox" HorizontalAlignment="Left" Margin="7,150,0,0" Grid.Row="1" Grid.ColumnSpan="2"
TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="560"/>
<StackPanel HorizontalAlignment="Left" Height="128" Margin="10,0,0,0" Grid.Column="0" Grid.Row="1"
VerticalAlignment="Top" Width="285">
<Grid Margin="0,0,-11,0">
<Grid.RowDefinitions>
<RowDefinition Height="40" ></RowDefinition>
<RowDefinition Height="40" ></RowDefinition>
<RowDefinition Height="40" ></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="180"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<CheckBox x:Name="addUppercaseCheckbox" Grid.Row="0" Grid.Column="0" Content="Add Uppercase" HorizontalAlignment="Stretch" VerticalAlignment="Center" Width="254" Click="addUppercaseCheckbox_Click" Margin="7,0,3,0"/>
<CheckBox x:Name="addSpecialCharscheckBox" Grid.Row="1" Grid.Column="0" Content="Add Special Chars" HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="7,0,3,0"/>
<TextBox x:Name="specialCharsTextBox" Grid.Column="1" Grid.Row="1" Margin="7,0,3,0" VerticalAlignment="Center" HorizontalAlignment="Stretch" Grid.RowSpan="1" TextWrapping="NoWrap" Text="#"/>
<CheckBox x:Name="setMaxLengthCheckBox" Grid.Row="2" Grid.Column="0" Content="Set Max Length" HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="7,0,3,0"/>
<local:NumericUpDown Grid.Column="1" HorizontalAlignment="Left" Margin="7,0,3,0" Grid.Row="2" VerticalAlignment="Center" Width="64"/>
</Grid>
</StackPanel>
<StackPanel Grid.Column="1" Grid.Row="0">
<TextBlock Grid.Column="1" Grid.Row="0" FontSize="16" HorizontalAlignment="Center">2. Draw a pattern</TextBlock>
<Canvas HorizontalAlignment="Center" x:Name="MainCanvas"
Height="252" Width="252" Margin="7,10,0,0" VerticalAlignment="Top" Background="AliceBlue" Tapped="MainCanvas_Tapped" PointerMoved="MainCanvas_PointerMoved"/>
<Button x:Name="ClearGridButton" Content="Clear"
Margin="50,0,10,0" VerticalAlignment="Center" Click="ClearGridButton_Click" HorizontalAlignment="Right"/>
</StackPanel>
</Grid>
</Page>
You can see the page's width is wider than the height, but when the app runs on a desktop or a simulator device (like 7" pad) the extra space is pushed into the top and the bottom.
UWP Forced Minimum?
Is this due to some minimum size or something that UWP forces on apps?
Cannot Resize Smaller When Running
Even if I grab the form's bottom or top bounding frame when the app is running, I cannot make it any smaller.
The Default Content-Alignment is set to Center because you set the Height and Width of your Page, so your page is placed in the Center and isn't filling the whole Screen.
One Possible Solution is to add to the Page xaml Attributes this Piece of Code:
VerticalAlignment="Top".
To set the HorizontalAlignment to the left add this:
HorizontalAlignment="Left".
One more advise: When you don't Need to Display more than one xaml Page at the Screen leave the Page Height and Width to Default.
I have this datatemplate for items in a Listview, its a bunch of rows, with 4 columns, and on first column im trying to add a text displayed in vertical. So far i have this, the text appears in vertical but for some reason it shows cutted in the ends.
<DataTemplate x:Key="ActionItemTemplate">
<Grid Height="150" HorizontalAlignment="Left" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="470"/>
<ColumnDefinition Width="470"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Background="Tomato">
<TextBlock Text="In Progress" RenderTransformOrigin="0.5,0.5" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock.RenderTransform>
<RotateTransform Angle="-90" />
</TextBlock.RenderTransform>
</TextBlock>
</Grid>
<Grid Grid.Column="1" Background="Blue"></Grid>
<Grid Grid.Column="2" Background="Green"></Grid>
<Grid Grid.Column="3" Background="Yellow"></Grid>
</Grid>
</DataTemplate>
Do i need to add anything ?
I used blend to modify your code, here is the result
and here is the code :
<Grid Grid.Column="0" Background="Tomato">
<TextBlock Text="In Progress In Progress In Progress " RenderTransformOrigin="0.5,0.5" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" Height="19" Margin="-149.5,65.5,-155.5,65.5" UseLayoutRounding="False" d:LayoutRounding="Auto">
<TextBlock.RenderTransform>
<RotateTransform Angle="-90" />
</TextBlock.RenderTransform>
</TextBlock>
</Grid>
you should try it
I want to make a TextBlock shown vertically, just like the username in the Windows Phone built-in email app:
And my XAML code is:
<Grid x:Name="LayoutRoot">
<Grid.Background>
<ImageBrush ImageSource="{StaticResource Status_Background}" Stretch="UniformToFill"/>
</Grid.Background>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<ProgressBar x:Name="progressBar" IsIndeterminate="True" Grid.ColumnSpan="2" VerticalAlignment="Top" Visibility="Collapsed" Margin="0,6"/>
<StackPanel>
<Image x:Name="headerImage" Margin="0,12" Width="70" Height="70" HorizontalAlignment="Center" Stretch="UniformToFill"/>
<TextBlock Text="userName" x:Name="userName" Grid.ColumnSpan="2" Margin="0"
FontSize="50" Foreground="{StaticResource Status_UserName}"
Width="Auto" HorizontalAlignment="Left" VerticalAlignment="Bottom">
<TextBlock.RenderTransform>
<RotateTransform Angle="-90" CenterX="80" CenterY="70"/>
</TextBlock.RenderTransform>
</TextBlock>
</StackPanel>
<ScrollViewer Grid.Column="1" Height="Auto">
</ScrollViewer>
</Grid>
The result is:
The TextBlock didn't show up in the right place, how could I modify the XAML code? Thanks in advance.
Your problem is that render transforms are applied after layout, as described in this blog post. You need to bring your TextBlock out of the StackPanel and ensure that it is in the top left of the screen, then rotate it.
<Grid x:Name="LayoutRoot" >
<Grid.Background>
<ImageBrush ImageSource="{StaticResource Status_Background}" Stretch="UniformToFill"/>
</Grid.Background>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="userName" x:Name="userName" FontSize="50" Foreground="{StaticResource Status_UserName}" Width="auto"
HorizontalAlignment="Left" VerticalAlignment="Bottom">
<TextBlock.RenderTransform>
<RotateTransform Angle="-90" CenterX="80" CenterY="70"/>
</TextBlock.RenderTransform>
</TextBlock>
<ProgressBar x:Name="progressBar" IsIndeterminate="True" Grid.ColumnSpan="2" VerticalAlignment="Top" Visibility="Collapsed" Margin="0,6" />
<StackPanel>
<Image x:Name="headerImage" Margin="0,12" Width="70" Height="70" HorizontalAlignment="Center" Stretch="UniformToFill"/>
</StackPanel>
<ScrollViewer Grid.Column="1" Height="auto">
</ScrollViewer>
</Grid>
I would approach it by using a translate and a rotate transform together. The rotate -90 to rotate to vertical and the translate to move it the correct place (i.e. anchor the new top left rather than the new bottom left)
Like this...
<Grid x:Name="LayoutRoot" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<ProgressBar x:Name="progressBar" IsIndeterminate="True" Grid.ColumnSpan="2" VerticalAlignment="Top" Visibility="Collapsed" Margin="0,6" />
<StackPanel>
<Image x:Name="headerImage" Margin="0,12" HorizontalAlignment="Center" Stretch="UniformToFill"/>
<TextBlock Text="userName" x:Name="userName" Grid.ColumnSpan="2" Margin="0" FontSize="50" Foreground="{StaticResource Status_UserName}" Width="225.100006103516"
HorizontalAlignment="Left" VerticalAlignment="Bottom">
<TextBlock.RenderTransform>
<CompositeTransform CenterY="0" CenterX="0" Rotation="-90" TranslateY="{Binding Width, ElementName=userName}"/>
</TextBlock.RenderTransform>
</TextBlock>
</StackPanel>
</Grid>