Custom shape - bind height of the shape

4 posts, 1 answers
  1. HDC
    HDC avatar
    214 posts
    Member since:
    Dec 2010

    Posted 28 Jun 2012 Link to this post

    Hi,

    I have created a custom shape based upon the documentation:

    http://www.telerik.com/help/silverlight/raddiagram-howto-create-custom-shape.html

    I have created a very simplistic shape, it only contains a TextBlock control. It works fine, except the textblock will overrun the size of the shape if the textblock contains to much data. How can i bind the height of the textblock to the height of the shape?
    <ResourceDictionary
        xmlns:local="clr-namespace:ExqiPresenter.Views.ExqiSlidedeck.SlideObjects"
        xmlns:converter="clr-namespace:ExqiPresenter.Convertors.ExqiSlidedeck" 
        >
     
        <Style TargetType="local:SlideMenuShape">
            <Setter Property="BorderThickness" Value="4" />
            <Setter Property="BorderBrush" Value="#6C666666" />
            <Setter Property="Width" Value="355" />
            <Setter Property="Height" Value="160" />
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="Margin" Value="0" />
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                        <GradientStop Color="White" />
                        <GradientStop Offset="1" Color="#FFEDF4FF" />
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="local:SlideMenuShape">
                            <TextBlock Name="LBL"                      
                            Text="{Binding Text}" >
                            </TextBlock>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ResourceDictionary>

    Best Regards,

    Peter
  2. Answer
    Miro Miroslavov
    Admin
    Miro Miroslavov avatar
    588 posts

    Posted 29 Jun 2012 Link to this post

    Hello peter,

     You can set the shape VerticalContentAlignment property to "Stretch". This will make the shape as big as its content - the TextBlock. But since you modified the Template of the shape, you have to either template bind the VerticalAlignment of the TextBlock to the VerticalContentAlignment  or directly set the TextBlock VerticalAlignment to Stretch. 
    But still if you want to bind the Height of the TextBlock, you should be able to do it as follows:

    <TextBlock Name="LBL" Height="{TemplateBinding ActualHeight}"                    
                            Text="{Binding Text}" >
                            </TextBlock>

    Please let us know if non of these suggestions don't work for you.

    Kind regards,
    Miro Miroslavov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. DevCraft banner
  4. HDC
    HDC avatar
    214 posts
    Member since:
    Dec 2010

    Posted 29 Jun 2012 Link to this post

    Hi Miro,

    Thanks for the quick reply... ActualHeight doesn't work, it makes the control invisible, i suppose the size becomes 0.

    VerticalAligment on the textblock does solve the problem.

    But if i place the textblock inside a canvas (for example to also include other components within the shape) then it doesn't work anymore. ContentAligment on canvas will not stop the textblock from overflowing the canvas, even if I set ContentAlignment on both components. Very strange.

    For now i'll just use a textblock unless you know what could be causing this effect?

    Best Regards and thanks again for the excellent support,

    Peter


  5. HDC
    HDC avatar
    214 posts
    Member since:
    Dec 2010

    Posted 29 Jun 2012 Link to this post

    Nevermind Miro, i used a Grid instead of a Canvas and it works just as well for me.
Back to Top