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

Question

我正在寻找一种在画布上绘制的矩形的相对位置显示文本的方法，因此画布具有多种形状，因此被定义为带有setter的容器，我如何将矩形的文本框设置为相对于矩形的位置呢？ 文本框始终显示在矩形上方或下方，而忽略我为其设置的位置

<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>

更新：

我尝试给出绝对位置，但它忽略了它-

                                <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>

它仍然为我提供了设置器的文本和矩形位置，这也意味着第一个解决方案将无法正常工作

Answer 1

您需要在Location类中定义另外两个属性并绑定到它们：

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; }
    }
}

更新

似乎您只是想摆脱StackPanel（当然，它顺序地放置您的元素）并使用另一个容器，例如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>

更新

一些可能的布局：

<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>

执行结果：