Question

我需要帮助用矩形和文本块填充画布

到目前为止，我可以使用鼠标填充画布并使用MVVM，这要归功于这篇文章

https://stackoverflow.com/questions/22324359/add-n-rectangles-to-canvas-with-mvvm-in-wpf

但我需要为每个绘制的矩形添加TextBlock

它应该是什么样子

Look alike of the application i want to create

这是我的XAML代码

<ItemsControl ItemsSource="{Binding RectItems, Source={x:Static VM:VMDrawing.instance}}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas  x:Name="canvas" Background="Transparent" Height="{Binding ElementName=image, Path=ActualHeight}" Width="{Binding ElementName=image, Path=ActualWidth}"   >
                <dxmvvm:Interaction.Behaviors>
                    <dxmvvm:EventToCommand EventName="MouseDown" Command="{Binding MouseDownCommand, Source={x:Static VM:VMDrawing.instance}}" PassEventArgsToCommand="True" EventArgsConverter="{StaticResource MDC}"/>
                    <dxmvvm:EventToCommand EventName="MouseMove" Command="{Binding MouseMoveCommand, Source={x:Static VM:VMDrawing.instance}}" PassEventArgsToCommand="True" EventArgsConverter="{StaticResource MMC}"/>
                    <dxmvvm:EventToCommand EventName="MouseUp" Command="{Binding MouseUpCommand, Source={x:Static VM:VMDrawing.instance}}" PassEventArgsToCommand="True" />
                    <dxmvvm:EventToCommand EventName="PreviewMouseLeftButtonDown" Command="{Binding PreviewMouseLeftButtonDownCommand, Source={x:Static VM:VMDrawing.instance}}" PassEventArgsToCommand="True" EventArgsConverter="{StaticResource PMLBDC}"/>
                    <dxmvvm:EventToCommand EventName="PreviewMouseLeftButtonUp" Command="{Binding PreviewMouseLeftButtonUpCommand, Source={x:Static VM:VMDrawing.instance}}" />
                </dxmvvm:Interaction.Behaviors>
                <Canvas.LayoutTransform>
                    <TransformGroup>
                        <ScaleTransform ScaleX="{Binding zoomValue, Source={x:Static VM:VMZoom.instance}}" ScaleY="{Binding zoomValue, Source={x:Static VM:VMZoom.instance}}"/>
                    </TransformGroup>
                </Canvas.LayoutTransform>
            </Canvas>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="Canvas.Left" Value="{Binding X}"/>
            <Setter Property="Canvas.Top" Value="{Binding Y}"/>
        </Style>
    </ItemsControl.ItemContainerStyle>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <Rectangle Width="{Binding Width}" Height="{Binding Height}" Fill="Transparent" Stroke="Red" StrokeThickness="3" />
                <TextBlock Text="Sample Text" Width="100" Height="100"/>
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>

</ItemsControl>

我尝试添加

<StackPanel>
    <Rectangle Width="{Binding Width}" Height="{Binding Height}" Fill="Transparent" Stroke="Red" StrokeThickness="3" />
    <TextBlock Text="Sample Text" Width="100" Height="100"/>
</StackPanel>

只是检查它是否会填充每个矩形的文本块。但它没有显示任何文本块。我的理解是错的吗？

这段代码

<Style TargetType="ContentPresenter">
    <Setter Property="Canvas.Left" Value="{Binding X}"/>
    <Setter Property="Canvas.Top" Value="{Binding Y}"/>
</Style>

会在画布中设置每个控件的位置吗？

更新：现在正在运作。我忘记了fontsize的{{1}}。

但是如果坐标来自

，如何为每个矩形设置TextBlock的位置？

TextBlock

我需要在我的矩形中？

这就是我的应用程序现在的样子。但我需要矩形内的那些文本块不在

之外

enter image description here

非常感谢

Answer 1

您正在使用Stackpanel来显示Rectangle和TextBlock ...以便Rectangle和TextBlock堆叠！

使用Grid或Canvas代替。然后，您将能够相对于容器管理控件的位置。

<Grid>
    <Rectangle Width="{Binding Width}" Height="{Binding Height}" Fill="Transparent" Stroke="Red" StrokeThickness="3" />
    <TextBlock Text="Sample Text" Width="100" Height="100"/>
</Grid>

<Canvas>
    <Rectangle Width="{Binding Width}" Height="{Binding Height}" Fill="Transparent" Stroke="Red" StrokeThickness="3" />
    <TextBlock Text="Sample Text" Width="100" Height="100" Canvas.Left="50" Canvas.Top="50"/>
</Canvas>

使用MVVM动态地将Rectangle和TextBlock添加到画布

1 个答案: