i am trying to make a ListBox that contains a string at right side of Item and one in left side i've tried this but those string become over each other.
<ListBox Name="ChaptersList" Height="200" Margin="10,10,10,0" VerticalAlignment="Top" SelectionChanged="ChaptersList_SelectionChanged" MouseDoubleClick="ChaptersList_MouseDoubleClick" RenderTransformOrigin="0.5,0.5" TextOptions.TextHintingMode="Animated">
<ListBox.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</ListBox.RenderTransform>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Label Content="{Binding Path=Title}" VerticalAlignment="Center" Margin="5"/>
<Label Content="{Binding Path=Name}" HorizontalAlignment="Right" Margin="5"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
(my first string should be multiline)
You can use Grid with two rows (where Height is set to Auto) and to text wrapping behaviour you must add ScrollViewer.HorizontalScrollBarVisibility="Disabled" property to ListBox.
<ListBox Name="ChaptersList"
Height="250" Margin="10,10,10,0" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5" TextOptions.TextHintingMode="Animated"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
>
<ListBox.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</ListBox.RenderTransform>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{Binding Path=Title}" TextWrapping="Wrap" HorizontalAlignment="Left" Margin="5"/>
<TextBlock Grid.Row="1" Text="{Binding Path=Name}" HorizontalAlignment="Right" Margin="5"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Use StackPanel:
<ListBox Name="ChaptersList" Height="200" Margin="10,10,10,0" VerticalAlignment="Top" SelectionChanged="ChaptersList_SelectionChanged" MouseDoubleClick="ChaptersList_MouseDoubleClick" RenderTransformOrigin="0.5,0.5" TextOptions.TextHintingMode="Animated">
<ListBox.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</ListBox.RenderTransform>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Label Content="{Binding Path=Title}" VerticalAlignment="Center" Margin="5"/>
<Label Content="{Binding Path=Name}" HorizontalAlignment="Right" Margin="5"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
EDIT: i've found an easy solution: using Expression Blend end edit Template. it gives you a designer to adjust layouts.
Related
I have a listbox in WPF which consists of few labels and a rectangle.
I am trying to get all the label values of items in a ListBox.
My WPF markup for ListBox is:
<ListBox x:Name="izabraniList" ItemTemplate="{DynamicResource izabraniIzbornik}" Margin="0,80,10,108" HorizontalAlignment="Right" Width="289" Background="{x:Null}" ScrollViewer.HorizontalScrollBarVisibility="Hidden">
<ListBox.Resources>
<DataTemplate x:Key="izabraniIzbornik">
<Border BorderBrush="white" CornerRadius="2,2,2,2" BorderThickness="1,1,1,1">
<StackPanel Orientation="Horizontal" Width="254" Height="64" UseLayoutRounding="False" Opacity="100">
<DockPanel>
<Rectangle Height="62" Width="62"
Margin="2,0" RadiusX="5" RadiusY="5" >
<Rectangle.Fill>
<ImageBrush ImageSource="{Binding Path=ART_SIFRA, Converter={StaticResource ImageSourceConverter}}"/>
</Rectangle.Fill>
</Rectangle>
</DockPanel>
<DockPanel Width="133" >
<Label Content="{Binding ART_NAZIV}"
VerticalAlignment="Center"
HorizontalAlignment="left"
FontSize="12" Width="auto" Foreground="#FF303030" FontWeight="Bold" />
</DockPanel>
<DockPanel HorizontalAlignment="right" Width="55" Height="64">
<DockPanel HorizontalAlignment="Right" VerticalAlignment="top" Height="20" FlowDirection="RightToLeft"/>
<DockPanel HorizontalAlignment="Right" VerticalAlignment="bottom" Height="64" FlowDirection="RightToLeft" Width="55">
<Label x:Name="cijena" Content="{Binding SKC_PRICE}" FontSize="11" DockPanel.Dock="Right" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="Bold" Width="55" />
<Label Content="{Binding kolicina}" FontSize="11" DockPanel.Dock="Right" HorizontalAlignment="left" VerticalAlignment="top" FontWeight="Bold" Width="55" />
</DockPanel>
</DockPanel>
</StackPanel>
</Border>
</DataTemplate>
</ListBox.Resources>
</ListBox>
And I would like to do something like this:
For Each i As String In izabraniList.Items("SKC_PRICE")
Console.WriteLine(i)
Next
make a separate property in your class that flattens the list (i.e.
public string property { get { return String.Join(", ", izabranilist.Select(x => x.Skc_Price).toarray()); } }
and then bind that to the label.
I've set up binding of a double value to an AngularBlockBar control. There are two gauges in the layout, but the AngularBlockBar which is over layed on top of the AngularGauge doesn't show its binding value updating on screen, although valid binding values are being updated to it.
To debug this, I've checked first that the binding value that is bound to the AngularBlockBar is valid and this shows as true by setting a break point.
The binding value shows as valid.
I'm thinking its because of the way the two gauges are over layed over each other, which causes the AngularBlockBar's binding to not show.
Does anyone know what the issue could be here, that prevents the AngularblockBar's binding from being shown on screen?
The layout below is the main user control of the application where the two gauges are over layed. The first gauge updates correctly with a white fill value as shown in the screen shot below. But the AngularBlockBar which has a blue fill value isn't updated
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:gauges="http://gu.se/Gauges"
xmlns:local="clr-namespace:MyoTestv4"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" x:Class="MyoTestv4.AdductionAbductionFlexionView"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Viewbox>
<Grid HorizontalAlignment="Left" Height="280" Margin="10,10,0,0" VerticalAlignment="Top" Width="280">
<TextBox HorizontalAlignment="Left" x:Name="statusTbx" Background="#141c28" Foreground="White" BorderBrush="#141c28" Height="30" Margin="0,3,0,0" TextWrapping="Wrap" Text="{Binding CurrentStatus}" VerticalAlignment="Top" Width="75"/>
<TextBox HorizontalAlignment="Left" x:Name="poseStatusTbx" Background="#141c28" Foreground="White" BorderBrush="#141c28" Height="39" Margin="80,4,0,0" TextWrapping="Wrap" Text="{Binding PoseStatus}" VerticalAlignment="Top" Width="75"/>
<TextBox HorizontalAlignment="Left" x:Name="degreeOfAbductionTbx" Background="#141c28" Foreground="White" Height="22" Margin="0,246,0,0" TextWrapping="Wrap" Text="{Binding DegreeStatus}" VerticalAlignment="Top" Width="47"/>
<Label Content="Arc start:" Foreground="#00bdde" HorizontalAlignment="Left" Margin="0,186,0,0" VerticalAlignment="Top" Width="57"/>
<Image HorizontalAlignment="Left" Source="pack://application:,,,/Images/abduction_side_trans.png" x:Name="exerciseImage" Height="100" Margin="0,33,0,0" VerticalAlignment="Top" Width="100"/>
<TextBox HorizontalAlignment="Left" x:Name="painfulArcEndTbx" Background="#141c28" Foreground="White" Height="22" Margin="62,217,0,0" TextWrapping="Wrap" Text="{Binding EndDegreeStatus}" VerticalAlignment="Top" Width="48"/>
<Label Content="Arc end:" Foreground="#00bdde" HorizontalAlignment="Left" Margin="0,217,0,0" VerticalAlignment="Top" Width="57"/>
<TextBox HorizontalAlignment="Left" x:Name="painfulArcStartTbx" Background="#141c28" Foreground="White" Height="23" Margin="62,189,0,0" TextWrapping="Wrap" Text="{Binding StartDegreeStatus}" VerticalAlignment="Top" Width="48"/>
<Grid>
<gauges:AngularGauge
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
IsDirectionReversed="False"
MajorTickFrequency="8"
FontSize="10"
MajorTicks="10"
MaxAngle="0"
Maximum="180"
MinAngle="-180"
Minimum="0"
Style="{StaticResource FatAngular}"
MinorTickFrequency="4"
Value="{Binding DegreeStatus}" Margin="149,2,-89,2" RenderTransformOrigin="0.5,0.5" Height="Auto" Width="Auto"
>
<gauges:AngularGauge.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-89.642"/>
<TranslateTransform/>
</TransformGroup>
</gauges:AngularGauge.RenderTransform>
</gauges:AngularGauge>
<gauges:AngularBlockBar
MaxAngle="180"
Maximum="1"
MinAngle="0"
Minimum="0"
Opacity="0.2"
ReservedSpace="50"
Margin="149,2,-96,0"
TickLength="55"
Fill="DodgerBlue"
Value="{Binding PainfulArcStatus}"
RenderTransformOrigin="0.5,0.5" >
<gauges:AngularBlockBar.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="90.711"/>
<TranslateTransform/>
</TransformGroup>
</gauges:AngularBlockBar.RenderTransform>
</gauges:AngularBlockBar>
</Grid>
<TextBlock HorizontalAlignment="Left" x:Name="repCntTblk" Margin="80,43,0,0" TextWrapping="Wrap" Text="" FontSize="38" Foreground="#00bdde" VerticalAlignment="Top" Width="34" Height="41"/>
<Button Content="Submit" x:Name="submitBtn" Command="{Binding Path=DataSubmitCommand}" IsDefault="True" IsCancel="True" HorizontalAlignment="Left" Background="#00bdde" Foreground="White" Margin="0,148,0,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="0.76,5.093"/>
</Grid>
</Viewbox>
</UserControl>
The first gauge binding being shown, but the over layed value for the block bar isn't shown.
Don't you need to define Grid.Column and/or Grid.Row on your guage and blockbar other wise they will just lay ontop of eachother?
example with Grid.ColumnDefinitions, you probably want RowDefinitions
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100px"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ComboBox ItemsSource="{Binding NavigationItems}" SelectedItem="{Binding SelectedNavigationItem, Mode=TwoWay}" Grid.Row="0" Grid.Column="0">
</ComboBox>
<ContentControl Content="{Binding SelectedNavigationItem}" Grid.Row="0" Grid.Column="1"/>
</Grid>
I have the below code. I am trying to place the image directly to the right of the textblock within the border, but the image is almost touching the right side of the screen. How can I allign the image to the right of the textblock
<Border BorderBrush="#FFD6D4D4" BorderThickness="0,0,0,1" Grid.Column="0" Grid.Row="1"
Height="28" VerticalAlignment="Top" Background="#FFF7F7F7"
HorizontalAlignment="Stretch">
<DockPanel LastChildFill="False">
<TextBlock DockPanel.Dock="Left"
Style="{StaticResource HeaderTextBlockStyle}"
Text="Check new items"
VerticalAlignment="Center" Margin="2" />
<Image
DockPanel.Dock="Left"
VerticalAlignment="Center"
SnapsToDevicePixels="True"
UseLayoutRounding="True"
RenderOptions.BitmapScalingMode="HighQuality"
Source="/Media/pointer.png"
RenderTransformOrigin="0.95,4.046"
HorizontalAlignment="Center" Margin="0"
Height="25.306" Width="25.008>
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="49.57"/>
<TranslateTransform X="-39.746" Y="-21.185"/>
</TransformGroup>
</Image.RenderTransform>
</Image>
</DockPanel>
</Border>
Try using the Grid control and define two columns into it
<Border BorderBrush="#FFD6D4D4" BorderThickness="0,0,0,1" Grid.Column="0" Grid.Row="1"
Height="28" VerticalAlignment="Top" Background="#FFF7F7F7"
HorizontalAlignment="Stretch">
<Grid>
<Grid.ColumnDefinitions>
<Column Definition Width="*"/>
<Column Definition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Style="{StaticResource HeaderTextBlockStyle}"
Text="Check new items"
VerticalAlignment="Center" Margin="2" />
<Image
Grid.Column="1" VerticalAlignment="Center"
SnapsToDevicePixels="True"
UseLayoutRounding="True"
RenderOptions.BitmapScalingMode="HighQuality"
Source="/Media/pointer.png"
RenderTransformOrigin="0.95,4.046"
HorizontalAlignment="Center" Margin="0"
Height="25.306" Width="25.008>
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="49.57"/>
<TranslateTransform X="-39.746" Y="-21.185"/>
</TransformGroup>
</Image.RenderTransform>
</Image>
</Grid>
</Border>
Try using a StackPanel with Orientation set to horizontal instead of the dockpanel. That should put the image right next to the textblock.
if you still want to use the dock panel try setting the margin you want, on the image like margin="0,0,100,0"
I have a listbox with ~20 items.If orientation is portait the margin of the grid must be "140,25,5,0" and width of stackpanel inside 320
If orientation is landscape margin must be "350,25,5,0" and width of stackpanel is 450.How I can change it dinamically such as conversation view in WP7?
<Grid x:Name="LayoutRoot" >
<ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled" x:Name="listmy">
<ListBox.ItemTemplate>
<DataTemplate>
<local:TypeMessage Content="{Binding}">
<local:TypeMessage.Me>
<DataTemplate>
<Grid HorizontalAlignment="Right" Margin="350,25,5,0">
<TextBlock HorizontalAlignment="Right" Margin="0,-25,30,0" TextWrapping="Wrap" Text="Вы" VerticalAlignment="Top"/>
<StackPanel Background="{StaticResource PhoneAccentBrush}" Width="320">
<TextBlock TextWrapping="Wrap" Foreground="{Binding read_state, Converter={StaticResource ReadConverter}}" Text="{Binding text}" Margin="5,3" />
<TextBlock Text="{Binding date_time}" TextAlignment="Right" Margin="5,0"/>
</StackPanel>
<Path Data="m 0,0 l 16,0 l 0,16 l -16,-16"
Fill="{StaticResource PhoneAccentBrush}"
HorizontalAlignment="Right" UseLayoutRounding="False" d:LayoutOverrides="VerticalAlignment, GridBox" Height="16" VerticalAlignment="Top" Margin="0,-15.167,8.757,0" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<CompositeTransform Rotation="91.157"/>
</Path.RenderTransform>
</Path>
</Grid>
</DataTemplate>
</local:TypeMessage.Me>
<local:TypeMessage.You>
<DataTemplate>
<Grid Margin="5,25,30,0" >
<Path Data="m 0,0 l 0,16 l 16,0 l -16,-16"
Fill="{StaticResource PhoneAccentBrush}"
Margin="9.5,-16,0,0" UseLayoutRounding="False" Height="16" VerticalAlignment="Top" d:LayoutOverrides="VerticalAlignment" HorizontalAlignment="Left"/>
<StackPanel Background="{StaticResource PhoneAccentBrush}" Width="320">
<TextBlock TextWrapping="Wrap" Foreground="{Binding read_state,Converter={StaticResource ReadConverter}}" Text="{Binding text}" />
<TextBlock TextAlignment="Right" Text="{Binding date_time}" />
</StackPanel>
<TextBlock HorizontalAlignment="Left" Margin="28,-27,0,0" TextWrapping="Wrap" Text="{Binding author_name}" VerticalAlignment="Top"/>
</Grid>
</DataTemplate>
</local:TypeMessage.You>
</local:TypeMessage>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
You could detect the orientation change (in the OnOrientationChanged event) and adjust the margins accordingly.
In terms of working with lots of items.
If items share the same margins you could bind the values and update the VM in the event handler.
If everything has a different margin it may be appropriate to use a different template for each orientation.
Alterntively you could look to move to a more fluid layout. Without seeing what the actual design(s) should be it's not posible to say how suitable this may be though.
I am trying to model the layout that is displayed in this image.
If you take a look, it has a number of textBoxes/checkboxes/buttons, a couple of diagonal controls, and another separate control (in a red outline).
The bottom screenshot shows what I would like to happen when a checkbox is checked in that separate control.
Any tips on how to lay this out and handle those diagonal portions? I tried just rotating textBlocks with borders but then the borders remain as rectangular, not cut off as in the image. I also had some trouble with getting them to position properly. I would also need the width of those diagonal sections to be bound somehow to the checkbox/textBox portion of that separate control in the red border.
Is my only choice to rotate borderless textBlocks and draw the lines myself using Paths and for the width expanding, bind it to some property of my separate control?
Thanks for any advice.
This looked like a fun challenge. Give the following XAML a try. It will automatically adjust the size of the columns as the content expands. The key is placing some canvas elements in a grid to allow the lines of the borders to flow into the adjacent cells. This could certainly be cleaned up with some styles and will be a little fragile if you need to tweak the sizes, but I think it demonstrates the approach:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="ButtonStyleTestApp.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
<Grid x:Name="LayoutRoot" Background="#FF44494D" SnapsToDevicePixels="True">
<Grid.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
</Grid.Resources>
<Grid Background="#DDD">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition MinWidth="30" Width="Auto"/>
<ColumnDefinition MinWidth="30" Width="Auto"/>
<ColumnDefinition MinWidth="30" Width="Auto"/>
<ColumnDefinition MinWidth="30" Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Border BorderThickness="1 1 0 1" BorderBrush="#888" Grid.Column="0" Grid.Row="1">
<TextBox Margin="10 5" VerticalAlignment="Center"/>
</Border>
<Border BorderThickness="1 1 0 1" BorderBrush="#888" Grid.Column="1" Grid.Row="1">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<CheckBox x:Name="CheckBox1" Margin="5" VerticalAlignment="Center"></CheckBox>
<TextBox Visibility="{Binding IsChecked, ElementName=CheckBox1, Converter={StaticResource BooleanToVisibilityConverter}}" Width="100" Margin="5" VerticalAlignment="Center"/>
</StackPanel>
</Border>
<Border BorderThickness="1 1 0 1" BorderBrush="#888" Grid.Column="2" Grid.Row="1">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<CheckBox x:Name="CheckBox2" Margin="5" VerticalAlignment="Center"></CheckBox>
<TextBox Visibility="{Binding IsChecked, ElementName=CheckBox2, Converter={StaticResource BooleanToVisibilityConverter}}" Width="100" Margin="5" VerticalAlignment="Center"/>
</StackPanel>
</Border>
<Border BorderThickness="1 1 0 1" BorderBrush="#888" Grid.Column="3" Grid.Row="1">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<CheckBox x:Name="CheckBox3" Margin="5" VerticalAlignment="Center"></CheckBox>
<TextBox Visibility="{Binding IsChecked, ElementName=CheckBox3, Converter={StaticResource BooleanToVisibilityConverter}}" Width="100" Margin="5" VerticalAlignment="Center"/>
</StackPanel>
</Border>
<Border BorderThickness="1" BorderBrush="#888" Grid.Column="4" Grid.Row="1">
<Button Margin="3" FontSize="10" VerticalAlignment="Center" Width="40">Click</Button>
</Border>
<Canvas Grid.Column="1">
<Grid ClipToBounds="False" Canvas.Top="30">
<Border
BorderBrush="#888"
BorderThickness="0 1 0 0"
RenderTransformOrigin="0 0"
Height="20"
Width="100"
Margin="0 0 0 -80">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-45"/>
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>
<TextBlock VerticalAlignment="Center" TextAlignment="Left" Margin="21 1 1 1" FontSize="11">
Testing 1
</TextBlock>
</Border>
</Grid>
</Canvas>
<Canvas Grid.Column="2">
<Grid ClipToBounds="False" Canvas.Top="30">
<Border
BorderBrush="#666"
BorderThickness="0 1 0 0"
RenderTransformOrigin="0 0"
Height="20"
Width="100"
Margin="0 0 0 -80">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-45"/>
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>
<TextBlock VerticalAlignment="Center" TextAlignment="Left" Margin="21 1 1 1" FontSize="11">
Testing 2
</TextBlock>
</Border>
</Grid>
</Canvas>
<Canvas Grid.Column="3">
<Grid ClipToBounds="False" Canvas.Top="30">
<Border
BorderBrush="#666"
BorderThickness="0 1 0 0"
RenderTransformOrigin="0 0"
Height="20"
Width="100"
Margin="0 0 0 -80">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-45"/>
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>
<TextBlock VerticalAlignment="Center" TextAlignment="Left" Margin="21 1 1 1" FontSize="11">
Testing 3
</TextBlock>
</Border>
</Grid>
</Canvas>
<Canvas Grid.Column="4">
<Grid ClipToBounds="False" Canvas.Top="30">
<Border
BorderBrush="#666"
BorderThickness="0 1 0 0"
RenderTransformOrigin="0 0"
Height="20"
Width="100"
Margin="0 0 0 -80">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-45"/>
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>
</Border>
</Grid>
</Canvas>
</Grid>
</Grid>
</Window>
I hope it helps.
It's definitely doable with borders and textblocks but it's tedious.
you'd have to play with negative margins a lot.
You could work it out with images instead of borders but you still need the textblocks on an angle using rendertransform
I'd definitely approach it using a Grid with a lot of columns of width Auto, place the easy components first then the tricky ones and do the rotations + neg margins last.
HTH.
As far as handling the diagonal elements goes, try putting the TextBlock within a Border, and transforming the border with a RotateTransform and SkewTransform. This should get you started:
<Grid HorizontalAlignment="Left" Height="100" Margin="64,60.5,0,0" VerticalAlignment="Top" Width="100" Background="Blue">
<Border BorderBrush="Black" BorderThickness="1" Margin="20,25.5,20.5,41.5" RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform AngleY="20"/>
<RotateTransform Angle="90"/>
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>
<TextBlock TextWrapping="Wrap" Text="TextBlock" RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="180"/>
<TranslateTransform/>
</TransformGroup>
</TextBlock.RenderTransform>
</TextBlock>
</Border>
</Grid>