Click here to Skip to main content
15,938,122 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi, I want to be able put a border around a canvas that can be resizable and the only way I can think to link the child sizes together is through binding.
I have:

<Canvas Name="thumbCanvas" Width="100" Height="40" >
      <Border x:Name="myBorder" BorderBrush="Black" BorderThickness="1" 
              Width="{Binding ElementName=thumbCanvas, Path=ActualWidth}"
              Height="{Binding ElementName=thumbCanvas, Path=ActualHeight}" 
              CornerRadius="8,8,8,8" />
      <Rectangle x:Name="tplRect" Width="{Binding ElementName=thumbCanvas, Path=Width}" 
                 Height="{Binding ElementName=thumbCanvas, Path=Height}"
                 Fill="LightCyan" RadiusX="8" RadiusY="8" />
      <TextBox x:Name="tplTextBox" TextWrapping="Wrap" Text="Component"  
               Background="LightCyan" HorizontalAlignment="Center" Margin="17,10" 

but I can't see the border behind the canvas. I've also tried declaring the border outside of the canvas and binding the canvas size to that but it doesn't work either.

[Modified: just moved the code down a bit so it could fill the screen and fixed the tabbing]
Updated 1-Jul-10 4:57am


{Binding RelativeSource{RelativeSource=TemplatedParent}, Path=(property name goes here)

instead of

{Binding ElementName=thumbCanvas, Path=ActualWidth}
Share this answer
Well, you're going to have problems because of drawing order alone.

The only problem that I see is that you have the Rectangle below the Border, which means that it will be drawn over the Border. And since it has the same size, it will obscure the Border.

Just move the Border below the Rectangle.

Otherwise, you should be fine.

Copying your code and doing what I said worked for me.

And FYI, the other thing you could do would be to hook the SizeChanged Event of whatever you could be resizing. But the Binding Element seems to work pretty well.

Hooking the SizeChanged event can be useful when you're wanting to scale all of the items in a parent item. For instance, if you wanted a box to fill 95% of the canvas. In that case, you can click on your canvas control in the designer. Then, in the properties window, click the Events Tab.

Once inside Events, scroll down to SizeChanged and in the empty box to the right of it, double-click. This will take you to the code page.

In the code page, you can do it a couple of ways, but one way would be something like this:
private void thumbCanvas_SizeChanged(object sender, SizeChangedEventArgs e)
    myBorder.Height = e.NewSize.Height * 0.95;
    myBorder.Width = e.NewSize.Width * 0.95;
Share this answer
industryunleash 1-Jul-10 11:22am    
can you give me an example of hooking up a SizeChanged Event? i'm kinda new to this stuff

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900