Question

Howto get textblocks to appear before and after the TimeItem?

Answer

In this time item the Grid with name Rect is the one that gets the size based on Start and Stop datetime values.

The Text after the time item is the one named Text1, the one infront is Text2.

Text1 is positioned in the event implementation: SizeChanged="TimeItem_SizeChanged" see impl at the bottom

Text2 is positioned with a Translate transform with a negative value.

        <DataTemplate x:Name="SquaredTimeItem">

            <l:TimeItem Height="20"

                Start="{Binding Start,Mode=TwoWay}"

                Stop="{Binding Stop,Mode=TwoWay}"

                Identity="{Binding Id}"

                TimeItemSizedFrameworkElementName="Rect" SizeChanged="TimeItem_SizeChanged">

                <Grid Height="20" Name="Rect">

                    <Border  BorderBrush="Black" BorderThickness="0" CornerRadius="3">

                        <Border.Background>

                            <LinearGradientBrush>

                                <LinearGradientBrush.GradientStops>

                                    <GradientStop Offset="0" Color="LightGray"/>

                                    <GradientStop Offset="1" Color="Gray"/>

                                </LinearGradientBrush.GradientStops>

                            </LinearGradientBrush>

                        </Border.Background>

                    </Border>

                </Grid>

                <TextBlock Name="Text1" HorizontalAlignment="Right" Margin="3,6,0,0" Text="{Binding To}" >

                            <TextBlock.RenderTransform>

                                <TranslateTransform X="20"></TranslateTransform>

                            </TextBlock.RenderTransform>

                </TextBlock>

                <TextBlock Name="Text2" HorizontalAlignment="Left" Margin="3,6,0,0" Text="{Binding From}" >                           

                            <TextBlock.RenderTransform>

                                <TranslateTransform X="-25"></TranslateTransform>

                            </TextBlock.RenderTransform>

                </TextBlock>

            </l:TimeItem>

        </DataTemplate>

        private void TimeItem_SizeChanged(object sender, SizeChangedEventArgs e)

        {

            if (sender is TimeItem)

            {

                TextBlock tb1=(sender as TimeItem).FindName("Text1") as TextBlock;

                (tb1.RenderTransform as TranslateTransform).X = e.NewSize.Width + 10;

            }

        }