Label customization in DataFormXField

[Leos]

Please how to customize label in DataFormXField?

For example:
- width of label "column" (_only_ label column).
- alignment (typical is to have label aligned to right size)
- font properties ("normal" FontWeight/fontSize changes both label and data )

Thanks.
Some example will be nice.

Leos

[Maya]

Hello Leos,

You may take a look at our online documentation for a reference.
 

All the best,
Maya
the Telerik team

[Leos]

Thank you, but this is working for foreground.

This example:

<telerik:DataFormDataField Label="Kód:"  FontSize="15" FontWeight="Bold"
DataMemberBinding="{Binding CisMater, Mode=TwoWay}"
Foreground="Blue"
Description="Interní kód materiálu"/>

Has this result (see attached picture).

I need:
Width of label area 100 point only.
Label aligned to right.
Only label with size 15 and bold, not data.

Thanks.
Leos

[Vanya Pavlova]

Hello Leos,

 
For the time being if you need to modify only the labels in RadDataForm's fields, you need to edit the template of the DataFormDataField and apply the desired changes. With our latest internal build for this week we intorduced the LabelStyle property which is used to create a style for the Labels in each field, you may apply it on a RadDataForm's level:

<Grid.Resources>
            <Style x:Key="style1" TargetType="TextBlock">
                <Setter Property="Foreground" Value="Red"/>
                </Style>
            </Grid.Resources>
        <Grid.DataContext>
            <Binding Source="{StaticResource SampleDataSource}"/>
        </Grid.DataContext>
        <telerik:RadDataForm LabelStyle="{StaticResource style1}" Height="136" VerticalAlignment="Top" ItemsSource="{Binding Collection}"/>

Regards,
Vanya Pavlova
the Telerik team

[blaise]

Hello, Is it possible to have a bold styled label when field is marked as required? (This is the proposed behavior in the standard dataform).

[Faye]

Hi Vanya.

How can we set LabelStyle for a specific DataFormXField? Similar to Blaise's query, we want to set the style for labels of required fields only. Your example of setting it to the DataForm will apply the style to all fields in the DataForm. Currently I cannot find a LabelStyle property for the DataFormXField.

Thanks in advance.

[Ben Jones]

Hi there,
I'm also trying to manipulate the appearance of the label column in the dataform but in my instance, I want more control over the width of the column in which the label resides. I have overriden the DataFormDataFieldTemplate style and located the releavtn columns but any change I make to the first column appear to have no effect. I have tried setting the Width to "Auto" and to a fixed value but still it seems to want to take up what space it likes.

<ControlTemplate x:Key="DataFormDataFieldTemplate" TargetType="telerik:DataFormDataField">    
  <Border x:Name="PART_RootElement" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">     
<Grid x:Name="PART_DataFormDataFieldGrid" Margin="{TemplateBinding Padding}">      
<Grid.ColumnDefinitions>       
<ColumnDefinition Width="Auto"/> <!-- Change this to 80, 100, 200 etc. makes no difference -->      
<ColumnDefinition Width="*"/>       
<ColumnDefinition Width="24"/>      
</Grid.ColumnDefinitions>      
<Grid.RowDefinitions>       
<RowDefinition/>       
<RowDefinition/>      
</Grid.RowDefinitions>            
<TextBlock x:Name="PART_Label" Margin="5,0" Text="{TemplateBinding Label}" />            
<ContentPresenter x:Name="PART_ContentPresenter" Content="{TemplateBinding Content}" Grid.Column="1" HorizontalAlignment="Left" Margin="5,0" Grid.Row="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>      

<!-- etc. -->

My reasons lie behind the fact that with greater widths, the gap between label and value becomes so significant that it results in a form that is more difficult to read.

Any ideas?

Kind Regards

Ben

[blaise]

Hello I finally decided to override the DataFormDataField, I first thought about creating an new one but it's was not really the productive option, this field has some standard behaviors which are reused in whole of our application.
Overriding it allow us to take the control on the different parts of the control:


1. Do not forget to set the default style in the constructor:

DefaultStyleKey = typeof (Telerik.Windows.Controls.DataFormDataField);

2. Get children part in OnApplyTemplate method

public override void OnApplyTemplate()
{
    _applyingTemplate = true;
    base.OnApplyTemplate();
    LabelControl = (TextBlock)GetTemplateChild("PART_Label");
    DescriptionControl = (Grid)GetTemplateChild("DescriptionIcon");
    Container = (Grid) GetTemplateChild("PART_DataFormDataFieldGrid");
    ContentPresenter = (ContentPresenter) GetTemplateChild("PART_ContentPresenter");
    UpdateVisualState();
    _applyingTemplate = false;
}

3. Implement your UpdateVisualState requiremed behavior

private void UpdateVisualState()
{
    if (!_applyingTemplate && (DescriptionControl == null || Container == null))
        OnApplyTemplate();

    if (DescriptionControl != null && Container != null)
    {
        Container.ColumnDefinitions[0].Width = new GridLength(LabelWidth);
        Container.ColumnDefinitions[1].Width = new GridLength(100, GridUnitType.Star);
        Container.ColumnDefinitions[2].Width = GridLength.Auto;

        DescriptionControl.Visibility = ShowDescription ? Visibility.Visible : Visibility.Collapsed;
    }
}

4. A good way to add dynamic customisation is by adding dependency properties (like LabelWidh or ShowDescription properties which you can read at point 4)

public static readonly DependencyProperty LabelWidthProperty =
    DependencyProperty.Register("LabelWidth", typeof(double), typeof(DataField), new PropertyMetadata((double)100, OnVisualPropertyChanged));

public double LabelWidth
{
    get { return (double) GetValue(LabelWidthProperty); }
    set { SetValue(LabelWidthProperty, value); }
}

5. Ensure that visual property changes will imply a update of the visual state, it is possible thanks to the static change callback property of the dependencyproperies

private static void OnVisualPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
    var df = (DataField) d;
    df.UpdateVisualState();

}

--> That's it. instead of a incomprehensible sizing mecanism, you can now have a full "fields grid like" which has a label sized to 100 px (by default). The work to do for bold label is almost done, I let you on it ;)

[Maya]

Hi Blaise,

Thank you for sharing the approach you developed with the community. I am sure it will be quite helpful for those that struggle with the same issue as yours.  

All the best,
Maya
the Telerik team