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

【问题标题】：Add Rectangle and TextBlock to canvas dynamically using MVVM使用 MVVM 将 Rectangle 和 TextBlock 动态添加到画布
【发布时间】：2018-01-23 02:46:04
【问题描述】：

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

到目前为止，由于这篇文章，我能够使用鼠标和使用 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>

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

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

但是，如果坐标来自

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

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

我的矩形需要哪个？

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

enter image description here

非常感谢

【问题讨论】：

标签： c# wpf xaml canvas mvvm

【解决方案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>

【讨论】：