Label customization in DataFormXField

9 posts, 1 answers
  1. Leos
    Leos avatar
    57 posts
    Member since:
    Jul 2010

    Posted 04 Apr 2011 Link to this post

    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
  2. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 04 Apr 2011 Link to this post

    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
  3. DevCraft banner
  4. Leos
    Leos avatar
    57 posts
    Member since:
    Jul 2010

    Posted 04 Apr 2011 Link to this post

    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
  5. Answer
    Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 05 Apr 2011 Link to this post

    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
  6. blaise
    blaise avatar
    12 posts
    Member since:
    Feb 2011

    Posted 18 Jul 2011 Link to this post

    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).
  7. Faye
    Faye avatar
    2 posts
    Member since:
    May 2011

    Posted 15 Dec 2011 Link to this post

    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.
  8. Ben Jones
    Ben Jones avatar
    12 posts
    Member since:
    Jun 2009

    Posted 23 Feb 2012 Link to this post

    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
  9. blaise
    blaise avatar
    12 posts
    Member since:
    Feb 2011

    Posted 24 Feb 2012 Link to this post

    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 ;)
  10. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 24 Feb 2012 Link to this post

    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 >>
Back to Top
DevCraft banner