How do I force a canvas on an unviewed tab to have a size set in advance?

I'm working on an application that has two different tabs on the main window. Each tab has it's own canvas as a child object. When the tab selection is changed I redraw the canvas on that tab.

The problem is, when a user switches to the second tab for the first tab, the "tab changed" event fires before the canvas on the second tab has been assigned a size (debugging shows it has a size of 0,0). As such, the custom elements I add to it don't draw correctly since they are size dependent. If it redraws after the tab has been opened already it works fine since the size has been set by that point.

Can someone please suggest a way to have the size set before the tab is first selected or is there some other trick I can use?

One way, if the canvas has to fill the whole tab, you could set HorizontalAlignment and VerticalAlignment properties of the Canvas to Stretch.

Code:

---

<TabControl>
    <TabItem Header="Tab 1">
        <Canvas Background="LightGray" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <!-- Your canvas content here -->
        </Canvas>
    </TabItem>
    <TabItem Header="Tab 2">
        <Canvas Background="LightBlue" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <!-- Your canvas content here -->
        </Canvas>
    </TabItem>
</TabControl>

---

Or to ensure the size is set before the tab is first selected, you could try this:

Code:

---

Private Sub Canvas_SizeChanged(sender As Object, e As SizeChangedEventArgs)
    Dim canvas As Canvas = DirectCast(sender, Canvas)

    ' Check if the canvas is initialized and has a non-zero size
    If canvas.IsInitialized AndAlso canvas.ActualWidth > 0 AndAlso canvas.ActualHeight > 0 Then
        ' Execute your logic for drawing or updating custom elements
        UpdateCanvas(canvas)
    End If
End Sub

Private Sub UpdateCanvas(canvas As Canvas)
    ' Your logic for drawing or updating custom elements goes here
End Sub

---

Make sure to subscribe to the SizeChanged event for each canvas in your code:

Code:

---

<Canvas x:Name="FirstTabCanvas" SizeChanged="Canvas_SizeChanged">
    <!-- Your canvas content here -->
</Canvas>

<Canvas x:Name="SecondTabCanvas" SizeChanged="Canvas_SizeChanged">
    <!-- Your canvas content here -->
</Canvas>

---

OK, I'll give that a try. Thanks.

Great topic for discussion, thanks for bringing this up!