windows store app xaml C# code with styles for left colored panel with vertical text and header with left, center and right alignment textblocks

Posted by : Sudhir Chekuri Monday, 23 June 2014

Xaml code for left panel with vertical text, header with multiple textblocks with different alignments

<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<Style x:Key="LeftPanelStyle" TargetType="Grid" >
<Setter Property="Background" Value="Green"/>
</Style>

<ImageBrush x:Key="BackgroundBrush"
ImageSource="ms-appx:///Assets/bg.png"
Stretch="UniformToFill" />

<Style x:Key="LayoutRootStyle" TargetType="Panel">
<Setter Property="Background" Value="{StaticResource BackgroundBrush}"/>
<Setter Property="ChildrenTransitions">
<Setter.Value>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="56"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Style="{StaticResource LeftPanelStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
Style="{StaticResource NavigationBackButtonNormalStyle}"
VerticalAlignment="Top"
AutomationProperties.Name="Back"
AutomationProperties.AutomationId="BackButton"
AutomationProperties.ItemType="Navigation Button"/>
<StackPanel Grid.Row="1" Grid.Column="0" VerticalAlignment="Bottom" Margin="0,0,0,0">
<StackPanel.RenderTransform>
<CompositeTransform Rotation="-90"></CompositeTransform>
</StackPanel.RenderTransform>
<TextBlock Text="Side Heading" FontSize="22" Margin="0,15,-226,0" />
</StackPanel>
</Grid>

<Grid Grid.Column="1" Style="{StaticResource LayoutRootStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="120" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>

<Grid Grid.Column="1" VerticalAlignment="Top" Margin="0,15,0,0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="170"/>
<ColumnDefinition Width="60"/>
</Grid.ColumnDefinitions>

<Image Grid.Column="1" VerticalAlignment="Bottom" Grid.RowSpan="2" Grid.Row="0" Height="56" Width="114" Source="{Binding SelectedEventLogo}" Stretch="None" HorizontalAlignment="Left">
</Image>
<StackPanel Grid.Column="2" Grid.Row="0">

<TextBlock Text="Page Header" Style="{StaticResource HeaderTextBlockStyle}"/>
</StackPanel>
<StackPanel Grid.Column="3" Grid.Row="0" HorizontalAlignment="Center">
<TextBlock Text="2nd" Grid.Column="1" IsHitTestVisible="false" Style="{StaticResource HeaderTextBlockStyle}" />
</StackPanel>
<StackPanel Grid.Column="5" Grid.Row="0" HorizontalAlignment="Right">
<TextBlock Text="3rd" Grid.Column="1" IsHitTestVisible="false" Style="{StaticResource HeaderTextBlockStyle}" HorizontalAlignment="Right" />
</StackPanel>
</Grid>

</Grid>
</Grid>

</Page>