DataForm Theming DataFormDataField height

3 posts, 0 answers
  1. ITA
    ITA avatar
    383 posts
    Member since:
    Aug 2009

    Posted 08 Jul 2015 Link to this post

    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. ITA
    ITA avatar
    383 posts
    Member since:
    Aug 2009

    Posted 20 Jul 2015 in reply to ITA Link to this post

    hi,

     no solution for this problem?

    thanks
    regards#
    rene

  3. UI for WPF is Visual Studio 2017 Ready
  4. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 22 Jul 2015 Link to this post

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