I have the following code in Xamarin C#, I wish to link the RichTextBlockOverflow in the following code to the RichTextBlock above it so that the overflowed content is displayed. I am trying to create horizontal pagination using this, so please let me know if I am in the right direction. Thanks :)
XAML:
<StackPanel Height="{Binding ActualHeight, ElementName=grid}"
Width="{Binding ActualWidth, ElementName=grid}"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<RichTextBlock Height="{Binding ActualHeight, ElementName=grid}"
MaxHeight="{Binding MaxHeight, ElementName=grid}"
Name="TextBlock"
local:HtmlToRtfConverter.Html="{Binding Html}" />
<RichTextBlockOverflow Name="RichBlockOverflow" />
</StackPanel>
Found an answer:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<RichTextBlock Grid.Column="0"
OverflowContentTarget="{Binding ElementName=overflowContainer}" >
<Paragraph>
Proin ac metus at quam luctus ultricies.
</Paragraph>
</RichTextBlock>
<RichTextBlockOverflow x:Name="overflowContainer" Grid.Column="1"/>
</Grid>
Source: Link
Related
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>
I am loocking to get the same columns width on my two ListViews with binding, currently I found the tool of visual studio: "Create data Binding" and selecting ElementName and my ListView_Original but inside are too many properties and I cant found ColumnDefinition anyway:
I am trying using Width="{Binding Width, ElementName=ListView_FP, Source=Column_Number, Mode=OneWay}" without results but I guess I am near the solution.
What is the correct way to do a binding width of the ColumnDefinition
of other Listview.
This is the original listview:
<ListView x:Name="ListView_Original" MaxHeight="400" HorizontalAlignment="Stretch" VerticalAlignment="Top" BorderBrush="Black" BorderThickness="1" Background="WhiteSmoke" SelectionChanged="ListView_Original_SelectionChanged" >
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid Padding="0" Margin="0" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" x:name="Column_Number"/>
<ColumnDefinition Width="*" x:name="Column_Name"/>
<ColumnDefinition Width="*" x:name="Column_Skill"//>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<TextBox Grid.Column="0" TextWrapping="Wrap" BorderBrush="Black" IsReadOnly="True" TextAlignment="Left" IsHitTestVisible="False" x:Name="TextBox_Number" Text="{Binding Path=Number}"/>
<TextBox Grid.Column="1" TextWrapping="Wrap" BorderBrush="Black" IsReadOnly="True" TextAlignment="Center" IsHitTestVisible="False" x:Name="TextBox_Name" Text="{Binding Path=Name}"/>
<TextBox Grid.Column="2" TextWrapping="Wrap" BorderBrush="Black" IsReadOnly="True" TextAlignment="Center" IsHitTestVisible="False" x:Name="TextBox_Skill" Text="{Binding Path=Skill}"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
And this is the listview what its columns should do binding:
<ListView x:Name="ListView_Copy" MaxHeight="400" HorizontalAlignment="Stretch" VerticalAlignment="Top" BorderBrush="Black" BorderThickness="1" Background="WhiteSmoke" SelectionChanged="ListView_Copy_SelectionChanged" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid Padding="0" Margin="0" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding Width, ElementName=ListView_FP, Source=Column_Number, Mode=OneWay}"/>
<ColumnDefinition Width="{Binding Width, ElementName=ListView_FP, Source=Column_Name, Mode=OneWay}"/>
<ColumnDefinition Width="{Binding Width, ElementName=ListView_FP, Source=Column_Skill, Mode=OneWay}"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<TextBox Grid.Column="0" TextWrapping="Wrap" BorderBrush="Black" IsReadOnly="True" TextAlignment="Left" IsHitTestVisible="False" x:Name="TextBox_Number" Text="{Binding Path=Number}"/>
<TextBox Grid.Column="1" TextWrapping="Wrap" BorderBrush="Black" IsReadOnly="True" TextAlignment="Center" IsHitTestVisible="False" x:Name="TextBox_Name" Text="{Binding Path=Name}"/>
<TextBox Grid.Column="2" TextWrapping="Wrap" BorderBrush="Black" IsReadOnly="True" TextAlignment="Center" IsHitTestVisible="False" x:Name="TextBox_Skill" Text="{Binding Path=Skill}"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Any help is appreciated.
x:Name property used in a DataTemplate are not available outside of it, so you have to going to bind the ColumnDefinition Width to a value that can be accesible by both ListView's DataTemplates.
I've created a sample based on your code that was able to get the same, dynamic width in both ColumnDefinitions using binding.
First, I have this shared DataTemplate for ListViews:
<Page.Resources>
<DataTemplate x:Key="SimpleTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="MainDefinition" Width="{Binding ElementName=MainPageName, Path=SameWidth, Converter={StaticResource DoubleToGridLength}, Mode=OneWay}"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<SymbolIcon Symbol="Accept" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<TextBlock Grid.Column="1" Text="{Binding}" VerticalAlignment="Center" FontSize="16"/>
</Grid>
</DataTemplate>
</Page.Resources>
Then, my ListViews:
<ListView Grid.Row="1"
ItemsSource="{x:Bind ListOneItems}"
ItemTemplate="{StaticResource SimpleTemplate}"/>
<ListView Grid.Row="1"
Grid.Column="2"
ItemsSource="{x:Bind ListTwoItems}"
ItemTemplate="{StaticResource SimpleTemplate}"/>
And the Page's code-behind:
private double _sameWidth;
public double SameWidth
{
get { return _sameWidth; }
set { _sameWidth = value; OnPropertyChanged(); }
}
public ObservableCollection<string> ListOneItems { get; set; }
public ObservableCollection<string> ListTwoItems { get; set; }
protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
var text =
#"Fugiat laborum cupidatat labore ad dolor officia Lorem ipsum cillum cupidatat dolore enim. Irure aliqua tempor non cupidatat est excepteur nisi labore magna nisi in consequat. Minim ex magna nulla deserunt ad. Proident pariatur deserunt ex voluptate proident irure. Dolore cillum dolor proident eu mollit amet nisi non velit sint.";
var listOneWords = text.Split(' ').ToList().Take(10);
var listTwoWords = text.Split(' ').ToList().Skip(10).Take(10);
ListOneItems = new ObservableCollection<string>(listOneWords);
ListTwoItems = new ObservableCollection<string>(listTwoWords);
SameWidth = 48;
}
Also, you would need the DoubleToGridLengthConverter:
public class DoubleToGridLengthConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
var width = (double) value;
var length = new GridLength(width);
return length;
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
throw new System.NotImplementedException();
}
}
The final part is a Slider binded to SameWidth property that change the ColumnDefinition Width dynamically.
<Slider x:Name="MainSlider" Grid.ColumnSpan="2"
Minimum="48"
Maximum="120"
Value="{x:Bind SameWidth, Mode=TwoWay}"/>
Hope this helps you!
I have this code working already but I want to change the scrolling to horizontal.
Im pretty new working with windows phone. Please any help will be appreciated.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,139,12,0">
<ListBox Name="lbLogros" Margin="0,10,-10,0" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="160" Margin="0,0,0,10">
<Image Width="140" Source="{Binding Path=rutaImagen}" />
<StackPanel Margin="20,0,0,0">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" FontSize="40" Text="{Binding Path=nombre}" Style="{StaticResource MainSubtitle}" />
<TextBlock Grid.Row="1" FontSize="20" Width="290" TextWrapping="Wrap" Style="{StaticResource MainText}">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget purus ligula.
</TextBlock>
</Grid>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
You just need to change your visibility, it works in my case.
ScrollViewer.HorizontalScrollBarVisibility="Visible"
To control how items are arranged within ListBox control or other similar controls, play with the ItemsPanel property. For example, using horizontal VirtualizingStackPanel for ItmsPanel will cause the items to be arranged horizontally :
<ListBox Name="lbLogros" Margin="0,10,-10,0"
ScrollViewer.HorizontalScrollBarVisibility="Auto">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
.....
.....
</ListBox.ItemTemplate>
</ListBox>
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.
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>