DataForm Theming DataFormDataField height

[ITA]

Hi,

is use a RadDataForm (set telerik:StyleManager.Themes="Windows8Touch") and a DataTemplate like this

 

<DataTemplate x:Key="MyTemplate">
            <GroupBox Margin="10">
                <GroupBox.HeaderTemplate>
                    <DataTemplate>
                        <Border Background="LawnGreen" CornerRadius="5,5,0,0">
                            <TextBlock Text="Kunde" Margin="5" Width="100"/>
                        </Border>
                    </DataTemplate>
                </GroupBox.HeaderTemplate>
                <Border Margin="10" ScrollViewer.VerticalScrollBarVisibility="Auto">
                    <Grid x:Name="ReadOnlyGrid">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"  />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="40" />
                            <ColumnDefinition Width="300" />
                            <ColumnDefinition Width="50" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <Image Grid.Column="0" Grid.Row="0" Source="/flexCRM_Adresssen;component/Style/Images/adressenr.png" Height="20" Margin="10,0,5,0"/>
                        <telerik:DataFormDataField Label="" DataMemberBinding="{Binding Identnummer, Mode=TwoWay}" Padding="0" Name="IdentnummerText" Grid.Row="0" Grid.Column="1" Height="Auto" FontSize="10" IsReadOnly="True" Margin="5"/>
                        <Image Grid.Column="0" Grid.Row="1" Source="/flexCRM_Adresssen;component/Style/Images/adresseninfo.png" Height="20" Margin="10,0,5,0"/>
                        <telerik:DataFormDataField Label="" DataMemberBinding="{Binding Name, Mode=TwoWay}" Padding="0" Name="NameText" Grid.Row="1" Grid.Column="1" Height="Auto" FontSize="10" HorizontalAlignment="Left" HorizontalContentAlignment="Left" VerticalContentAlignment="Stretch" FontWeight="SemiBold" Margin="5" MaxWidth="400"/>
                        <telerik:DataFormDataField Label=""  DataMemberBinding="{Binding Ans, Mode=TwoWay}" Padding="0" Name="AnschriftText" Grid.Row="2" Grid.Column="1" Height="Auto" FontSize="10" Margin="5" HorizontalAlignment="Left" HorizontalContentAlignment="Left" VerticalContentAlignment="Stretch" MaxWidth="400"/>
                        <telerik:DataFormDataField Label=""  DataMemberBinding="{Binding Str, Mode=TwoWay}" Padding="0" Name="StrasseText" Grid.Row="3" Grid.Column="1" Height="Auto" FontSize="10"  Margin="5" HorizontalAlignment="Left" HorizontalContentAlignment="Left" VerticalContentAlignment="Stretch" MaxWidth="400"/>
                        <StackPanel Grid.Row="4" Grid.Column="1" Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Stretch">
                            <telerik:DataFormDataField Label=""  DataMemberBinding="{Binding Plz, Mode=TwoWay}" Width="70" Padding="0" Name="PlzText" Height="Auto" FontSize="10" HorizontalAlignment="Left" HorizontalContentAlignment="Left" VerticalContentAlignment="Stretch"  Margin="5"/>
                            <telerik:DataFormDataField Label="" DataMemberBinding="{Binding Nort, Mode=TwoWay}" Padding="0" Name="OrtText" Height="Auto" FontSize="10" HorizontalAlignment="Left" HorizontalContentAlignment="Left" VerticalContentAlignment="Stretch"  Margin="10,5,5,5" />
                        </StackPanel>
                        <telerik:DataFormDataField Label="" DataMemberBinding="{Binding Staat, Mode=TwoWay}" Padding="0" Name="StaatText" Grid.Row="5" Grid.Column="1" Height="Auto" FontSize="10" HorizontalAlignment="Left" HorizontalContentAlignment="Left" VerticalContentAlignment="Stretch" Margin="5" MaxWidth="400"/>

                        <Image Grid.Column="2" Grid.Row="0" Source="/flexCRM_Adresssen;component/Style/Images/telefon.png" Height="20" />
                        <telerik:DataFormDataField DataMemberBinding="{Binding Tele, Mode=TwoWay}" Padding="0" Name="TelefonText" Grid.Row="0" Grid.Column="3" FontSize="12" HorizontalAlignment="Left" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Margin="5" MaxWidth="400" />
                        <Image Grid.Column="2" Grid.Row="1" Source="/flexCRM_Adresssen;component/Style/Images/mobiltelefon.png" Height="20" />
                        <telerik:DataFormDataField DataMemberBinding="{Binding Mtele, Mode=TwoWay}" Padding="0" Name="MobilText" Grid.Row="1" Grid.Column="3" MaxWidth="400" Height="Auto" FontSize="12" HorizontalAlignment="Left" HorizontalContentAlignment="Left" VerticalContentAlignment="Stretch" Margin="5" />
                        <Image Grid.Column="2" Grid.Row="2" Source="/flexCRM_Adresssen;component/Style/Images/email.png" Width="20" />
                        <telerik:DataFormDataField DataMemberBinding="{Binding Email, Mode=TwoWay}" Padding="0" Name="EmailText" Grid.Row="2" Grid.Column="3" MaxWidth="400" Height="Auto" FontSize="12" HorizontalAlignment="Left" HorizontalContentAlignment="Left" VerticalContentAlignment="Stretch" Margin="5" />
                        <Image Grid.Column="2" Grid.Row="3" Source="/flexCRM_Adresssen;component/Style/Images/www.png" Width="20" />
                        <telerik:DataFormDataField DataMemberBinding="{Binding Urlt, Mode=TwoWay}" Padding="0" Name="UrlText" Grid.Row="3" Grid.Column="3" MaxWidth="400" Height="Auto" FontSize="12" HorizontalAlignment="Left" HorizontalContentAlignment="Left" VerticalContentAlignment="Stretch" Margin="5" />
                        <Button Grid.Column="2" Grid.Row="4" HorizontalContentAlignment="Left" Padding="0" Margin="5" Width="40" HorizontalAlignment="Left" BorderBrush="{x:Null}" BorderThickness="0">
                            <Image Source="/flexCRM_Adresssen;component/Style/Images/googlemaps.png" Stretch="Uniform" />
                        </Button>
                    </Grid>
                </Border>
            </GroupBox>
        </DataTemplate>

 
works fine. But i habe two Problems!

1) If i set width of da DataFormDataField, it's not possible to get the Contet HorizontalAligement left. This just works if i delete the width property.

2) Is it possible to set the height of a DataFormField. If i do so, the content is not shown any more. I set the FontSize = "6" too, but without any success.

Thanks
Regards
Rene

[ITA]

hi,

 no solution for this problem?

thanks
regards#
rene

[Dimitrina]

Hi Rene,

I tested some scenarios on setting HorizontalAlignment/HorizontalContentAlignment for DataFormDataFields and they are aligned Left even if Width is set. Still, the Label part is not aligned accordingly when Width for it is set. Is this the issue - the aligning of the Label part?
If so, then I checked the template of DataFormDataField and as it turns out there is not such setting configured for PART_Label:

<ContentControl x:Name="PART_Label"
  IsTabStop="False"
  VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
  Content="{TemplateBinding Label}"
  Foreground="{TemplateBinding Foreground}"
  ContentTemplate="{TemplateBinding LabelTemplate}"
  Margin="10 1"
  FontSize="{telerik1:Office2013Resource ResourceKey=FontSizeS}"
  FontFamily="{telerik1:Office2013Resource ResourceKey=FontFamily}"
  FontWeight="Normal"/>

As to the height, indeed the content is not centered when bigger Height is set. In order to benefit from dynamic fonts, I would suggest you using a Theme supporting them. For example Windows8, Office2013 or VisualStudio 2013.

You can also refer to the common topic on Editing Control Templates and check the full template of RadDataForm and its fields.

Regards,
Dimitrina
Telerik