So I try to generate the xaml code below with visual studios, Silverlight.
But when I put parts into comment to check where my fault is, it never works.
So I would like to find out where my fault is so I can try to interact with Javascript
<?xml version="1.0" encoding="UTF-8"?>
<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" ShowGridLines="True" Loaded="onLoaded">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="1*" />
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="110" />
<ColumnDefinition Width="8*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Viewbox Stretch="Uniform" Grid.Row="1" Grid.Column="1">
<Canvas Height="300" Width="600">
<Rectangle Width="45" Canvas.Left="0" Canvas.Bottom="61.57098099504444" Height="160.95803800991115" Fill="Gray" Opacity="0.5" />
<Line Stroke="Black" StrokeThickness="3" X1="0.0" Y1="157.95" X2="45.0" Y2="157.95" />
<Rectangle Width="45" Canvas.Left="75" Canvas.Bottom="112.86424230466895" Height="153.59151539066212" Fill="Gray" Opacity="0.5" />
<Line Stroke="Black" StrokeThickness="3" X1="75.0" Y1="110.34" X2="120.0" Y2="110.34" />
<Rectangle Width="45" Canvas.Left="150" Canvas.Bottom="54.47593841460492" Height="120.54812317079018" Fill="Gray" Opacity="0.5" />
<Line Stroke="Black" StrokeThickness="3" X1="150.0" Y1="185.25" X2="195.0" Y2="185.25" />
<Rectangle Width="45" Canvas.Left="225" Canvas.Bottom="178.28025619556524" Height="95.23948760886945" Fill="Gray" Opacity="0.5" />
<Line Stroke="Black" StrokeThickness="3" X1="225.0" Y1="74.10000000000002" X2="270.0" Y2="74.10000000000002" />
<Rectangle Width="45" Canvas.Left="300" Canvas.Bottom="60.658737319718924" Height="82.68252536056214" Fill="Gray" Opacity="0.5" />
<Line Stroke="Black" StrokeThickness="3" X1="300.0" Y1="198.0" X2="345.0" Y2="198.0" />
<Rectangle Width="45" Canvas.Left="375" Canvas.Bottom="176.2529831230876" Height="52.79403375382487" Fill="Gray" Opacity="0.5" />
<Line Stroke="Black" StrokeThickness="3" X1="375.0" Y1="97.34999999999997" X2="420.0" Y2="97.34999999999997" />
<Rectangle Width="45" Canvas.Left="450" Canvas.Bottom="66.47512033126283" Height="129.84975933747432" Fill="Gray" Opacity="0.5" />
<Line Stroke="Black" StrokeThickness="3" X1="450.0" Y1="168.6" X2="495.0" Y2="168.6" />
<Rectangle Width="45" Canvas.Left="525" Canvas.Bottom="31.87007514135977" Height="145.05984971728049" Fill="Gray" Opacity="0.5" />
<Line Stroke="Black" StrokeThickness="3" X1="525.0" Y1="195.6" X2="570.0" Y2="195.6" />
<Rectangle Width="45" Canvas.Left="600" Canvas.Bottom="93.02414165274203" Height="156.551716694516" Fill="Gray" Opacity="0.5" />
<Line Stroke="Black" StrokeThickness="3" X1="600.0" Y1="128.7" X2="645.0" Y2="128.7" />
<Rectangle Width="45" Canvas.Left="675" Canvas.Bottom="106.2876271364089" Height="30.724745727182178" Fill="Gray" Opacity="0.5" />
<Line Stroke="Black" StrokeThickness="3" X1="675.0" Y1="178.35000000000002" X2="720.0" Y2="178.35000000000002" />
<Rectangle Width="45" Canvas.Left="0" Canvas.Bottom="0" Height="148.5" Opacity="0.5" Fill="red" />
<Rectangle Width="45" Canvas.Left="75" Canvas.Bottom="0" Height="276.6" Opacity="0.5" Fill="Green" />
<Rectangle Width="45" Canvas.Left="150" Canvas.Bottom="0" Height="183.0" Opacity="0.5" Fill="Yellow" />
<Rectangle Width="45" Canvas.Left="225" Canvas.Bottom="0" Height="142.5" Opacity="0.5" Fill="red" />
<Rectangle Width="45" Canvas.Left="300" Canvas.Bottom="0" Height="121.5" Opacity="0.5" Fill="red" />
<Rectangle Width="45" Canvas.Left="375" Canvas.Bottom="0" Height="237.0" Opacity="0.5" Fill="Green" />
<Rectangle Width="45" Canvas.Left="450" Canvas.Bottom="0" Height="141.0" Opacity="0.5" Fill="red" />
<Rectangle Width="45" Canvas.Left="525" Canvas.Bottom="0" Height="100.5" Opacity="0.5" Fill="red" />
<Rectangle Width="45" Canvas.Left="600" Canvas.Bottom="0" Height="207.0" Opacity="0.5" Fill="Green" />
<Rectangle Width="45" Canvas.Left="675" Canvas.Bottom="0" Height="124.50000000000001" Opacity="0.5" Fill="red" />
<Line Stroke="Gray" StrokeThickness="3" X1="-50.0" Y1="0.0" X2="750.0" Y2="0.0" Opacity="0.5" />
<TextBlock Canvas.Bottom="0" Canvas.Left="-50">0</TextBlock>
<Line Stroke="Gray" StrokeThickness="1" X1="-50.0" Y1="30.0" X2="750.0" Y2="30.0" Opacity="0.5" />
<TextBlock Canvas.Bottom="30" Canvas.Left="-50">2</TextBlock>
<Line Stroke="Gray" StrokeThickness="1" X1="-50.0" Y1="60.0" X2="750.0" Y2="60.0" Opacity="0.5" />
<TextBlock Canvas.Bottom="60" Canvas.Left="-50">4</TextBlock>
<Line Stroke="Gray" StrokeThickness="1" X1="-50.0" Y1="90.0" X2="750.0" Y2="90.0" Opacity="0.5" />
<TextBlock Canvas.Bottom="90" Canvas.Left="-50">6</TextBlock>
<Line Stroke="Gray" StrokeThickness="1" X1="-50.0" Y1="120.0" X2="750.0" Y2="120.0" Opacity="0.5" />
<TextBlock Canvas.Bottom="120" Canvas.Left="-50">8</TextBlock>
<Line Stroke="Gray" StrokeThickness="3" X1="-50.0" Y1="150.0" X2="750.0" Y2="150.0" Opacity="0.5" />
<TextBlock Canvas.Bottom="150" Canvas.Left="-50">10</TextBlock>
<Line Stroke="Gray" StrokeThickness="1" X1="-50.0" Y1="180.0" X2="750.0" Y2="180.0" Opacity="0.5" />
<TextBlock Canvas.Bottom="180" Canvas.Left="-50">12</TextBlock>
<Line Stroke="Gray" StrokeThickness="1" X1="-50.0" Y1="210.0" X2="750.0" Y2="210.0" Opacity="0.5" />
<TextBlock Canvas.Bottom="210" Canvas.Left="-50">14</TextBlock>
<Line Stroke="Gray" StrokeThickness="1" X1="-50.0" Y1="240.0" X2="750.0" Y2="240.0" Opacity="0.5" />
<TextBlock Canvas.Bottom="240" Canvas.Left="-50">16</TextBlock>
<Line Stroke="Gray" StrokeThickness="1" X1="-50.0" Y1="270.0" X2="750.0" Y2="270.0" Opacity="0.5" />
<TextBlock Canvas.Bottom="270" Canvas.Left="-50">18</TextBlock>
<Line Stroke="Gray" StrokeThickness="3" X1="-50.0" Y1="300.0" X2="750.0" Y2="300.0" Opacity="0.5" />
<TextBlock Canvas.Bottom="300" Canvas.Left="-50">20</TextBlock>
<TextBlock Canvas.Left="35" Canvas.Bottom="106.25" Foreground="White" VerticalAlignment="Center" TextWrapping="Wrap" LineHeight="AUTO">
Computersystemen 1
<TextBlock.RenderTransform>
<RotateTransform Angle="90" />
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Canvas.Left="110" Canvas.Bottom="170.3" Foreground="White" VerticalAlignment="Center" TextWrapping="Wrap" LineHeight="AUTO">
Databanken 1
<TextBlock.RenderTransform>
<RotateTransform Angle="90" />
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Canvas.Left="185" Canvas.Bottom="123.5" Foreground="White" VerticalAlignment="Center" TextWrapping="Wrap" LineHeight="AUTO">
Engels
<TextBlock.RenderTransform>
<RotateTransform Angle="90" />
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Canvas.Left="260" Canvas.Bottom="103.25" Foreground="White" VerticalAlignment="Center" TextWrapping="Wrap" LineHeight="AUTO">
Frans
<TextBlock.RenderTransform>
<RotateTransform Angle="90" />
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Canvas.Left="335" Canvas.Bottom="80" Foreground="White" VerticalAlignment="Center" Width="100" TextWrapping="Wrap" LineHeight="AUTO">
Boekhoudkundig inzicht
<TextBlock.RenderTransform>
<RotateTransform Angle="90" />
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Canvas.Left="410" Canvas.Bottom="150.5" Foreground="White" VerticalAlignment="Center" TextWrapping="Wrap" LineHeight="AUTO">
Netwerken1
<TextBlock.RenderTransform>
<RotateTransform Angle="90" />
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Canvas.Left="485" Canvas.Bottom="102.5" Foreground="White" VerticalAlignment="Center" TextWrapping="Wrap" LineHeight="AUTO">
Programmeren 1
<TextBlock.RenderTransform>
<RotateTransform Angle="90" />
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Canvas.Left="560" Canvas.Bottom="60" Foreground="White" VerticalAlignment="Center" Width="80" TextWrapping="Wrap" LineHeight="AUTO">
Software engineering 1
<TextBlock.RenderTransform>
<RotateTransform Angle="90" />
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Canvas.Left="635" Canvas.Bottom="135.5" Foreground="White" VerticalAlignment="Center" TextWrapping="Wrap" LineHeight="AUTO">
User interfaces 1
<TextBlock.RenderTransform>
<RotateTransform Angle="90" />
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Canvas.Left="710" Canvas.Bottom="60" Foreground="White" VerticalAlignment="Center" Width="80" TextWrapping="Wrap" LineHeight="AUTO">
Management accounting
<TextBlock.RenderTransform>
<RotateTransform Angle="90" />
</TextBlock.RenderTransform>
</TextBlock>
</Canvas>
</Viewbox>
<Border Grid.Row="0" Grid.Column="1" Width="180" Height="200" BorderThickness="1">
<TextBlock Grid.Row="0" Grid.Column="1" TextAlignment="Center" FontSize="20">Fred Sanchez</TextBlock>
</Border>
<StackPanel Orientation="Vertical" Grid.Row="1" Grid.Column="0">
<Border BorderThickness="1" BorderBrush="White" Cursor="Hand" Margin="5">
<TextBlock>
Fred Sanchez
<TextBlock.Background>
<SolidColorBrush Color="White" />
</TextBlock.Background>
</TextBlock>
</Border>
<Border BorderThickness="1" BorderBrush="White" Cursor="Hand" Margin="5">
<TextBlock>
Lois Weaver
<TextBlock.Background>
<SolidColorBrush Color="White" />
</TextBlock.Background>
</TextBlock>
</Border>
<Border BorderThickness="1" BorderBrush="White" Cursor="Hand" Margin="5">
<TextBlock>
Denise Andrews
<TextBlock.Background>
<SolidColorBrush Color="White" />
</TextBlock.Background>
</TextBlock>
</Border>
<Border BorderThickness="1" BorderBrush="White" Cursor="Hand" Margin="5">
<TextBlock>
Charles Butler
<TextBlock.Background>
<SolidColorBrush Color="White" />
</TextBlock.Background>
</TextBlock>
</Border>
<Border BorderThickness="1" BorderBrush="White" Cursor="Hand" Margin="5">
<TextBlock>
Joan Willis
<TextBlock.Background>
<SolidColorBrush Color="White" />
</TextBlock.Background>
</TextBlock>
</Border>
<Border BorderThickness="1" BorderBrush="White" Cursor="Hand" Margin="5">
<TextBlock>
Patrick Bailey
<TextBlock.Background>
<SolidColorBrush Color="White" />
</TextBlock.Background>
</TextBlock>
</Border>
<Border BorderThickness="1" BorderBrush="White" Cursor="Hand" Margin="5">
<TextBlock>
Michael Elliott
<TextBlock.Background>
<SolidColorBrush Color="White" />
</TextBlock.Background>
</TextBlock>
</Border>
<Border BorderThickness="1" BorderBrush="White" Cursor="Hand" Margin="5">
<TextBlock>
Wanda Bailey
<TextBlock.Background>
<SolidColorBrush Color="White" />
</TextBlock.Background>
</TextBlock>
</Border>
<Border BorderThickness="1" BorderBrush="White" Cursor="Hand" Margin="5">
<TextBlock>
Bonnie Collins
<TextBlock.Background>
<SolidColorBrush Color="White" />
</TextBlock.Background>
</TextBlock>
</Border>
<Border BorderThickness="1" BorderBrush="White" Cursor="Hand" Margin="5">
<TextBlock>
John Black
<TextBlock.Background>
<SolidColorBrush Color="White" />
</TextBlock.Background>
</TextBlock>
</Border>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Center">
<Border BorderThickness="1" BorderBrush="White">
<TextBlock Grid.Row="2" Grid.Column="1" TextAlignment="Center" FontSize="14" MouseLeftButtonUp="onSagemClicked" Margin="1">
Standaardafwijking en gemiddelde
<TextBlock.Background>
<SolidColorBrush Color="White" />
</TextBlock.Background>
</TextBlock>
</Border>
<Border BorderThickness="1" BorderBrush="White">
<TextBlock Grid.Row="2" Grid.Column="1" TextAlignment="Center" FontSize="14" Margin="1">
Minimum en maximum
<TextBlock.Background>
<SolidColorBrush Color="White" />
</TextBlock.Background>
</TextBlock>
</Border>
</StackPanel>
</Grid>
Related
I have an incredible annoying problem with accordion content template.
It shows perfectly, no problem with databinding or something else, but when i resize the browser window the tabControl inside the detail of the accordion doesn't resize at all.
It seems like the width is fixed but acctually it's not.
When the listbox has to change data because of the databinding, the tabcontrol resize perfectly to the new browser window size. Any suggestions please?
My code is:
<layoutToolkit:Accordion.ContentTemplate>
<DataTemplate>
<!--#Sinergia Wave2-->
<Grid>
<sdk:TabControl Grid.Row="1" Grid.ColumnSpan="4" Loaded="ListBox_Loaded" SizeChanged="ListaDetailControlli_SizeChanged">
<sdk:TabItem Header="Controlli">
<Grid Visibility="{Binding HasItems, Converter={StaticResource ConvertBooleanToVisible}}">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10" />
<ColumnDefinition Width="300" />
<!--Colonna del semaforo -->
<ColumnDefinition Width="44" />
<ColumnDefinition Width="300*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="0" Grid.ColumnSpan="4" Orientation="Horizontal">
<Grid SizeChanged="Grid_SizeChanged" Background="#FFC1C1C1" Height="25">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10" />
<ColumnDefinition Width="300" />
<!--Colonna del semaforo -->
<ColumnDefinition Width="44" />
<ColumnDefinition Width="300*" />
</Grid.ColumnDefinitions>
<dataInput:Label Grid.Column="1" FontSize="12" FontWeight="Bold" Content="Controllo" HorizontalAlignment="Left" VerticalAlignment="Center" />
<dataInput:Label Grid.Column="3" FontSize="12" FontWeight="Bold" Content="Dettagli" HorizontalAlignment="Left" VerticalAlignment="Center" />
</Grid>
</StackPanel>
<ListBox Name="ListaDetailControlli" BorderThickness="0" Grid.Row="1" Grid.ColumnSpan="4" ItemsSource="{Binding ListaControlli}" SelectionMode="Single"
SelectedItem="{Binding SelectedTask, Mode=TwoWay}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Auto">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="22" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300" />
<ColumnDefinition Width="44" />
<ColumnDefinition Width="300*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" FontSize="10" Margin="2,0,4,0" VerticalAlignment="Center" HorizontalAlignment="Stretch" TextAlignment="Left"
Text="{Binding DescrizioneControllo}" />
<Canvas Grid.Column="1"
Width="22"
Height="22"
Margin="0,0,4,0">
<Image Source="/Image/Traffic-no-light.png"
Width="22"
Height="22"
Margin="0,0,4,0" />
<Ellipse Canvas.Left="7"
Canvas.Top="2"
Width="8"
Height="8"
Fill="{Binding ColoreControllo}" />
<Ellipse Canvas.Left="7"
Canvas.Top="11"
Width="8"
Height="8"
Fill="{Binding ColoreControllo}" />
</Canvas>
<!-- #135162;dv;; Pannello Controlli -->
<TextBlock Grid.Column="2" FontSize="10" Margin="2,0,4,0" TextAlignment="Left" Text="{Binding DettaglioControllo}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</sdk:TabItem>
<sdk:TabItem Header="Task" GotFocus="TabTask_GotFocus">
<Grid VerticalAlignment="Stretch">
<Border BorderThickness="0" VerticalAlignment="Center" HorizontalAlignment="Center">
<TextBlock Foreground="Red" FontSize="18" FontWeight="Bold" Text="Non รจ presente nessun task per il giorno selezionato" TextWrapping="Wrap"
Visibility="{Binding Path=HasTask, Converter={StaticResource ConvertBooleanToVisibleNegato}}" />
</Border>
<ScrollViewer BorderThickness="0" Visibility="{Binding Path=HasTask, Converter={StaticResource ConvertBooleanToVisible}}">
<ListBox x:Name="ListaTask" BorderThickness="0" Tag="{Binding ID_SERBATOIO}" MinWidth="250" Margin="-2,-1,-2,0" HorizontalAlignment="Stretch"
ItemContainerStyle="{StaticResource CheckBoxItemContainerStyleWithStatusDiari}" ItemsSource="{Binding ListaTask}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0">
<StackPanel>
<Border x:Name="BorderDrop" Height="20" Margin="8,0,0,0" Background="Gray" BorderThickness="4" Canvas.ZIndex="-2" CornerRadius="9"
Opacity="0.8" Padding="0" Visibility="Collapsed">
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Offset="0.2" Color="Black" />
<GradientStop Offset="0.8" Color="#FFCDCCCC" />
</LinearGradientBrush>
</Border.BorderBrush>
</Border>
<controlsLIB:TaskMultiTemp DataContext="{Binding }" PannelloOspitante="{Binding LayoutOspitante,ElementName=panValidazioneOperatori,
Mode=OneWay}"
TemplateTipo="{Binding TemplateMultiTemp,ElementName=panValidazioneOperatori,Mode=OneWay}" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
</Grid>
</sdk:TabItem>
</sdk:TabControl>
</Grid>
</DataTemplate>
I have a basic UI where there are 6 textblocks, 3 for the values and 3 for the related headers. What I had set out originally was positioning the textblocks using the grid and column positions. This looked fine except for the value textblocks were positioned too close to their header teckblocks.
So to try an alternative solution, in my below code I wrapped each set of textblocks in a stackpanel and supplied a margin for the header textblock. But when testing all six controls appear bunched up together in the top right corner of the screen.
Question:
Does anyone know how to position a set of textblocks, stacked and with a space between the first and second block in each set?
During debug I tried playing around with the margin size on each stackpanel which didn't do anything to fix the layout.
Xaml markup of the UI:
<Grid x:Name="LayoutRoot" Background="#FF236A93">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition />
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- ContentPanel contains details text. Place additional content here -->
<Grid x:Name="ContentPanel"
Grid.Row="1"
Height="600"
Margin="5,0,5,0"
Visibility="Visible">
<Grid.RowDefinitions>
<RowDefinition Height="1.6*" />
<RowDefinition Height="1.6*" />
<RowDefinition Height="1.6*" />
<RowDefinition Height="2*" />
<RowDefinition Height="2*" />
<RowDefinition Height="1.3*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*" />
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal">
<TextBlock Grid.Row="0"
Grid.Column="1"
Margin="0,0,5,0"
Width="270"
Height="72"
HorizontalAlignment="Right"
VerticalAlignment="Top"
FontSize="24"
Foreground="Gray"
Text="Hourly Tariff:" />
<TextBlock Grid.Row="0"
Grid.Column="1"
Width="270"
Height="72"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
FontSize="24"
Foreground="White"
Text="{Binding SelectedZone.TariffPH}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Grid.Row="1"
Grid.Column="1"
Width="270"
Height="72"
Margin="0,0,5,0"
HorizontalAlignment="Right"
VerticalAlignment="Top"
FontSize="24"
Foreground="Gray"
Text="Hours Open:" />
<TextBlock Grid.Row="1"
Grid.Column="1"
Width="270"
Height="72"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
FontSize="24"
Foreground="White"
Text="{Binding SelectedZone.HoursOpen}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Grid.Row="2"
Grid.Column="1"
Width="270"
Height="72"
Margin="0,0,5,0"
HorizontalAlignment="Right"
VerticalAlignment="Top"
FontSize="24"
Foreground="Gray"
Text="Days Open:" />
<TextBlock Grid.Row="2"
Grid.Column="1"
Width="270"
Height="72"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
FontSize="24"
Foreground="White"
Text="{Binding SelectedZone.DaysOpen}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Grid.Row="3"
Grid.Column="1"
Width="270"
Height="72"
Margin="0,0,5,0"
HorizontalAlignment="Right"
VerticalAlignment="Top"
FontSize="24"
Foreground="Gray"
Text="Parking Restrictions:" />
<TextBlock Grid.Row="3"
Grid.Column="1"
Width="270"
Height="72"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
FontSize="24"
Foreground="White"
Text="{Binding SelectedZone.Restrictions}" />
</StackPanel>
</Grid>
</Grid>
Proposed layout of UI:
If it were me, I'd just turn all that noise into something more like this for easier maintenance/readability and less objects in the DOM;
<!-- ContentPanel contains details text. Place additional content here -->
<StackPanel x:Name="ContentPanel"
Grid.Row="1" Margin="5,0">
<StackPanel.Resources>
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="24"/>
<Setter Property="Width" Value="270"/>
<Setter Property="Foreground" Value="Gray"/>
<Setter Property="Margin" Value="0,5"/>
</Style>
</StackPanel.Resources>
<TextBlock>
<Run Text="Hourly Tariff:"/>
<LineBreak/>
<Run Text="{Binding SelectedZone.TariffPH}" Foreground="White"/>
</TextBlock>
<TextBlock>
<Run Text="Hours Open:"/>
<LineBreak/>
<Run Text="{Binding SelectedZone.HoursOpen}" Foreground="White"/>
</TextBlock>
<TextBlock>
<Run Text="Days Open:"/>
<LineBreak/>
<Run Text="{Binding SelectedZone.DaysOpen}" Foreground="White"/>
</TextBlock>
<TextBlock>
<Run Text="Parking Restrictions:"/>
<LineBreak/>
<Run Text="{Binding SelectedZone.Restrictions}" Foreground="White"/>
</TextBlock>
</StackPanel>
ADDENDUM: Just noticed you had your StackPanel's Horizontal. For the Same effect just remove the <LineBreak/> lines and they'll be horizontal.
If you paste this code in the mainpage of a new UWP app (or look at the 1st picture) you can see that the orange grid is taking more space than needed (VerticalAlignment is set to top). To make it work like it should, you have to set the 2nd row's height of this grid to Auto (see 2nd picture). The problem is that I want to give the extra space to the 2nd/last row and not to distribute it across all rows.
Putting the controls in the left column inside their own grid works (obviously, because there is no rowspan) but I can't do that because when the screen narrows the stackpanel in the right column goes inside a row in the left column.
The second problem is that if you click on the orange/green/yellow space, focus goes always to the textbox in the first row (yellow).
UPDATE: both problems are fixed without the scrollviewer but I clearly need it.
<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">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ScrollViewer Background="DarkGreen" VerticalScrollBarVisibility="Auto">
<Grid Background="DarkOrange" Margin="10" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Background="Yellow">
<TextBlock Text="Title" />
<TextBox Margin="20" />
</StackPanel>
<Grid Grid.Row="1" Background="DeepPink" VerticalAlignment="Top">
<ListView Margin="10" VerticalAlignment="Top">
<ListView.Items>
<TextBlock Text="Item1" />
</ListView.Items>
</ListView>
</Grid>
<StackPanel Grid.Column="1" Grid.RowSpan="2" Background="Blue" VerticalAlignment="Top">
<StackPanel>
<TextBlock Text="Title1" />
<GridView Margin="0,10,0,0">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="4" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.Items>
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
</GridView.Items>
</GridView>
</StackPanel>
<StackPanel>
<TextBlock Text="Title2" />
<GridView Margin="0,10,0,0">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="4" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.Items>
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
</GridView.Items>
</GridView>
</StackPanel>
</StackPanel>
</Grid>
</ScrollViewer>
</Grid>
I found a workaround. Since the first row is not going to expand or change, I set the first row's MaxHeight property equal to the actual height of the row at runtime.
For the second problem set the IsTabStop property of the scrollviewer to True as explained here:
https://social.msdn.microsoft.com/Forums/windowsapps/en-US/32e026dd-8338-4c19-a7d6-1bb8797044b3/first-input-control-in-the-scroll-viewer-is-always-getting-focused?prof=required
I am not able to get this working. I have a page to show some info and I have divided it into 6 rows. I want that each row take space as they do now but the latest one (which has a map and an image) takes all left till it fill the space.
This is my xaml:
<phone:PhoneApplicationPage
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Maps="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps"
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
xmlns:UI="clr-namespace:Microsoft.Advertising.Mobile.UI;assembly=Microsoft.Advertising.Mobile.UI"
x:Class="MyApp.EventMoreInfoNoPhoto"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="True">
<StackPanel x:Name="swippingSurface">
<Grid x:Name="LayoutRoot"
HorizontalAlignment="Stretch"
Margin="0,0,0,0"
VerticalAlignment="Stretch"
Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Grid.Row="0"
Grid.ColumnSpan="6"
BorderThickness="0"
BorderBrush="DarkRed">
<Border.Background>
<LinearGradientBrush EndPoint="1,0" StartPoint="1,1">
<GradientStop Color="DarkRed" Offset="0" />
<GradientStop Color="DarkRed" Offset="1" />
</LinearGradientBrush>
</Border.Background>
</Border>
<Border Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="1"
BorderThickness="0"
BorderBrush="Red">
<Border.Background>
<LinearGradientBrush EndPoint="1,0" StartPoint="1,1">
<GradientStop Color="Red" Offset="0" />
<GradientStop Color="Red" Offset="1" />
</LinearGradientBrush>
</Border.Background>
</Border>
<Border Grid.Row="2"
Grid.Column="0"
Grid.ColumnSpan="1"
BorderThickness="0"
BorderBrush="Red">
<Border.Background>
<LinearGradientBrush EndPoint="1,0" StartPoint="1,1">
<GradientStop Color="Red" Offset="0" />
<GradientStop Color="Red" Offset="1" />
</LinearGradientBrush>
</Border.Background>
</Border>
<Border Grid.Row="3"
Grid.Column="0"
Grid.ColumnSpan="1"
BorderThickness="0"
BorderBrush="Red">
<Border.Background>
<LinearGradientBrush EndPoint="1,0" StartPoint="1,1">
<GradientStop Color="Red" Offset="0" />
<GradientStop Color="Red" Offset="1" />
</LinearGradientBrush>
</Border.Background>
</Border>
<Border Grid.Row="4"
Grid.Column="0"
Grid.ColumnSpan="1"
BorderThickness="0"
BorderBrush="Red">
<Border.Background>
<LinearGradientBrush EndPoint="1,0" StartPoint="1,1">
<GradientStop Color="Red" Offset="0" />
<GradientStop Color="Red" Offset="1" />
</LinearGradientBrush>
</Border.Background>
</Border>
<Border Grid.Row="5"
Grid.Column="0"
Grid.ColumnSpan="1"
BorderThickness="0"
BorderBrush="Red">
<Border.Background>
<LinearGradientBrush EndPoint="1,0" StartPoint="1,1">
<GradientStop Color="Red" Offset="0" />
<GradientStop Color="Red" Offset="1" />
</LinearGradientBrush>
</Border.Background>
</Border>
<Border Grid.Row="6"
Grid.RowSpan="2"
Grid.Column="0"
x:Name="photo_border"
Grid.ColumnSpan="1"
BorderThickness="0"
BorderBrush="Red">
<Border.Background>
<LinearGradientBrush EndPoint="1,0" StartPoint="1,1">
<GradientStop Color="Red" Offset="0" />
<GradientStop Color="Red" Offset="1" />
</LinearGradientBrush>
</Border.Background>
</Border>
<Border Grid.Row="2" Grid.Column="1"
Grid.ColumnSpan="5"
BorderThickness="0"
Opacity="0.3"
BorderBrush="DarkGray">
<Border.Background>
<LinearGradientBrush EndPoint="1,0" StartPoint="1,1">
<GradientStop Color="DarkGray" Offset="0" />
<GradientStop Color="DarkGray" Offset="1" />
</LinearGradientBrush>
</Border.Background>
</Border>
<Border Grid.Row="4" Grid.Column="1"
Grid.ColumnSpan="5"
BorderThickness="0"
Opacity="0.3"
BorderBrush="DarkGray">
<Border.Background>
<LinearGradientBrush EndPoint="1,0" StartPoint="1,1">
<GradientStop Color="DarkGray" Offset="0" />
<GradientStop Color="DarkGray" Offset="1" />
</LinearGradientBrush>
</Border.Background>
</Border>
<Image HorizontalAlignment="Center"
Grid.Row="0"
Grid.Column="4"
Source="/Resources/text_black.png"
VerticalAlignment="Center"
Width="40"
Margin="0,0,0,0"/>
<Image HorizontalAlignment="Center"
Grid.Row="0"
Grid.Column="5"
Source="/Resources/big_map_white.png"
VerticalAlignment="Center"
Width="40"
Margin="0,0,0,0"/>
<TextBlock Text="Info"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Grid.Column="0"
Margin="0,0,0,0"
Style="{StaticResource PhoneTextNormalStyle}"/>
<Image HorizontalAlignment="Center"
Source="/Resources/label.png"
Height="65"
VerticalAlignment="Center"
Width="69"
Grid.Row="1"
Margin="0,0,0,0"/>
<Image HorizontalAlignment="Center"
Height="65"
Grid.Row="2"
Source="/Resources/label.png"
VerticalAlignment="Center"
Width="69"
Margin="0,0,0,0"/>
<Image HorizontalAlignment="Center"
Height="65"
Grid.Row="3"
Source="/Resources/calendar.png"
VerticalAlignment="Center"
Width="69"
Margin="0,0,0,0"/>
<Image HorizontalAlignment="Center"
Height="65"
Grid.Row="4"
Source="/Resources/calendar.png"
VerticalAlignment="Center"
Width="69"
Margin="0,0,0,0"/>
<Image HorizontalAlignment="Center"
Height="65"
Grid.Row="5"
Source="/Resources/comment.png"
VerticalAlignment="Center"
Width="69"
Margin="0,0,0,0"/>
<Image HorizontalAlignment="Center"
x:Name="map_icon"
Height="65"
Grid.Row="6"
Source="/Resources/map_white.png"
VerticalAlignment="Center"
Width="69"
Margin="0,0,0,0"/>
<TextBlock HorizontalAlignment="Left"
x:Name="list_event_topic"
Grid.Column="1"
Margin="0,0,0,0"
TextWrapping="Wrap"
Text=""
Grid.Row="1"
Grid.ColumnSpan="5"/>
<TextBlock HorizontalAlignment="Left"
x:Name="list_event_title"
Grid.Column="1"
Margin="0,0,0,0"
Grid.Row="2"
Grid.ColumnSpan="5"
TextWrapping="Wrap"
Text=""/>
<TextBlock HorizontalAlignment="Left"
x:Name="date_init"
Margin="0,0,0,0" TextWrapping="Wrap"
Text=""
VerticalAlignment="Top"
Grid.Row="3"
Grid.Column="1"
Grid.ColumnSpan="5"/>
<TextBlock HorizontalAlignment="Left"
x:Name="date_end"
Margin="0,0,0,0"
TextWrapping="Wrap"
Text=""
VerticalAlignment="Top"
Grid.Row="4"
Grid.Column="1"
Grid.ColumnSpan="5"/>
<TextBlock Grid.Column="1"
x:Name="comment_area"
HorizontalAlignment="Left"
Margin="10,10,0,0"
Grid.Row="5"
TextWrapping="Wrap"
Text=""
VerticalAlignment="Top"
Grid.ColumnSpan="5"
/>
<Maps:Map x:Name="map_event_detail"
Grid.ColumnSpan="5"
HorizontalAlignment="Stretch"
Margin="0,0,0,0"
Grid.Column="1"
Tap="onTapMap"
Grid.Row="6"
Width="auto"
VerticalAlignment="Stretch"
>
<Maps:Pushpin x:Name="pinEvent"
Background="Green"
BorderBrush="Black"
BorderThickness="1"
Visibility="Collapsed" />
</Maps:Map>
</Grid>
</StackPanel>
</phone:PhoneApplicationPage>
But my problem is that after the map ends, there are some empty space. I have tried using Stretch in VerticalAligment but I can't.
What am I doing wrong here? I am sure it is something stupid.
I want to desing this for a Windows Phone 8.1 app: https://drive.google.com/file/d/0B1DvAPVaaQiyT3dOMDhfcHNJSVk/edit?usp=sharing
I do it with hard code:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="1" Margin="0,0,0,0" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Common:RingSlice InnerRadius="100" Radius="150" Fill="White" StartAngle="0" EndAngle="358"/>
<Common:RingSlice InnerRadius="100" Radius="115" Fill="Maroon" StartAngle="-0.3" EndAngle="356.9"/>
<Grid Margin="0,0,0,0" RenderTransformOrigin="0.5, 0.5">
<Grid.RenderTransform>
<CompositeTransform Rotation="10.88" CenterX="0" CenterY="0" ScaleX="1.1" ScaleY="1.1"/>
</Grid.RenderTransform>
<TextBlock VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="7" RenderTransformOrigin="0.5,0.5">7:30
<TextBlock.RenderTransform>
<RotateTransform Angle="270"/>
</TextBlock.RenderTransform></TextBlock>
</Grid>
<Grid Margin="0,0,0,0" RenderTransformOrigin="0.5, 0.5">
<Grid.RenderTransform>
<CompositeTransform Rotation="32.56" CenterX="0" CenterY="0" ScaleX="1.1" ScaleY="1.1"/>
</Grid.RenderTransform>
<TextBlock VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="7" RenderTransformOrigin="0.5,0.5">8:30
<TextBlock.RenderTransform>
<RotateTransform Angle="270"/>
</TextBlock.RenderTransform></TextBlock>
</Grid>
<Grid Margin="0,0,0,0" RenderTransformOrigin="0.5, 0.5">
<Grid.RenderTransform>
<CompositeTransform Rotation="74.18" CenterX="0" CenterY="0" ScaleX="1.1" ScaleY="1.1"/>
</Grid.RenderTransform>
<TextBlock VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="7" RenderTransformOrigin="0.5,0.5">10:30
<TextBlock.RenderTransform>
<RotateTransform Angle="270"/>
</TextBlock.RenderTransform></TextBlock>
</Grid>
<Grid Margin="0,0,0,0" RenderTransformOrigin="0.5, 0.5">
<Grid.RenderTransform>
<CompositeTransform Rotation="115.71" CenterX="0" CenterY="0" ScaleX="1.1" ScaleY="1.1"/>
</Grid.RenderTransform>
<TextBlock VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="7" RenderTransformOrigin="0.5,0.5">12:30
<TextBlock.RenderTransform>
<RotateTransform Angle="270"/>
</TextBlock.RenderTransform></TextBlock>
</Grid>
<Grid Margin="0,0,0,0" RenderTransformOrigin="0.5, 0.5">
<Grid.RenderTransform>
<CompositeTransform Rotation="137.47" CenterX="0" CenterY="0" ScaleX="1.1" ScaleY="1.1"/>
</Grid.RenderTransform>
<TextBlock VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="7" RenderTransformOrigin="0.5,0.5">13:30
<TextBlock.RenderTransform>
<RotateTransform Angle="270"/>
</TextBlock.RenderTransform></TextBlock>
</Grid>
<Grid Margin="0,0,0,0" RenderTransformOrigin="0.5, 0.5">
<Grid.RenderTransform>
<CompositeTransform Rotation="169.12" CenterX="0" CenterY="0" ScaleX="1.1" ScaleY="1.1"/>
</Grid.RenderTransform>
<TextBlock VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="7" RenderTransformOrigin="0.5,0.5">15:00
<TextBlock.RenderTransform>
<RotateTransform Angle="270"/>
</TextBlock.RenderTransform></TextBlock>
</Grid>
<Grid Margin="0,0,0,0" RenderTransformOrigin="0.5, 0.5">
<Grid.RenderTransform>
<CompositeTransform Rotation="200.76" CenterX="0" CenterY="0" ScaleX="1.1" ScaleY="1.1"/>
</Grid.RenderTransform>
<TextBlock VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="7" RenderTransformOrigin="0.5,0.5">16:30
<TextBlock.RenderTransform>
<RotateTransform Angle="90"/>
</TextBlock.RenderTransform></TextBlock>
</Grid>
<Grid Margin="0,0,0,0" RenderTransformOrigin="0.5, 0.5">
<Grid.RenderTransform>
<CompositeTransform Rotation="232.41" CenterX="0" CenterY="0" ScaleX="1.1" ScaleY="1.1"/>
</Grid.RenderTransform>
<TextBlock VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="7" RenderTransformOrigin="0.5,0.5">18:00
<TextBlock.RenderTransform>
<RotateTransform Angle="90"/>
</TextBlock.RenderTransform></TextBlock>
</Grid>
<Grid Margin="0,0,0,0" RenderTransformOrigin="0.5, 0.5">
<Grid.RenderTransform>
<CompositeTransform Rotation="254.18" CenterX="0" CenterY="0" ScaleX="1.1" ScaleY="1.1"/>
</Grid.RenderTransform>
<TextBlock VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="7" RenderTransformOrigin="0.5,0.5">19:00
<TextBlock.RenderTransform>
<RotateTransform Angle="90"/>
</TextBlock.RenderTransform></TextBlock>
</Grid>
<Grid Margin="0,0,0,0" RenderTransformOrigin="0.5, 0.5">
<Grid.RenderTransform>
<CompositeTransform Rotation="275.94" CenterX="0" CenterY="0" ScaleX="1.1" ScaleY="1.1"/>
</Grid.RenderTransform>
<TextBlock VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="7" RenderTransformOrigin="0.5,0.5">20:00
<TextBlock.RenderTransform>
<RotateTransform Angle="90"/>
</TextBlock.RenderTransform></TextBlock>
</Grid>
<Grid Margin="0,0,0,0" RenderTransformOrigin="0.5, 0.5">
<Grid.RenderTransform>
<CompositeTransform Rotation="307.59" CenterX="0" CenterY="0" ScaleX="1.1" ScaleY="1.1"/>
</Grid.RenderTransform>
<TextBlock VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="7" RenderTransformOrigin="0.5,0.5">21:30
<TextBlock.RenderTransform>
<RotateTransform Angle="90"/>
</TextBlock.RenderTransform></TextBlock>
</Grid>
<Grid Margin="0,0,0,0" RenderTransformOrigin="0.5, 0.5">
<Grid.RenderTransform>
<CompositeTransform Rotation="339.24" CenterX="0" CenterY="0" ScaleX="1.1" ScaleY="1.1"/>
</Grid.RenderTransform>
<TextBlock VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="7" RenderTransformOrigin="0.5,0.5">23:00
<TextBlock.RenderTransform>
<RotateTransform Angle="90"/>
</TextBlock.RenderTransform></TextBlock>
</Grid>
</Grid>
</Grid>
But I want to add the textblocks with the hours with data binding, something like this:
<ItemsControl Name="cig" DataContext="{Binding FirstGroup}" d:DataContext="{Binding Groups[0], Source={d:DesignData Source=/DataModel/SampleData.json, Type=data:SampleDataSource}}" ItemsSource="{Binding Items}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Margin="0,0,0,0" RenderTransformOrigin="0.5, 0.5">
<Grid.RenderTransform>
<CompositeTransform Rotation="{Binding Angle}" CenterX="0" CenterY="0" ScaleX="1.1" ScaleY="1.1"/>
</Grid.RenderTransform>
<TextBlock VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="7" RenderTransformOrigin="0.5,0.5" Text="{Binding Title}">
<TextBlock.RenderTransform>
<RotateTransform Angle="90"/>
</TextBlock.RenderTransform></TextBlock>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I try to do this with above code but the alignement of textblocks is not proper, and looks like the following image: https://drive.google.com/file/d/0B1DvAPVaaQiyVmpZSkthS3oxLTg/edit?usp=sharing
Please, help me!!!!