c# - 使用MVVM将Rectangle和TextBlock动态添加到 Canvas

Question

我需要帮助以矩形和文本块填充 Canvas

到目前为止，由于这篇文章，我能够使用Mouse和MVVM使用矩形填充 Canvas

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>

将设置每个控件在 Canvas 中的位置？

更新:现在正在工作。我忘记了 fontsize的 TextBlock。

但是，如果坐标来自，则如何为每个矩形设置 TextBlock的位置？

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

我的矩形需要哪个？

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

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>