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

DataForm Theming DataFormDataField height

2 Answers 109 Views
DataForm
This is a migrated thread and some comments may be shown as answers.
ITA
Top achievements
Rank 1
ITA asked on 08 Jul 2015, 06:38 AM

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

2 Answers, 1 is accepted

Sort by
0
ITA
Top achievements
Rank 1
answered on 20 Jul 2015, 07:43 AM

hi,

 no solution for this problem?

thanks
regards#
rene

0
Dimitrina
Telerik team
answered on 22 Jul 2015, 01:38 PM
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
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 Feedback Portal and vote to affect the priority of the items
Tags
DataForm
Asked by
ITA
Top achievements
Rank 1
Answers by
ITA
Top achievements
Rank 1
Dimitrina
Telerik team
Share this question
or