WPF create Retangles using Vb.net

Question

I am trying to create a WPF windows application where it has to show all the Racks or shelves of Warehouse like below

So far this is what I have tried My Xaml looks like

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="950" Width="1225" BorderBrush="DodgerBlue" BorderThickness="3">
           <Grid>
          <Canvas Height="900" Width="1200" Name="front_canvas" Grid.Row="0" Grid.Column="0" Margin="1,24,10,790" >
                    <Canvas.RenderTransform>
                        <ScaleTransform ScaleX="1" ScaleY="1" />

                    </Canvas.RenderTransform>
                  </Canvas>
    </Grid>
        </Window>

In a Method I have following

For i As Integer = 1 To front_canvas.Width - 1 Step 100
        Dim rect As New Rectangle()
        rect.StrokeThickness = 1
        rect.Stroke = System.Windows.Media.Brushes.Black
        rect.Width = 50
        rect.Height = 50
        rect.Name = "box" + i.ToString()
        'If Not i / 2 = 0 Then
        Canvas.SetLeft(rect, i)
        Canvas.SetFlowDirection(rect, Windows.FlowDirection.LeftToRight)

        'Canvas.SetTop(rect, Top)
        '_top += rect.Height

        If front_canvas.Children.Count > 0 Then
            Dim lastChildIndex = front_canvas.Children.Count - 1
            Dim lastChild = TryCast(front_canvas.Children(lastChildIndex), FrameworkElement)
            If lastChild IsNot Nothing Then
                _top = Canvas.GetTop(lastChild) + lastChild.Height + 1
            End If
        End If
        Canvas.SetTop(rect, _top)
        front_canvas.Children.Add(rect)
        ' End If

        _rectangles.Add(rect)
    Next

And the result I get here is like below

I would appreciate if someone can help me

Answer 1

Here try this:

XAML

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApplication7"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
    <Canvas Name="cvsWarehouse"></Canvas>
</ScrollViewer>

Code Behind:

Imports System.Text

Class MainWindow

Private Const dRACKSIZE As Double = 57
Private Const dRACKSPACING As Double = 2
Private Const dAISLESPACING As Double = 40

Public Sub New()

    ' This call is required by the designer.
    InitializeComponent()

    ' Add any initialization after the InitializeComponent() call.
    CreateAisles()
End Sub

Private Sub CreateAisles()

    cvsWarehouse.Width = 10 + (11 * dRACKSIZE) + (6 * dRACKSPACING) + (4 * dAISLESPACING)
    cvsWarehouse.Height = 10 + (19 * dRACKSIZE) + (18 * dRACKSPACING)

    Dim dStartX As Double = 10

    CreateAisle(dStartX, 10, 19, 2, 1)
    dStartX += dAISLESPACING
    CreateAisle(dStartX, 10, 19, 2, 2)
    dStartX += dAISLESPACING
    CreateAisle(dStartX, 10, 19, 2, 3)
    dStartX += dAISLESPACING
    CreateAisle(dStartX, 10, 19, 2, 4)
    dStartX += dAISLESPACING
    CreateAisle(dStartX, 10, 19, 3, 5)

End Sub

Private Sub CreateAisle(ByRef dStartX As Double, dStarty As Double, iRowCount As Integer, iColCount As Integer, iAisleNumber As Integer)

    Dim iColUpper = iColCount - 1
    Dim iRowUpper = iRowCount - 1

    For iCol As Integer = 0 To iColUpper
        Dim dYOffset As Double = dStarty
        For iRow As Integer = 0 To iRowUpper
            Dim bdr As Border = GetNewBorder()
            bdr.Child = GetNewTextBlock(iAisleNumber, iCol + 1, iRow + 1)
            Canvas.SetTop(bdr, dYOffset)
            Canvas.SetLeft(bdr, dStartX)
            cvsWarehouse.Children.Add(bdr)
            dYOffset += dRACKSIZE + dRACKSPACING
        Next
        dStartX += dRACKSIZE + dRACKSPACING
    Next

    dStartX -= dRACKSPACING

End Sub

Private Function GetNewBorder() As Border

    Dim bdr As New Border
    bdr.Width = dRACKSIZE
    bdr.Height = dRACKSIZE
    bdr.BorderBrush = Brushes.Red
    bdr.BorderThickness = New Thickness(1)
    bdr.CornerRadius = New CornerRadius(2)

    Return bdr

End Function

Private Function GetNewTextBlock(iAisle As Integer, iCol As Integer, iRow As Integer) As TextBlock

    Dim txtBlock As New TextBlock()
    txtBlock.HorizontalAlignment = HorizontalAlignment.Center
    txtBlock.VerticalAlignment = VerticalAlignment.Center
    Dim sb As New StringBuilder()
    sb.Append("A").Append(iAisle.ToString()).Append(":C").Append(iCol.ToString()).Append(":R").Append(iRow.ToString())
    txtBlock.Text = sb.ToString()

    Return txtBlock

End Function

End Class

if you want to use buttons instead of borders that have event handlers attached:

    Private Sub CreateAisle(ByRef dStartX As Double, dStarty As Double, iRowCount As Integer, iColCount As Integer, iAisleNumber As Integer)

    Dim iColUpper = iColCount - 1
    Dim iRowUpper = iRowCount - 1

    For iCol As Integer = 0 To iColUpper
        Dim dYOffset As Double = dStarty
        For iRow As Integer = 0 To iRowUpper
            Dim btn As Button = GetNewButton()
            btn.Content = GetNewTextBlock(iAisleNumber, iCol + 1, iRow + 1)
            Canvas.SetTop(btn, dYOffset)
            Canvas.SetLeft(btn, dStartX)
            cvsWarehouse.Children.Add(btn)
            dYOffset += dRACKSIZE + dRACKSPACING
        Next
        dStartX += dRACKSIZE + dRACKSPACING
    Next

    dStartX -= dRACKSPACING

End Sub

Private Function GetNewButton() As Button

    Dim btn As New Button
    btn.Width = dRACKSIZE
    btn.Height = dRACKSIZE
    btn.BorderBrush = Brushes.Red
    btn.BorderThickness = New Thickness(1)
    btn.AddHandler(Button.ClickEvent, New RoutedEventHandler(AddressOf Button_Click))

    Return btn

End Function

Private Sub Button_Click(sender As Object, e As RoutedEventArgs)

    Dim buttonClicked As Button = DirectCast(sender, Button)
    Dim text As String = DirectCast(buttonClicked.Content, TextBlock).Text
    MessageBox.Show("Button " & text & " Clicked")

End Sub

Answer 2

To the questions below in answer 1, Here is what I did. Most of the code is from SO but it is not actually doing the styles like width and height. Print Preview is done in the following way. I had a Print preview button in tool bar of XAML mainwindow and in code behind I had below code `

Friend Sub DoPreview(title As String)
    Dim fileName As String = System.IO.Path.GetRandomFileName()
    ' Dim visual As FlowDocumentScrollViewer = DirectCast(Me.FindName("cvsWarehouse"), FlowDocumentScrollViewer)
    Dim visual As Canvas = DirectCast(cvsWarehouse, Canvas)
    visual.Width = 1500
    visual.Height = 900
    Try
        ' write the XPS document
        Using doc As New XpsDocument(fileName, FileAccess.ReadWrite)
            Dim writer As XpsDocumentWriter = XpsDocument.CreateXpsDocumentWriter(doc)
            writer.Write(visual)
        End Using

        ' Read the XPS document into a dynamically generated
        ' preview Window 
        Using doc As New XpsDocument(fileName, FileAccess.Read)

            Dim fds As FixedDocumentSequence = doc.GetFixedDocumentSequence()
            Dim s As String = _previewWindowXaml
            s = s.Replace("@@TITLE", title.Replace("'", "'"))
            Using reader = New System.Xml.XmlTextReader(New StringReader(s))
                Dim preview As New Window
                preview.Width = 1500
                preview.Height = 900

                preview.HorizontalAlignment = Windows.HorizontalAlignment.Stretch
                preview.VerticalAlignment = Windows.VerticalAlignment.Stretch
                preview = TryCast(System.Windows.Markup.XamlReader.Load(reader), Window)
                Dim dv1 As DocumentViewer = TryCast(LogicalTreeHelper.FindLogicalNode(preview, "dv1"), DocumentViewer)
                dv1.Width = 1500
                dv1.Height = 900

                dv1.IsHitTestVisible = True
                dv1.VerticalAlignment = Windows.VerticalAlignment.Stretch
                dv1.HorizontalAlignment = Windows.HorizontalAlignment.Stretch
                dv1.ApplyTemplate()
                dv1.Document = TryCast(fds, IDocumentPaginatorSource)
                preview.ShowDialog()
            End Using
        End Using
    Finally
        If File.Exists(fileName) Then
            Try
                File.Delete(fileName)
            Catch
            End Try
        End If
    End Try
End Sub`

And the my preview is like below Print Preview Image

Neither I can do scroll bar nor the entire canvas which is wider is fit to the preview window. My actual Window with canvas is way wider like below Actual canvas window Could someone please correct the bug here?