How to stretch content within DataForm

[Vasile]

Hello,

Just installed the last version (Q1, 2011) of Telerik Silverlight controls, and tried Telerik DataForm control by replacing the standard DataForm control in one of my the projects.

I observed two wrong behaviors so far:

1. I found no way, at least not obvious way, of stretching vertically the content within the DataForm. In my application I host the DataForm into a resizable RadPanel, inside the DataForm I have a multiline text field which is anchored on all edges, so it is supposed to resize when the DataForm resizes to benefit by the whole surface of the DataForm (this worked with standad DataForm control).
I set on RadDataForm the VerticalAlign and VerticalContentAlight to Stretch
I set also the VerticalAlign="Stretch" for the control inside the DataForm

Please let me know if there is a way to achive desired behavior.

2 A second observation I have is that if I do not specify a Foreground color for the RadDataForm the labels inside various templates would be displayed with White foreground over White background.  I don't use any special theme... just plain controls with their default style.

This can be reproduced with very simple code in brand new project

Vasile

[Vanya Pavlova]

Hi Vasile,

 
Thank you for your interest in our bran new RadDataForm control. Please find my answers in the following order:

1.The template of our RadDataForm is a little bit different that the one that the native DataForm uses. By desing the presenters used to display fields in RadDataForm are wrapped in a ScrollViewer/StackPanel. As a result its children are measured with infinity. You may override it by editing the template of RadDataForm and just remove the ScrollViewer/StackPanel. Please refer to the attached project. 

2. We have had a similar issue, which was already fixed and is part of our latest internal build.

Greetings,
Vanya Pavlova
the Telerik team

[Leos]

I have similar problem.
Code from XAML is here, VerticalAlignment is set to TOP and VerticalContentAlignment is set to STRECH:

<DataTemplate x:Key="detail">
  <StackPanel Orientation="Vertical">
    <telerik:DataFormDataField Label="Zalozeno:"
          DataMemberBinding="{Binding Zalozeno, Mode=TwoWay}"
          Description="Datum vlozeni zaznamu do evidence"/>
     <telerik:DataFormDataField Label="Popis:"
          Height="100"
          Background="AntiqueWhite"
          VerticalAlignment="Top"
          VerticalContentAlignment="Stretch"
          DataMemberBinding="{Binding Popis, Mode=TwoWay}"
          Description="Textova informace, popis zbozi"/>
    <telerik:DataFormCheckBoxField Label="Platne:"
         DataMemberBinding="{Binding IndPlt, Mode=TwoWay}"
         Description="Priznak platnosti zaznamu"/>
  </StackPanel>
</DataTemplate>

See attached image.
Field "Popis" (Note, Comment) is not stretched. I looks as if Label is vertically centered a content is computed from Label vertical position.

Thank you very much.
Leos

[Leos]

It works, if content (standard TextBox) is inserted into DataFormDataField.Content.
Leos

<telerik:DataFormDataField Label="Popis:"

    VerticalAlignment="Top"

    VerticalContentAlignment="Stretch"

    DataMemberBinding="{Binding Popis, Mode=TwoWay}"                                               

    Description="Textova informace, popis zbozi">

    <telerik:DataFormDataField.Content>                           

         <TextBox Text="{Binding Popis, Mode=TwoWay}"

             Height="150"

             IsReadOnly="True"

            VerticalScrollBarVisibility="Auto"

            HorizontalScrollBarVisibility="Auto"

            AcceptsReturn="True"  />                           

   </telerik:DataFormDataField.Content>

</telerik:DataFormDataField>



[Vanya Pavlova]

Hi Vasile,

 


We are glad to here that you were able to find a solution by your side. You may always edit the template of any RadDataForm's part and change it in appropriate manner. I believe that it would be helpful for you to review the "Styles And Templates" online help documentation for this control.


I you have any additional information please let us know.

Kind regards,
Vanya Pavlova
the Telerik team

[Mike]

Vanya says:

"
1.The template of our RadDataForm is a little bit different that the one that the native DataForm uses. By desing the presenters used to display fields in RadDataForm are wrapped in a ScrollViewer/StackPanel. As a result its children are measured with infinity. You may override it by editing the template of RadDataForm and just remove the ScrollViewer/StackPanel. Please refer to the attached project. 
"

The project attached to the referenced post above does not appear to provide a solution to the problem.  Can you go into more detail as to how you can accomplish removing the ScrollViewer/StackPanel?  And/or getting the RadDataForm content to stretch and fill vertically?

Thank you.

[Mike]

I believe I have discovered my mistake.  I was not correctly setting the control template.

[Murali]

Leos, thanks for posting the solution.  This helped me today, and probably saved good deal of time, I would not have intuitively figured this out anytime soon if I did not see this post.  Nearly two years in to the future, and this still helped.

[Murali]

Meh, I spoke too soon.  Apparently, I didn't test enough with resizable dataform with grid splitter - be aware, it gets tricky to manage the aesthetics of the view.  I found a work around that makes this work sufficiently for my scenario, but with a constraint that you must set minwidth.  All the complication boiled down to the way this control is setup - StackPanel in scrollviewer is quite a rowdy in layouts.  Solution I ended up with is:

1. Use Grid as root element for the data template, set MaxWidth={Binding RelativeSource={RelativeSource AncestorType=Border}, Path=ActualWidth}" MinWidth="330"  [use desired MinWidth to suite your UI]
2. Use Leos's solution of setting Content of the DataFormDataField.

<Grid MaxWidth="{Binding RelativeSource={RelativeSource AncestorType=Border}, Path=ActualWidth}" MinWidth="330">
    <telerik:DataFormDataField Label="Description" LabelPosition="Above" IsEnabled="{Binding IsEditing}">
        <telerik:DataFormDataField.Content>
            <TextBox Margin="0 8 0 0" MinHeight="40" Text="{Binding Description}" TextWrapping="Wrap" AcceptsReturn="True"  VerticalAlignment="Stretch" IsEnabled="{Binding IsEditing}" />
        </telerik:DataFormDataField.Content>
    </telerik:DataFormDataField>
</Grid>