Question

I’ve got a list of strings I’m binding to an items control.

The strings are displayed in textblocks I’ve declared in the itemscontrol template. I’ve rotated the textblocks 270 so that the text is on its side – I’ve also translated the textblocks down by their width so that they are at the top of the page.

My issue is they are now too far apart as its keeping the original width rather than the transformed width. I can understand why its doing it, but I need to get them stacked together with no gap.

Can anyone point me in the right direction please?

<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="354" Width="632"
        DataContext="{Binding RelativeSource={RelativeSource Self}}" >
<Window.Resources>
    <TransformGroup x:Key="Rotate">
        <RotateTransform Angle="270" />
        <TranslateTransform Y="200" />
    </TransformGroup>
</Window.Resources>
<StackPanel Orientation="Vertical">
    <ItemsControl ItemsSource="{Binding MyStrings}" HorizontalAlignment="Left"  >
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Border BorderThickness="1" BorderBrush="Black" Width="200" Height="20" RenderTransform="{StaticResource Rotate}" >
                    <TextBlock Text="{Binding }"  >
                    </TextBlock>
                </Border>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</StackPanel>
</Window>

and the code behind is just …

using System.Collections.Generic;
using System.Windows;

namespace WpfApplication1
{
/// <summary>
/// Interaction logic for Window1.xaml
/// </summary>
public partial class Window1 : Window
{
    public Window1()
    {
        MyStrings = new List<string> {"monkey", "turtle", "rabbit"};
        InitializeComponent();
    }

    public List<string> MyStrings { get; set; }

}
}

Answer 1

Use LayoutTransform instead of RenderTransform. That will ensure layout logic takes into account the transformed location of the items.

<Border BorderThickness="1" BorderBrush="Black" Width="200" Height="20" LayoutTransform="{StaticResource Rotate}">