WPF create Retangles using Vb.net - wpf

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?