This is a migrated thread and some comments may be shown as answers.

RadControls in custom control

4 Answers 32 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Waleed Seada
Top achievements
Rank 2
Waleed Seada asked on 07 Mar 2011, 02:21 PM
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

4 Answers, 1 is accepted

Sort by
0
Pavel Pavlov
Telerik team
answered on 08 Mar 2011, 01:07 PM
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!
0
Waleed Seada
Top achievements
Rank 2
answered on 08 Mar 2011, 02:27 PM
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
0
Francisco Amador
Top achievements
Rank 1
answered on 10 Mar 2011, 03:52 PM
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.
0
Pavel Pavlov
Telerik team
answered on 11 Mar 2011, 09:56 AM
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!
Tags
General Discussions
Asked by
Waleed Seada
Top achievements
Rank 2
Answers by
Pavel Pavlov
Telerik team
Waleed Seada
Top achievements
Rank 2
Francisco Amador
Top achievements
Rank 1
Share this question
or