Add Rectangle and TextBlock to canvas dynamically using MVVM

Question

I need help to populate canvas with rectangle and textblock

So far i am able to populate the canvas with rectangle using Mouse and using MVVM thanks to this post

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

But I need to add TextBlock for each drawn rectangle

this is what it should look like

Look alike of the application i want to create

This is my XAML code

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

I tried adding

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

Just to check if it will populate textblock for each rectangle. But it doesn't show any textblock. Does my understanding is wrong?

that this code

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

will set the position of each control in the canvas?

Update: It's working now. I forgot the fontsize of the TextBlock.

But how can i set the position of the TextBlock for each rectangle if the coordinates is from the

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

which I need in my Rectangle?

this is what my application look like now. But i need those textblock inside the rectangle not outside

enter image description here

Thank you so much

score 1 · Accepted Answer · answered Jan 23 '18 at 04:28

You are using a Stackpanel to display the Rectangle and the TextBlock... so the Rectangle and the TextBlock are stacked!

Use a Grid or a Canvas instead. Then you will be able to manage the position of your controls relatively to their container.

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

Add Rectangle and TextBlock to canvas dynamically using MVVM

1 Answers1