DataFormDataFields layout

[Mrn]

Hello,

I am defining a DataTemplate within a DataForm this way:

<telerik:RadWindow.Resources>

        <DataTemplate x:Key="formTemplate">
            <Grid x:Name="formGrid" ShowGridLines="True" MinWidth="100">
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="300" />
                </Grid.ColumnDefinitions>

                <telerik:Label Grid.Row="0"
                               Grid.Column="0"
                               Grid.ColumnSpan="2"
                               Margin="15,10,15,10"
                               HorizontalAlignment="Left"
                               VerticalAlignment="Center"
                               Content="Fields in bold are required." />

                <telerik:Label Grid.Row="1"
                               Grid.Column="0"
                               Margin="15,0,0,0"
                               FontWeight="Bold"
                               HorizontalAlignment="Left"
                               VerticalAlignment="Center"
                               Content="First Name" />

                <telerik:DataFormDataField x:Name="firstNameDataField"
                                           Grid.Row="1"
                                           Grid.Column="1"
                                           HorizontalAlignment="Stretch"
                                           VerticalAlignment="Center"
                                           IsRequired="True" />

                <telerik:Label Grid.Row="2"
                               Grid.Column="0"
                               Margin="15,0,0,0"
                               FontWeight="Bold"
                               HorizontalAlignment="Left"
                               VerticalAlignment="Center"
                               Content="Last Name" />

                <telerik:DataFormDataField x:Name="lastNameDataField"
                                           Grid.Row="2"
                                           Grid.Column="1"
                                           HorizontalAlignment="Stretch"
                                           VerticalAlignment="Center"
                                           IsRequired="True" />

                <telerik:Label Grid.Row="3"
                               Grid.Column="0"
                               Margin="15,0,0,0"
                               FontWeight="Bold"
                               HorizontalAlignment="Left"
                               VerticalAlignment="Center"
                               Content="Password" />

                <PasswordBox x:Name="passwordBox"
                             Grid.Row="3"
                             Grid.Column="1"
                             HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Center" Width="120" />

            </Grid>
        </DataTemplate>

    </telerik:RadWindow.Resources>

    <Grid x:Name="LayoutRoot">
        <telerik:RadDataForm x:Name="signUpForm"
                             AutoGenerateFields="False"
                             EditTemplate="{StaticResource formTemplate}"
                             Header="Create New Account"
                             Mode="Edit"
                             CommandButtonsVisibility="Commit"
                             AutoEdit="True" CommitButtonContent="Sign Up" />

    </Grid>

I find that both setting HorizontalAligment = "Stretch" or setting it to "Left" and giving a, let's say, Width="200" in DataFormDataField controls, a sort of "margin" appears to their left, I mean, the more I raise the width, the more the boxes are shifted to the right, I only get them aligned to the left when using normal TextBoxes and the PasswordBox, what is this behaviour due to?

Thanks in advance

[HDC]

In my experience, setting LabelPosition="Below" helps a lot.

[Mrn]

Thanks for your reply, I tried what you said and I get the correct position in the design view of the VS, but it remains shifted to the right at runtime :S

[HDC]

I'm not sure, but i think that If your first column is "*" and your second column has a fixed width of 300... when you run your code it will then depend on the size defined on your user control how big that first column really becomes?

[Mrn]

Yes, you're right, but it is in the second column where I place the DataFormDataFields, in that with fixed width :S

[Brad]

Hey Mrn - Did you ever get this figured out?  I'm having the same issue.

[Ivan Ivanov]

Hi Brad,

Would you please send us a runnable project by opening a support ticket, so that we could debug it on our side and give you an appropriate solution?

Kind regards,
Ivan Ivanov
the Telerik team

[Hubert]

Hi,

same problem here, but the "margin" of the DataFormDataField is not a margin.
It's the space for the text of the Label Property.
It would be nice to have a property to eliminate or to set the width of the label.

edit:
It looks like that the DataFormDataField consits of a Grid with some margins around.
If you play around with the properties HorizontalAlignment and Width of DataFormDataField you
realize some strange behavior.

<telerik:DataFormDataField Grid.Row="0"
                                   Width="60"
                                   HorizontalAlignment="Left"
                                   Grid.Column="2"
                                   DataMemberBinding="{Binding Items, Path=Value, StringFormat='#,##0.00;-#,##0.00;', Mode=OneWay}"
                                   >
            <telerik:DataFormDataField.Label>
                <Label Width="0" HorizontalAlignment="Left"
                       Content="Test Test Test" />
            </telerik:DataFormDataField.Label>
        </telerik:DataFormDataField>

kind regards
Hubert

[Ivan Ivanov]

Hello Hubert,

DataFormDataField's template is hosted in a Grid panel with the following definition:

<Grid>
   <Grid.ColumnDefinitions>
       <ColumnDefinition Width="*"/>
       <ColumnDefinition Width="2*"/>
       <ColumnDefinition Width="24"/>
   </Grid.ColumnDefinitions>
    . . .
</Grid>

The first column is the "Label column", the second one contains the editor control and the third one displays the "property description icon" if such is needed. Apparently the first two columns do not have hardcoded width values, so that it is utterly expected to stretch when page is resized. In case that you need to customize this, you can easily modify DataFormDataField's template in Expression Blend.

Kind regards,
Ivan Ivanov
the Telerik team

[Hubert]

Hello Ivan,

thanks for the advice.
It took me some time to get the template, because i'am not the best friend
of Expression Blend. I think we should spend some more time together.

kind regards
Hubert