RadControls in custom control

5 posts, 0 answers
  1. Waleed Seada
    Waleed Seada avatar
    241 posts
    Member since:
    May 2006

    Posted 07 Mar 2011 Link to this post

    Dear All,

    I have a problem placing RadControls (treeview, GridView) inside my custom control with the correct layout.
    The issue is that the RadControls is filling the container with no boundaries.
    Here is the code for my customer control:
    public class WindowContentControl : ContentControl
    {
        #region Title Dependency Property
        /// <summary>
        /// Title of the control
        /// </summary>
        public string Title
        {
            get { return (string)GetValue(TitleProperty); }
            set { SetValue(TitleProperty, value); }
        }
        /// <summary>
        /// Using a DependencyProperty as the backing store for Title.  This enables animation, styling, binding, etc...
        /// </summary>
        public static readonly DependencyProperty TitleProperty = DependencyProperty.Register("Title", typeof(string), typeof(WindowContentControl), new PropertyMetadata(""));
        #endregion
        #region HeaderContent (DependencyProperty)
        /// <summary>
        /// A description of the property.
        /// </summary>
        public object HeaderContent
        {
            get { return (object)GetValue(HeaderContentProperty); }
            set { SetValue(HeaderContentProperty, value); }
        }
        public static readonly DependencyProperty HeaderContentProperty =
             DependencyProperty.Register("HeaderContent", typeof(object), typeof(WindowContentControl), null);
        #endregion

    and this is the XAML style as well
    <Style x:Key="HeaderedContentStyle" TargetType="toolkit:HeaderedContentControl">
        <Setter Property="VerticalContentAlignment" Value="Stretch" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="BorderBrush" Value="#20000000" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="toolkit:HeaderedContentControl">
                    <Border BorderThickness="{TemplateBinding BorderThickness}" 
                            BorderBrush="{TemplateBinding BorderBrush}"
                            Margin="1,0,1,0">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition />
                            </Grid.RowDefinitions>
                            <Grid Margin="0,0,0,2"
                              Grid.Row="0">
                                <Border CornerRadius="1,1,1,1"
                                    Background="{StaticResource HeaderBackgroundBrush}">
                                    <Border.Effect>
                                        <DropShadowEffect ShadowDepth="0" BlurRadius="8" Opacity="0.70"/>
                                    </Border.Effect>
                                </Border>
                                <TextBlock Style="{StaticResource HeaderLabelStyle}"
                                       TextAlignment="Center"
                                       HorizontalAlignment="Center"
                                       Text="{TemplateBinding Header}" 
                                       Margin="6,4,6,4"/>
                            </Grid>
                            <ContentPresenter Content="{TemplateBinding Content}" 
                                          Grid.Row="1"
                                          ContentTemplate="{TemplateBinding ContentTemplate}" 
                                          Cursor="{TemplateBinding Cursor}" 
                                          Margin="{TemplateBinding Padding}" 
                                                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    The custom control boundaries are visible ... but RadControls are inside overflow the boundaries.

    Look in the attached image, the gray header is of the custom control.
    What is causing this behavior !?

    Thanks and best regards
    Waleed
  2. Pavel Pavlov
    Admin
    Pavel Pavlov avatar
    2039 posts

    Posted 08 Mar 2011 Link to this post

    Hello Waleed Seada,

    From what I see , controls are being measured with infinity . In such case this is the expected result. In such setup you will get the same result with almost any control ( not only Telerik) .

    The solution would be to  either set up max width, fixed width for the controls , or their containers.

    Regards,
    Pavel Pavlov
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  3. DevCraft banner
  4. Waleed Seada
    Waleed Seada avatar
    241 posts
    Member since:
    May 2006

    Posted 08 Mar 2011 Link to this post

    Dear Pavel,

    The treeview is displayed as excepted if it is the only control inside my custom control even If I wrapped it inside a border, it is giving the expected behavior, But If I wrapped in a stack panel I get the unexpected behavior.

    I can't use the MaxHeight as it limits my layout functionality

    Best regards
    Waleed

    ------------------------------
    EDITED
    -----------------------------
    I also forgot to add that if I use grid inside my custom control and place the RadTreeView inside on row, it is giving the expected behavior.
    Appreciate your feedback indeed.

    I am also interested if this has something to do with the RadTreeView inside a stack panel or not.

    What do you think ?
    Regards
  5. Francisco Amador
    Francisco Amador avatar
    40 posts
    Member since:
    Mar 2010

    Posted 10 Mar 2011 Link to this post

    A stack panel will grow to fit the content inside it unless you limit the height. Therefore, it will expand past the bottom of the window without a scroll bar. My recommendation is to do as you have already, put it inside a grid or some other control with limits (a row, border, etc.). This will automatically limit it's height and width and will allow the scroll bar to function as expected.
  6. Pavel Pavlov
    Admin
    Pavel Pavlov avatar
    2039 posts

    Posted 11 Mar 2011 Link to this post

    Hi,
    Indeed Francisco is right, StackPanel is one of those panels that measure their children with infinity. Then as said they will adjust their size to the content.

    Regards,
    Pavel Pavlov
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
Back to Top
DevCraft banner