How to measure a canvas that has auto height and width

Question

Hi Folks,

I'm a beginner in silverlight so i hope i can get an answer that brings me some more light in the measure process of silverlight.

I found an interessting flap out control from silverlight slide control and now I try to use it in my project. So that the slide out is working proper, I have to place the user control on a canvas. The user control then uses for itself the height of its content. I just wanna change that behavior so that the height is set to the available space from the parent canvas.

You see the uxBorder where the height is set. How can I measure the actual height and set it to the border?

I tried it with Height={Binding ElementName=notificationCanvas, Path=ActualHeight} but this dependency property has no callback, so the actualHeight is never set.

What I want to achieve is a usercontrol like the tweetboard per example on Jesse Liberty's blog

Sorry for my English writing, I hope you understand my question.

<Canvas x:Name="notificationCanvas" Background="Red">
            <SlideEffectEx:SimpleSlideControl GripWidth="20" GripTitle="Task"  GripHeight="100">
                <Border x:Name="uxBorder"
                  BorderThickness="2"
                  CornerRadius="5"
                  BorderBrush="DarkGray"
                  Background="DarkGray"
                  Padding="5" Width="300"
                  Height="700"
                  >
                    <StackPanel>
                        <TextBlock Text="Tasks"></TextBlock>
                        <Button x:Name="btn1" Margin="5" Content="{Binding ElementName=MainBorder, Path=Height}"></Button>
                        <Button x:Name="btn2" Margin="5" Content="Second Button"></Button>
                        <Button x:Name="btn3" Margin="5" Content="Third Button"></Button>
                        <Button x:Name="btn1_Copy" Margin="5" Content="First Button"/>
                        <Button x:Name="btn1_Copy1" Margin="5" Content="First Button"/>
                        <Button x:Name="btn1_Copy2" Margin="5" Content="First Button"/>
                        <Button x:Name="btn1_Copy3" Margin="5" Content="First Button"/>
                        <Button x:Name="btn1_Copy4" Margin="5" Content="First Button"/>
                        <Button x:Name="btn1_Copy5" Margin="5" Content="First Button"/>
                        <Button x:Name="btn1_Copy6" Margin="5" Content="First Button"/>
                    </StackPanel>
                </Border>
            </SlideEffectEx:SimpleSlideControl>

Answer 1

Hey - a couple of things:

• I'm guessing it's just a typo, but: "{Binding ElementName=MainBorder, Path=Height}" should be "{Binding ElementName=uxBorder, Path=Height}" (or ActualHeight)

• The SlideEffect appears to set a clip geometry, which is going to affect how "big" it looks

  RectangleGeometry clipRect = new RectangleGeometry();

  clipRect.Rect = new Rect(0, 0, panel.ActualWidth, host.Height);

  host.Clip = clipRect;

If you comment out the above lines from the slide control, you should see a noticeable change in how big the panel looks.

Answer 2

I think that the ActualWidth or ActualHeight properties are not settable only gettable.

For that you won't be able to use binding, maybe if you create the element after the page has been loaded, since the Canvas Actual Size on the moment of the creation will be unknown.

Why don't you try creating a Property for this, with two way binding, and sign the Canvas event on layoutUpdated and update the value of the property, therefore updating all dependent objects.
I Don't know if this event is the right one, by check if it help's you.