在画布上显示文字，并向设置者提供相对位置

Question

i am looking for a way to display text in relative position of a rectangle drawn on canvas the canvas has many shapes so it is defined as container with setter, how can i set the rectangle's textbox to be relative to the rectangle position ? the textbox is always display above or under the rectangle and ignore the position i set for it

<StackPanel Orientation="Vertical" Grid.Row="2" Grid.ColumnSpan="2">
    <ItemsControl Name="itemtest" ItemsSource="{Binding}" Height="429">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <local2:DragCanvas x:Name="canvas1" AllowDragging="true" AllowDragOutOfView="True" Width="704"
                                   Height="576" Background="Blue" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemContainerStyle>
            <Style TargetType="ContentPresenter">
                <Setter Property="Canvas.Left" Value="{Binding Path=Location.X, Mode=TwoWay}" />
                <Setter Property="Canvas.Top" Value="{Binding Path=Location.Y,  Mode=TwoWay}" />
                <Setter Property="Visibility"
                        Value="{Binding Path= ShowOnDemo, Converter={StaticResource BooleanToVisibilityConverter}}" />
            </Style>
        </ItemsControl.ItemContainerStyle>
        <ItemsControl.ItemTemplateSelector>
            <local:CustomTemplateSelector>
                <local:CustomTemplateSelector.BitmapTemplate>
                    <DataTemplate>
                        <StackPanel>
                            <Image Source="{Binding Path=Bitmaps/myBitmap}" />
                        </StackPanel>
                    </DataTemplate>
                </local:CustomTemplateSelector.BitmapTemplate>
                <local:CustomTemplateSelector.HorBarTemplate>
                    <DataTemplate>
                        <StackPanel>
                            <Rectangle Fill="{Binding Path= Color.ForeColor}" Width="100" Height="20" />
                            <TextBlock Canvas.Left="{Binding Path=Location.X+100}"
                                       Canvas.Right="{Binding Path=Location.Y+100}" Text="{Binding Path=RightLabel}" /> -- not working!!
                        </StackPanel>
                    </DataTemplate>
                </local:CustomTemplateSelector.HorBarTemplate>
            </local:CustomTemplateSelector>
        </ItemsControl.ItemTemplateSelector>
    </ItemsControl>
</StackPanel>

update :

i'v tried giving absolute position but it ignores it -

                                <Grid>
                                    <Rectangle Fill="{Binding Path= Color.ForeColor}" Width="100" Height="20" />
                                    <TextBlock Style="{x:Null}"  Text="{Binding Path=RightLabel}" Canvas.Left="200" Canvas.Right="200" Margin="150" />
                                </Grid>

it still give me the position from the setter for both text and rectangle this also means that the first solution will not work as well

Answer 1

You need to define another two properties in your Location class and bind to them:

public class Location
{
    public double X { get; set; }
    public double Y { get; set; }

    public double ShiftedX 
    {
        get { return X + 100; }
    }

    public double ShiftedY
    {
        get { return Y + 100; }
    }
}

Update

Seems like you simply want to get rid of your StackPanel (which of course positions your elements sequentially) and use another container, like Grid:

        <local:CustomTemplateSelector.HorBarTemplate>
            <DataTemplate>
                <Grid>
                    <Rectangle Fill="{Binding Path= Color.ForeColor}" Width="100" Height="20" />
                    <TextBlock Text="{Binding Path=RightLabel}" />
                </Grid>
            </DataTemplate>
        </local:CustomTemplateSelector.HorBarTemplate>

Update

A few possible layouts:

<Window x:Class="WpfTestBench.Containers"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Containers" Height="300" Width="300">
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>

        <!-- Yours stackpanel -->
        <StackPanel Grid.Row="0">
            <Rectangle Stroke="Black" StrokeThickness="1" Width="100" Height="20"  />
            <TextBlock Text="Test text" />
        </StackPanel>

        <!-- Rectangle with specified size inside grid -->
        <Grid Grid.Row="1">
            <Rectangle Stroke="Black" StrokeThickness="1" Width="100" Height="20"  />
            <TextBlock Text="Test text" />
        </Grid>

        <!-- Rectangle with specified size and aligned textblock inside grid -->
        <Grid Grid.Row="2">
            <Rectangle Stroke="Black" StrokeThickness="1" Width="100" Height="20"  />
            <TextBlock Text="Test text" HorizontalAlignment="Center" VerticalAlignment="Center" />
        </Grid>

        <!-- Rectangle with no size specified (stretches) and aligned textblock inside grid -->
        <Grid Grid.Row="3">
            <Rectangle Stroke="Black" StrokeThickness="1"  />
            <TextBlock Text="Test text" HorizontalAlignment="Center" VerticalAlignment="Center" />
        </Grid>
    </Grid>
</Window>

Execution result: