Bind a border's size to canvas size

Question

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:

XML

<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" 
               BorderThickness="0"/>
</Canvas>

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]

Posted 1-Jul-10 4:52am

industryunleash

Updated 1-Jul-10 4:57am

William Winner

v4

Add a Solution

2 solutions

Solution 1

Try

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

instead of

{Binding ElementName=thumbCanvas, Path=ActualWidth}

Posted 1-Jul-10 5:07am

#realJSOP

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

William Winner · Accepted Answer · 2010-07-01T05:12:00

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:

C#

private void thumbCanvas_SizeChanged(object sender, SizeChangedEventArgs e)
{
    myBorder.Height = e.NewSize.Height * 0.95;
    myBorder.Width = e.NewSize.Width * 0.95;
}