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

Label customization in DataFormXField

8 Answers 154 Views
DataForm
This is a migrated thread and some comments may be shown as answers.
Leos
Top achievements
Rank 1
Leos asked on 04 Apr 2011, 09:18 AM
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

8 Answers, 1 is accepted

Sort by
0
Maya
Telerik team
answered on 04 Apr 2011, 09:50 AM
Hello Leos,

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

All the best,
Maya
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Leos
Top achievements
Rank 1
answered on 04 Apr 2011, 10:18 AM
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
0
Accepted
Vanya Pavlova
Telerik team
answered on 05 Apr 2011, 08:57 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
blaise
Top achievements
Rank 1
answered on 18 Jul 2011, 11:31 AM
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).
0
Faye
Top achievements
Rank 1
answered on 16 Dec 2011, 05:50 AM
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.
0
Ben Jones
Top achievements
Rank 1
answered on 23 Feb 2012, 01:21 PM
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
0
blaise
Top achievements
Rank 1
answered on 24 Feb 2012, 09:23 AM
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 ;)
0
Maya
Telerik team
answered on 24 Feb 2012, 09:45 AM
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
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Tags
DataForm
Asked by
Leos
Top achievements
Rank 1
Answers by
Maya
Telerik team
Leos
Top achievements
Rank 1
Vanya Pavlova
Telerik team
blaise
Top achievements
Rank 1
Faye
Top achievements
Rank 1
Ben Jones
Top achievements
Rank 1
Share this question
or