Custom style for PropertyGridField

24 posts, 0 answers
  1. Hans
    Hans avatar
    15 posts
    Member since:
    Jan 2011

    Posted 04 Apr 2014 Link to this post

    I am using the RadPropertyGrid in 2 different scenario's and in one of these scenario's the style needs to be different than the other scenario, but both need to be customized. I have created a custom style for the RadPropertyGrid itself, but now I need to customize the PropertyGridField as well. I can't find a way to explicitly apply a style to this control.

    Usually in ItemsControls there is an ItemContainerStyle property that allows this, but I can only go as far as the RadPropertyGrid's PropertyGridPresenter, which seems to be a ContentControl instead of an ItemsControl. Also, the PropertyGridPresenter has no style so I am unsure how exactly to customize it in order to control the style of the PropertyGridField.

    I am currently overriding the RadPropertyGrid in order to create a different style key to customize all occurances of this control. I hoped I could find a method that creates the PropertyGridFields, such as the ItemsControl.GetContainerForItemOverride, but to no avail.

    How can I explicitly style the PropertyGridField used in a "MyPropertyGrid" derived control?

    Kind regards,
    Beijerinc (on behalf of Hans)
  2. Hans
    Hans avatar
    15 posts
    Member since:
    Jan 2011

    Posted 04 Apr 2014 in reply to Hans Link to this post

    I forgot to mention that I am using version 2013.2.724.1050.

  3. DevCraft R3 2016 release webinar banner
  4. Vanya Pavlova
    Vanya Pavlova avatar
    2019 posts

    Posted 07 Apr 2014 Link to this post

    Hello Beijerinc,

    You may use the FieldStyle property of RadPropertyGrid, in order to explicitly set style for its PropertyGridFields, as proposed below:

            <Style x:Key="fieldStyle" TargetType="telerik:PropertyGridField" BasedOn="{StaticResource PropertyGridFieldStyle}">
                <Setter Property="Background" Value="Red"/>
        <telerik:RadButton x:Name="b1" Content="Button"/>
        <telerik:RadPropertyGrid  FieldStyle="{StaticResource fieldStyle}" Item="{Binding ElementName=b1}"/>

    Vanya Pavlova

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

  5. Hans
    Hans avatar
    15 posts
    Member since:
    Jan 2011

    Posted 10 Apr 2014 in reply to Vanya Pavlova Link to this post

    Thank you for your response, Vanya.

    I have tried setting the FieldStyle with my customized style, but now all my fields are gone. At first I thought there may be a style problem, so I tried setting the FieldStyle to the default Telerik style, but the same thing happens.

    I am starting to think the FieldStyle property is not properly hooked up, especially since the PropertyGridField itself specifies PropertyGridFields in a DataTemplate for the purposes of property nesting. I don't think it is possible to persist the FieldStyle set in the RadPropertyGrid down to a PropertyGridField into this DataTemplate through code behind. As far as I know a DataTemplate is pretty much a solid barrier through which all XAML context is lost (except for static resources).

    Could you perhaps provide a sample project setting the FieldStyle to a style that e.g. sets a different selection background color?

    Kind regards,
  6. Yoan
    Yoan avatar
    1051 posts

    Posted 15 Apr 2014 Link to this post

    Hello Beijerinc,

    Are you using Expression Blend to extract PropertyGrid's style? Your problem might be related to the fact that Blend clears some of the bindings of RadPropertyGrid - ItemsSouce of the ItemsControls for example. What I could suggest is to work with the templates provided in our xaml files coming with the full installation. Please note that the styles used in our themes are theme specific. Thus, you should predefine the template of PropertyGridField against each theme. You can find it together with all the other templates used for the PropertyGrid inside "Telerik.Windows.Controls.Data.xaml" file browsing to "InstallationFolder\Silverlight\Themes.Implicit\OfficeBlack(or Office2013/ Windows8 )\Themes" folder. Also, you can check our Implicit Styles help article for a reference.


    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

  7. Hans
    Hans avatar
    15 posts
    Member since:
    Jan 2011

    Posted 22 Apr 2014 in reply to Yoan Link to this post

    Hello Yoan,

    Actually, I pulled the style from a decompiler, because that has always been accurate in the past. I have the sources right here as well, so I decided to take a look in there, but I can't find the problem. Also, I am a little stumped by how this FieldStyle would be assigned to the fields. There are no style properties on the PropertyGridPresenter, where I would expect them seeing as how they should be persisted down to the presenter's internals. Perhaps you can take a look at my XAML?

    004.    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
    005.    xmlns:telerikdata="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Data"
    006.    xmlns:telerikchromes="clr-namespace:Telerik.Windows.Controls.Chromes;assembly=Telerik.Windows.Controls"
    007.    xmlns:telerikinput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
    008.    xmlns:telerikpropertygrid="clr-namespace:Telerik.Windows.Controls.Data.PropertyGrid;assembly=Telerik.Windows.Controls.Data"
    009.    xmlns:phoenixrepositoryentities="clr-namespace:Optimizers.Phoenix.Framework.Repository.Entities;assembly=Optimizers.Phoenix.Framework.Web.SL.Services"
    010.    xmlns:wmsforms="clr-namespace:Optimizers.Phoenix.WMS.Web.SL.Controls.Forms;assembly=Optimizers.Phoenix.WMS.Web.SL.Controls"
    011.    xmlns:system="clr-namespace:System;assembly=mscorlib">
    013.    <SolidColorBrush x:Key="GridView_ToggleButtonStroke" Color="Black" />
    014.    <SolidColorBrush x:Key="GridView_ToggleButtonForeground" Color="#FF9D9D9D" />
    015.    <LinearGradientBrush x:Key="GridView_ToggleButtonBorder" EndPoint="0.854,0.854" StartPoint="0.146,0.146">
    016.        <GradientStop Color="#FF282828" Offset="1" />
    017.        <GradientStop Color="#FFBFBFBF" />
    018.    </LinearGradientBrush>
    019.    <LinearGradientBrush x:Key="GridView_ToggleButtonBackground" EndPoint="0.854,0.854" StartPoint="0.146,0.146">
    020.        <GradientStop Color="#FFD1D1D1" Offset="1" />
    021.        <GradientStop Color="White" />
    022.    </LinearGradientBrush>
    023.    <SolidColorBrush x:Key="ItemOuterBorder_Selected" Color="#FFFFC92B" />
    024.    <SolidColorBrush x:Key="ItemInnerBorder_Selected" Color="White" />
    025.    <LinearGradientBrush x:Key="ItemBackground_Selected" EndPoint="0.5,1" StartPoint="0.5,0">
    026.        <GradientStop Color="#FFFCE79F" Offset="1" />
    027.        <GradientStop Color="#FFFDD3A8" />
    028.    </LinearGradientBrush>
    029.    <SolidColorBrush x:Key="ItemOuterBorder_Over" Color="#FFFFC92B" />
    030.    <SolidColorBrush x:Key="ItemInnerBorder_Over" Color="White" />
    031.    <LinearGradientBrush x:Key="ItemBackground_Over" EndPoint="0.5,1" StartPoint="0.5,0">
    032.        <GradientStop Color="#FFFFFBA3" Offset="1" />
    033.        <GradientStop Color="#FFFFFBDA" Offset="0" />
    034.    </LinearGradientBrush>
    035.    <SolidColorBrush x:Key="ControlOuterBorder" Color="#FFD2DAE4" />
    036.    <SolidColorBrush x:Key="ControlInnerBorder" Color="#FFFFFFFF" />
    037.    <SolidColorBrush x:Key="PropertyGrid_IndentCellBackground" Color="#FFE4E4E4" />
    038.    <SolidColorBrush x:Key="PropertyGrid_TemplatesBorderBrush" Color="#FFCBCBCB" />
    039.    <SolidColorBrush x:Key="ToggleButton_Indicator" Color="Black" />
    041.    <SolidColorBrush x:Key="RadioButton_Indicator" Color="Black" />
    042.    <SolidColorBrush x:Key="PropertyGrid_SearchIndicator_Background" Color="#FF919191" />
    043.    <SolidColorBrush x:Key="PropertyGrid_DescriptionBackground" Color="Transparent" />
    044.    <SolidColorBrush x:Key="ControlBackground" Color="Transparent" />
    045.    <SolidColorBrush x:Key="ControlForeground" Color="#FF000000" />
    047.    <telerik:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
    048.    <telerikpropertygrid:FlatItemSourceConverter x:Key="FlatItemSourceConverter" />
    049.    <telerikpropertygrid:HeaderVisibilityConverter x:Key="HeaderVisibilityConverter" />
    050.    <telerikpropertygrid:GroupingItemsSourceConverter x:Key="GroupingItemsSourceConverter" />
    052.    <DataTemplate x:Key="StringTemplate" DataType="phoenixrepositoryentities:PhoenixCustomEntity">
    053.        <TextBox telerikpropertygrid:AutoBindBehavior.UpdateBindingOnElementLoaded="Text" />
    054.    </DataTemplate>
    055.    <DataTemplate x:Key="BooleanTemplate" DataType="phoenixrepositoryentities:PhoenixCustomEntity">
    056.        <CheckBox telerikpropertygrid:AutoBindBehavior.UpdateBindingOnElementLoaded="IsChecked" />
    057.    </DataTemplate>
    058.    <DataTemplate x:Key="IntegerTemplate" DataType="phoenixrepositoryentities:PhoenixCustomEntity">
    059.        <telerikinput:RadNumericUpDown telerikpropertygrid:AutoBindBehavior.UpdateBindingOnElementLoaded="Value" />
    060.    </DataTemplate>
    061.    <DataTemplate x:Key="DoubleTemplate" DataType="phoenixrepositoryentities:PhoenixCustomEntity">
    062.        <telerikinput:RadNumericUpDown telerikpropertygrid:AutoBindBehavior.UpdateBindingOnElementLoaded="Value" />
    063.    </DataTemplate>
    064.    <DataTemplate x:Key="DateTimeOffsetTemplate" DataType="phoenixrepositoryentities:PhoenixCustomEntity">
    065.        <telerikinput:RadDateTimePicker telerikpropertygrid:AutoBindBehavior.UpdateBindingOnElementLoaded="SelectedValue" />
    066.    </DataTemplate>
    068.    <wmsforms:CharacteristicEditorTemplateSelector x:Key="CharacteristicsEditorTemplateSelector"
    069.                                                   StringTemplate="{StaticResource StringTemplate}"
    070.                                                   BooleanTemplate="{StaticResource BooleanTemplate}"
    071.                                                   IntegerTemplate="{StaticResource IntegerTemplate}"
    072.                                                   DoubleTemplate="{StaticResource DoubleTemplate}"
    073.                                                   DateTimeOffsetTemplate="{StaticResource DateTimeOffsetTemplate}" />
    075.    <Style x:Key="PropertyGridNestedToggleButtonStyle" TargetType="telerik:RadToggleButton">
    076.        <Setter Property="Background" Value="{StaticResource GridView_ToggleButtonBackground}" />
    077.        <Setter Property="Foreground" Value="{StaticResource GridView_ToggleButtonForeground}" />
    078.        <Setter Property="BorderBrush" Value="{StaticResource GridView_ToggleButtonBorder}" />
    079.        <Setter Property="BorderThickness" Value="1" />
    080.        <Setter Property="HorizontalContentAlignment" Value="Center" />
    081.        <Setter Property="VerticalContentAlignment" Value="Center" />
    082.        <Setter Property="Padding" Value="0" />
    084.        <Setter Property="Template">
    085.            <Setter.Value>
    086.                <ControlTemplate TargetType="telerik:RadToggleButton">
    087.                    <Border Background="Transparent" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    088.                        <VisualStateManager.VisualStateGroups>
    089.                            <VisualStateGroup x:Name="CommonStates">
    090.                                <VisualState x:Name="Normal" />
    091.                                <VisualState x:Name="MouseOver" />
    092.                                <VisualState x:Name="Disabled" />
    093.                            </VisualStateGroup>
    094.                            <VisualStateGroup x:Name="CheckStates">
    095.                                <VisualState x:Name="Checked">
    096.                                    <Storyboard>
    097.                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="plus" Storyboard.TargetProperty="(UIElement.Opacity)">
    098.                                            <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0" />
    099.                                        </DoubleAnimationUsingKeyFrames>
    100.                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="minus" Storyboard.TargetProperty="(UIElement.Opacity)">
    101.                                            <EasingDoubleKeyFrame KeyTime="00:00:00" Value="1" />
    102.                                        </DoubleAnimationUsingKeyFrames>
    103.                                    </Storyboard>
    104.                                </VisualState>
    105.                                <VisualState x:Name="Unchecked" />
    106.                            </VisualStateGroup>
    107.                            <VisualStateGroup x:Name="FocusStates">
    108.                                <VisualState x:Name="Focused" />
    109.                                <VisualState x:Name="Unfocused" />
    110.                            </VisualStateGroup>
    111.                        </VisualStateManager.VisualStateGroups>
    113.                        <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
    114.                                Width="9" Height="9" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
    115.                            <Grid>
    116.                                <Path x:Name="plus" Fill="{StaticResource GridView_ToggleButtonStroke}" Stretch="Fill" Stroke="{x:Null}"
    117.                                      Width="5" Height="5" Margin="{TemplateBinding Padding}"
    118.                                      Data="M1.937,0 L2.937,0 2.937,2.0209999 5,2.0209999 5,3.0209999 2.937,3.0209999 2.937,5 1.937,5 1.937,3.0209999 0,3.0209999 0,2.0209999 1.937,2.0209999 z" />
    119.                                <Rectangle x:Name="minus" Fill="{StaticResource GridView_ToggleButtonStroke}" Stroke="{x:Null}" RadiusX="0" RadiusY="0" Opacity="0"
    120.                                           Width="5" Height="1" Margin="{TemplateBinding Padding}" HorizontalAlignment="Center" VerticalAlignment="Center" />
    121.                            </Grid>
    122.                        </Border>
    123.                    </Border>
    124.                </ControlTemplate>
    125.            </Setter.Value>
    126.        </Setter>
    127.    </Style>
    129.    <Style x:Key="PropertyGridGripperStyle" TargetType="Thumb">
    130.        <Setter Property="Background" Value="Transparent" />
    131.        <Setter Property="BorderBrush" Value="Transparent" />
    132.        <Setter Property="BorderThickness" Value="0" />
    133.        <Setter Property="Width" Value="8" />
    134.        <Setter Property="Padding" Value="0" />
    135.        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    136.        <Setter Property="VerticalContentAlignment" Value="Stretch" />
    137.        <Setter Property="Cursor" Value="SizeWE" />
    139.        <Setter Property="Template">
    140.            <Setter.Value>
    141.                <ControlTemplate TargetType="Thumb">
    142.                    <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
    143.                            Padding="{TemplateBinding Padding}"
    144.                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
    145.                </ControlTemplate>
    146.            </Setter.Value>
    147.        </Setter>
    148.    </Style>
    150.    <Style x:Key="ItemsControlStyle" TargetType="ItemsControl">
    151.        <Setter Property="Template">
    152.            <Setter.Value>
    153.                <ControlTemplate TargetType="ItemsControl">
    154.                    <ScrollViewer Margin="0 -1 0 0">
    155.                        <ItemsPresenter />
    156.                    </ScrollViewer>
    157.                </ControlTemplate>
    158.            </Setter.Value>
    159.        </Setter>
    160.    </Style>
    162.    <Style x:Key="VirtualizedItemsControlStyle" TargetType="ItemsControl" BasedOn="{StaticResource ItemsControlStyle}">
    163.        <Setter Property="ItemsPanel">
    164.            <Setter.Value>
    165.                <ItemsPanelTemplate>
    166.                    <VirtualizingStackPanel />
    167.                </ItemsPanelTemplate>
    168.            </Setter.Value>
    169.        </Setter>
    170.    </Style>
    172.    <Style x:Key="PropertyGridToggleButtonStyle" TargetType="telerik:RadToggleButton">
    173.        <Setter Property="Foreground" Value="#FF000000" />
    174.        <Setter Property="BorderBrush" Value="{StaticResource ControlOuterBorder}" />
    175.        <Setter Property="Height" Value="25" />
    176.        <Setter Property="HorizontalContentAlignment" Value="Left" />
    177.        <Setter Property="VerticalContentAlignment" Value="Stretch" />
    178.        <Setter Property="FontWeight" Value="Bold" />
    180.        <Setter Property="Template">
    181.            <Setter.Value>
    182.                <ControlTemplate TargetType="telerik:RadToggleButton">
    183.                    <Grid>
    184.                        <VisualStateManager.VisualStateGroups>
    185.                            <VisualStateGroup x:Name="CommonStates">
    186.                                <VisualState x:Name="Normal" />
    187.                                <VisualState x:Name="MouseOver" />
    188.                                <VisualState x:Name="Disabled" />
    189.                            </VisualStateGroup>
    190.                            <VisualStateGroup x:Name="CheckStates">
    191.                                <VisualState x:Name="Checked">
    192.                                    <Storyboard>
    193.                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" Storyboard.TargetName="ExpanderButton">
    194.                                            <EasingDoubleKeyFrame KeyTime="00:00:00.2" Value="180" />
    195.                                        </DoubleAnimationUsingKeyFrames>
    196.                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="IconOuterBorder">
    197.                                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="0,0,0,0" />
    198.                                        </ObjectAnimationUsingKeyFrames>
    199.                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="IconInnerBorder">
    200.                                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="1,1,0,0" />
    201.                                        </ObjectAnimationUsingKeyFrames>
    202.                                    </Storyboard>
    203.                                </VisualState>
    204.                                <VisualState x:Name="Unchecked" />
    205.                            </VisualStateGroup>
    206.                            <VisualStateGroup x:Name="FocusStates">
    207.                                <VisualState x:Name="Focused" />
    208.                                <VisualState x:Name="Unfocused" />
    209.                            </VisualStateGroup>
    210.                        </VisualStateManager.VisualStateGroups>
    212.                        <Grid.ColumnDefinitions>
    213.                            <ColumnDefinition Width="Auto" />
    214.                            <ColumnDefinition Width="*" />
    215.                        </Grid.ColumnDefinitions>
    217.                        <Border x:Name="IconOuterBorder" BorderBrush="{StaticResource ControlOuterBorder}" BorderThickness="0,0,0,1"
    218.                                Width="25" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" Grid.Row="0">
    219.                            <Border x:Name="IconInnerBorder" Background="{StaticResource PropertyGrid_IndentCellBackground}"
    220.                                    BorderBrush="{StaticResource ControlInnerBorder}" BorderThickness="1 1 0 1">
    221.                                <Path x:Name="ExpanderButton" RenderTransformOrigin="0.5,0.5"
    222.                                      Fill="{StaticResource ToggleButton_Indicator}" Width="7" Height="5" HorizontalAlignment="Center" VerticalAlignment="Center"
    223.                                      Data="M0,0L1,0 2,0 2,0.99999991 3,0.99999991 3,2 4,2 4,0.99999991 5,0.99999991 5,0 5.9999999,0 7,0 7,0.99999991 5.9999999,0.99999991 5.9999999,2 5,2 5,3 4,3 4,4 3,4 3,3 2,3 2,2 1,2 1,0.99999991 0,0.99999991z">
    224.                                    <Path.RenderTransform>
    225.                                        <RotateTransform/>
    226.                                    </Path.RenderTransform>
    227.                                </Path>
    228.                            </Border>
    229.                        </Border>
    231.                        <Border BorderBrush="{StaticResource ControlOuterBorder}" BorderThickness="0 0 0 1"
    232.                                Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="0">
    233.                            <Border Background="{StaticResource PropertyGrid_IndentCellBackground}"
    234.                                    BorderBrush="{StaticResource ControlInnerBorder}" BorderThickness="0 1 1 1">
    235.                                <ContentPresenter x:Name="PART_ContentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"
    236.                                                  Margin="{TemplateBinding Padding}"
    237.                                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
    238.                            </Border>
    239.                        </Border>
    241.                        <Border x:Name="ExpandBorder" BorderBrush="{StaticResource ControlOuterBorder}" BorderThickness="0 0 0 1"
    242.                                Margin="0 -1 0 0" VerticalAlignment="Top" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" />
    243.                    </Grid>
    244.                </ControlTemplate>
    245.            </Setter.Value>
    246.        </Setter>
    247.    </Style>
    249.    <DataTemplate x:Key="FlatTemplate">
    250.        <ItemsControl IsTabStop="False" ItemsSource="{Binding Converter={StaticResource FlatItemSourceConverter}}" Style="{StaticResource ItemsControlStyle}">
    251.            <ItemsControl.ItemTemplate>
    252.                <DataTemplate>
    253.                    <telerikpropertygrid:PropertyGridField Content="{Binding}" Visibility="{Binding Visibility}" />
    254.                </DataTemplate>
    255.            </ItemsControl.ItemTemplate>
    256.        </ItemsControl>
    257.    </DataTemplate>
    259.    <DataTemplate x:Key="FlatRenderingTemplate">
    260.        <telerik:ItemsControl VirtualizingStackPanel.VirtualizationMode="Standard" IsTabStop="False" ItemsSource="{Binding}">
    261.            <telerik:ItemsControl.Style>
    262.                <Style TargetType="telerik:ItemsControl">
    263.                    <Setter Property="Template">
    264.                        <Setter.Value>
    265.                            <ControlTemplate TargetType="ItemsControl">
    266.                                <ScrollViewer Margin="0 -1 0 0">
    267.                                    <ItemsPresenter />
    268.                                </ScrollViewer>
    269.                            </ControlTemplate>
    270.                        </Setter.Value>
    271.                    </Setter>
    273.                    <Setter Property="ItemsPanel">
    274.                        <Setter.Value>
    275.                            <ItemsPanelTemplate>
    276.                                <VirtualizingStackPanel />
    277.                            </ItemsPanelTemplate>
    278.                        </Setter.Value>
    279.                    </Setter>
    280.                </Style>
    281.            </telerik:ItemsControl.Style>
    283.            <telerik:ItemsControl.ItemTemplateSelector>
    284.                <telerikpropertygrid:FlatRenderingItemTemplateSelector>
    285.                    <telerikpropertygrid:FlatRenderingItemTemplateSelector.FieldTemplate>
    286.                        <DataTemplate>
    287.                            <telerikpropertygrid:PropertyGridField Content="{Binding}" Visibility="{Binding Visibility}" />
    288.                        </DataTemplate>
    289.                    </telerikpropertygrid:FlatRenderingItemTemplateSelector.FieldTemplate>
    290.                    <telerikpropertygrid:FlatRenderingItemTemplateSelector.GroupTemplate>
    291.                        <DataTemplate>
    292.                            <telerik:RadToggleButton x:Name="expandCollapseButton" BorderBrush="{x:Null}"
    293.                                                     Content="{Binding DisplayName}" IsChecked="{Binding IsExpanded, Mode=TwoWay}"
    294.                                                     Style="{StaticResource PropertyGridToggleButtonStyle}" />
    295.                        </DataTemplate>
    296.                    </telerikpropertygrid:FlatRenderingItemTemplateSelector.GroupTemplate>
    297.                </telerikpropertygrid:FlatRenderingItemTemplateSelector>
    298.            </telerik:ItemsControl.ItemTemplateSelector>
    299.        </telerik:ItemsControl>
    300.    </DataTemplate>
    302.    <DataTemplate x:Key="VirtualizedFlatTemplate">
    303.        <ItemsControl VirtualizingStackPanel.VirtualizationMode="Standard" IsTabStop="False"
    304.                      ItemsSource="{Binding Converter={StaticResource FlatItemSourceConverter}}" Style="{StaticResource VirtualizedItemsControlStyle}">
    305.            <ItemsControl.ItemTemplate>
    306.                <DataTemplate>
    307.                    <telerikpropertygrid:PropertyGridField Content="{Binding}" Visibility="{Binding Visibility}" />
    308.                </DataTemplate>
    309.            </ItemsControl.ItemTemplate>
    310.        </ItemsControl>
    311.    </DataTemplate>
    313.    <DataTemplate x:Key="GroupTemplate">
    314.        <ItemsControl ItemsSource="{Binding Converter={StaticResource GroupingItemsSourceConverter}}" Style="{StaticResource ItemsControlStyle}">
    315.            <ItemsControl.ItemTemplate>
    316.                <DataTemplate>
    317.                    <Border BorderBrush="{StaticResource ControlOuterBorder}" BorderThickness="0 1 0 0" Margin="0 -1 0 0">
    318.                        <Grid>
    319.                            <Grid.RowDefinitions>
    320.                                <RowDefinition Height="Auto" />
    321.                                <RowDefinition Height="*" />
    322.                            </Grid.RowDefinitions>
    324.                            <telerik:RadToggleButton x:Name="expandCollapseButton" BorderBrush="{x:Null}" Content="{Binding Key}" IsChecked="True"
    325.                                                     Style="{StaticResource PropertyGridToggleButtonStyle}"
    326.                                                     Grid.Column="0" Grid.Row="0" />
    328.                            <ContentPresenter x:Name="PART_ContentPresenter" Content="{Binding Items}"
    329.                                              Visibility="{Binding IsChecked, ElementName=expandCollapseButton, Converter={StaticResource BooleanToVisibilityConverter}}"
    330.                                              Grid.Column="0" Grid.Row="1">
    331.                                <ContentPresenter.ContentTemplate>
    332.                                    <DataTemplate>
    333.                                        <ItemsControl ItemsSource="{Binding Converter={StaticResource FlatItemSourceConverter}}" IsTabStop="False">
    334.                                            <ItemsControl.ItemTemplate>
    335.                                                <DataTemplate>
    336.                                                    <telerikpropertygrid:PropertyGridField Content="{Binding}" Visibility="{Binding Visibility}" />
    337.                                                </DataTemplate>
    338.                                            </ItemsControl.ItemTemplate>
    339.                                        </ItemsControl>
    340.                                    </DataTemplate>
    341.                                </ContentPresenter.ContentTemplate>
    342.                            </ContentPresenter>
    343.                        </Grid>
    344.                    </Border>
    345.                </DataTemplate>
    346.            </ItemsControl.ItemTemplate>
    347.        </ItemsControl>
    348.    </DataTemplate>
    350.    <telerikpropertygrid:ItemTemplateConverter x:Key="ItemTemplateConverter"
    351.                                               FlatTemplate="{StaticResource FlatTemplate}"
    352.                                               FlatRenderingTemplate="{StaticResource FlatRenderingTemplate}"
    353.                                               VirtualizedFlatTemplate="{StaticResource VirtualizedFlatTemplate}"
    354.                                               GroupTemplate="{StaticResource GroupTemplate}" />
    356.    <Style x:Key="PropertyGridIndentCellStyle" TargetType="telerikpropertygrid:PropertyGridIndentCell">
    357.        <Setter Property="BorderBrush" Value="{StaticResource ControlOuterBorder}" />
    358.        <Setter Property="BorderThickness" Value="0 0 1 0" />
    359.        <Setter Property="Padding" Value="0" />
    360.        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    361.        <Setter Property="VerticalContentAlignment" Value="Stretch" />
    363.        <Setter Property="Template">
    364.            <Setter.Value>
    365.                <ControlTemplate TargetType="telerikpropertygrid:PropertyGridIndentCell">
    366.                    <Border Background="Transparent" Width="25" />
    367.                </ControlTemplate>
    368.            </Setter.Value>
    369.        </Setter>
    370.    </Style>
    372.    <Style x:Key="PropertyGridColumnResizerStyle" TargetType="telerikpropertygrid:PropertyGridColumnResizer">
    373.        <Setter Property="IsTabStop" Value="False" />
    375.        <Setter Property="Template">
    376.            <Setter.Value>
    377.                <ControlTemplate TargetType="telerikpropertygrid:PropertyGridColumnResizer">
    378.                    <Border Background="{TemplateBinding Background}" VerticalAlignment="Stretch">
    379.                        <Thumb HorizontalAlignment="Right" Style="{StaticResource PropertyGridGripperStyle}" />
    380.                    </Border>
    381.                </ControlTemplate>
    382.            </Setter.Value>
    383.        </Setter>
    384.    </Style>
    386.    <Style x:Key="PropertyGridFieldStyle" TargetType="telerikpropertygrid:PropertyGridField">
    387.        <Setter Property="BorderBrush" Value="{StaticResource ControlOuterBorder}" />
    388.        <Setter Property="Background" Value="Transparent" />
    389.        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    390.        <Setter Property="VerticalContentAlignment" Value="Center" />
    391.        <Setter Property="IsTabStop" Value="False" />
    393.        <Setter Property="Template">
    394.            <Setter.Value>
    395.                <ControlTemplate TargetType="telerikpropertygrid:PropertyGridField">
    396.                    <Border x:Name="PART_RootElement" Background="{TemplateBinding Background}"
    397.                            BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
    398.                        <VisualStateManager.VisualStateGroups>
    399.                            <VisualStateGroup x:Name="SelectionStates">
    400.                                <VisualState x:Name="Unselected" />
    401.                                <VisualState x:Name="Selected">
    402.                                    <Storyboard>
    403.                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Chrome" Storyboard.TargetProperty="RenderSelected">
    404.                                            <DiscreteObjectKeyFrame KeyTime="00:00:00">
    405.                                                <DiscreteObjectKeyFrame.Value>
    406.                                                    <system:Boolean>True</system:Boolean>
    407.                                                </DiscreteObjectKeyFrame.Value>
    408.                                            </DiscreteObjectKeyFrame>
    409.                                        </ObjectAnimationUsingKeyFrames>
    410.                                    </Storyboard>
    411.                                </VisualState>
    412.                            </VisualStateGroup>
    413.                        </VisualStateManager.VisualStateGroups>
    415.                        <Grid>
    416.                            <Grid.RowDefinitions>
    417.                                <RowDefinition Height="*" />
    418.                                <RowDefinition Height="Auto" />
    419.                            </Grid.RowDefinitions>
    421.                            <Grid x:Name="PART_PropertyGridFieldGridN" MinHeight="25" Height="{TemplateBinding Height}">
    422.                                <Grid.ColumnDefinitions>
    423.                                    <ColumnDefinition Width="Auto" />
    424.                                    <ColumnDefinition Width="{Binding LabelColumnWidth, ElementName=PropertyGridPresenter}" />
    425.                                    <ColumnDefinition Width="*" />
    426.                                </Grid.ColumnDefinitions>
    428.                                <telerikchromes:ButtonChrome x:Name="Chrome" RenderNormal="True" Visibility="Collapsed"
    429.                                                             Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="0" />
    431.                                <!--<Border x:Name="PART_SelectionBackgroundN" />
    432.                                <Border x:Name="Background_Over" />
    433.                                <Grid x:Name="FieldIndicator" />-->
    434.                                <Border x:Name="PART_SelectionBackgroundN" BorderBrush="{StaticResource ItemOuterBorder_Selected}" BorderThickness="1" Grid.Column="1" CornerRadius="1" HorizontalAlignment="Stretch" Margin="1,1,1,2" Visibility="Collapsed" VerticalAlignment="Stretch">
    435.                                    <Border BorderBrush="{StaticResource ItemInnerBorder_Selected}" BorderThickness="1" Background="{StaticResource ItemBackground_Selected}" CornerRadius="1"/>
    436.                                </Border>
    437.                                <Border x:Name="Background_Over" BorderBrush="{StaticResource ItemOuterBorder_Over}" BorderThickness="1" Grid.Column="1" Grid.ColumnSpan="2" CornerRadius="1" HorizontalAlignment="Stretch" Margin="1,1,1,2" Visibility="{Binding IsMouseOver, Converter={StaticResource BooleanToVisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}" VerticalAlignment="Stretch">
    438.                                    <Border BorderBrush="{StaticResource ItemInnerBorder_Over}" BorderThickness="1" Background="{StaticResource ItemBackground_Over}" CornerRadius="1"/>
    439.                                </Border>
    440.                                <Grid x:Name="FieldIndicator" Visibility="{Binding RelativeSource={RelativeSource AncestorType=telerikdata:RadPropertyGrid}, Path=FieldIndicatorVisibility}">
    441.                                    <Border BorderBrush="{StaticResource ControlOuterBorder}" BorderThickness="0,0,1,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="25">
    442.                                        <Border BorderBrush="{StaticResource ControlInnerBorder}" BorderThickness="1,0,1,0" Background="{StaticResource PropertyGrid_IndentCellBackground}"/>
    443.                                    </Border>
    444.                                </Grid>
    446.                                <Border BorderBrush="{StaticResource PropertyGrid_TemplatesBorderBrush}" BorderThickness="1 0 0 1"
    447.                                        Grid.Column="4" Grid.Row="0">
    448.                                    <ContentPresenter Margin="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
    449.                                </Border>
    451.                                <Border BorderBrush="{StaticResource PropertyGrid_TemplatesBorderBrush}" BorderThickness="0 0 0 1"
    452.                                        Grid.Column="1" Grid.Row="0">
    453.                                    <StackPanel Orientation="Horizontal">
    454.                                        <telerikpropertygrid:PropertyGridIndentPresenter IndentLevel="{Binding Path=IndentLevel, RelativeSource={RelativeSource TemplatedParent}}">
    455.                                            <telerikpropertygrid:PropertyGridIndentPresenter.ItemsPanel>
    456.                                                <ItemsPanelTemplate>
    457.                                                    <StackPanel Orientation="Horizontal" />
    458.                                                </ItemsPanelTemplate>
    459.                                            </telerikpropertygrid:PropertyGridIndentPresenter.ItemsPanel>
    461.                                            <telerikpropertygrid:PropertyGridIndentPresenter.ItemTemplate>
    462.                                                <DataTemplate>
    463.                                                    <telerikpropertygrid:PropertyGridIndentCell Style="{StaticResource PropertyGridIndentCellStyle}" />
    464.                                                </DataTemplate>
    465.                                            </telerikpropertygrid:PropertyGridIndentPresenter.ItemTemplate>
    467.                                            <telerikpropertygrid:PropertyGridIndentPresenter.Template>
    468.                                                <ControlTemplate>
    469.                                                    <ItemsPresenter />
    470.                                                </ControlTemplate>
    471.                                            </telerikpropertygrid:PropertyGridIndentPresenter.Template>
    472.                                        </telerikpropertygrid:PropertyGridIndentPresenter>
    474.                                        <telerik:RadToggleButton x:Name="PART_NestedPropertiesButton" Background="Transparent" Width="25"
    475.                                                                 IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
    476.                                                                 Visibility="{Binding ShouldDisplayNestedProperties, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BooleanToVisibilityConverter}}"
    477.                                                                 Style="{StaticResource PropertyGridNestedToggleButtonStyle}" />
    479.                                        <TextBlock x:Name="PART_FieldLabelN" Text="{Binding DisplayName}" IsHitTestVisible="True"
    480.                                                   Margin="4 2 0 2" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
    481.                                    </StackPanel>
    482.                                </Border>
    484.                                <telerikpropertygrid:PropertyGridColumnResizer x:Name="ColumnResizer" Margin="0 0 -4 0" HorizontalAlignment="Right"
    485.                                                                               Style="{StaticResource PropertyGridColumnResizerStyle}"
    486.                                                                               Grid.Column="1" Grid.Row="0" />
    487.                            </Grid>
    489.                            <ItemsControl ItemsSource="{Binding NestedProperties, Converter={StaticResource FlatItemSourceConverter}}"
    490.                                          Visibility="{Binding Path=ShouldDisplayNestedItemsControl, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BooleanToVisibilityConverter}}"
    491.                                          Grid.Column="0" Grid.Row="1">
    492.                                <ItemsControl.ItemTemplate>
    493.                                    <DataTemplate>
    494.                                        <telerikpropertygrid:PropertyGridField Content="{Binding}" Visibility="{Binding Visibility}" />
    495.                                    </DataTemplate>
    496.                                </ItemsControl.ItemTemplate>
    497.                            </ItemsControl>
    498.                        </Grid>
    499.                    </Border>
    500.                </ControlTemplate>
    501.            </Setter.Value>
    502.        </Setter>
    503.    </Style>
    505.    <Style x:Key="PropertyGridFieldStyle2" TargetType="telerikpropertygrid:PropertyGridField">
    506.        <Setter Property="BorderBrush" Value="{StaticResource ControlOuterBorder}"/>
    507.        <Setter Property="IsTabStop" Value="False"/>
    508.        <Setter Property="Background" Value="Transparent"/>
    509.        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    510.        <Setter Property="VerticalContentAlignment" Value="Center"/>
    512.        <Setter Property="Template">
    513.            <Setter.Value>
    514.                <ControlTemplate TargetType="telerikpropertygrid:PropertyGridField">
    515.                    <Border x:Name="PART_RootElement" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" >
    517.                        <VisualStateManager.VisualStateGroups>
    518.                            <VisualStateGroup Name="SelectionStates">
    519.                                <VisualState x:Name="Unselected">
    520.                                    <Storyboard Duration="0">
    521.                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_SelectionBackgroundN" Storyboard.TargetProperty="Visibility">
    522.                                            <DiscreteObjectKeyFrame KeyTime="00:00:00">
    523.                                                <DiscreteObjectKeyFrame.Value>
    524.                                                    <Visibility>Collapsed</Visibility>
    525.                                                </DiscreteObjectKeyFrame.Value>
    526.                                            </DiscreteObjectKeyFrame>
    527.                                        </ObjectAnimationUsingKeyFrames>
    528.                                    </Storyboard>
    529.                                </VisualState>
    530.                                <VisualState x:Name="Selected">
    531.                                    <Storyboard Duration="0">
    532.                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_SelectionBackgroundN" Storyboard.TargetProperty="Visibility">
    533.                                            <DiscreteObjectKeyFrame KeyTime="00:00:00">
    534.                                                <DiscreteObjectKeyFrame.Value>
    535.                                                    <Visibility>Visible</Visibility>
    536.                                                </DiscreteObjectKeyFrame.Value>
    537.                                            </DiscreteObjectKeyFrame>
    538.                                        </ObjectAnimationUsingKeyFrames>
    539.                                    </Storyboard>
    540.                                </VisualState>
    541.                            </VisualStateGroup>
    542.                        </VisualStateManager.VisualStateGroups>
    544.                        <Grid>
    545.                            <Grid.RowDefinitions>
    546.                                <RowDefinition />
    547.                                <RowDefinition Height="Auto"/>
    548.                            </Grid.RowDefinitions>
    549.                            <Grid x:Name="PART_PropertyGridFieldGridN" MinHeight="25" Height="{TemplateBinding Height}">
    550.                                <Grid.ColumnDefinitions>
    551.                                    <ColumnDefinition Width="Auto"/>
    552.                                    <ColumnDefinition Width="{Binding LabelColumnWidth, ElementName=PropertyGridPresenter}"/>
    553.                                    <ColumnDefinition Width="*"/>
    554.                                </Grid.ColumnDefinitions>
    555.                                <Border x:Name="PART_SelectionBackgroundN" BorderBrush="{StaticResource ItemOuterBorder_Selected}" BorderThickness="1" Grid.Column="1" CornerRadius="1" HorizontalAlignment="Stretch" Margin="1,1,1,2" Visibility="Collapsed" VerticalAlignment="Stretch">
    556.                                    <Border BorderBrush="{StaticResource ItemInnerBorder_Selected}" BorderThickness="1" Background="{StaticResource ItemBackground_Selected}" CornerRadius="1"/>
    557.                                </Border>
    558.                                <Border x:Name="Background_Over" BorderBrush="{StaticResource ItemOuterBorder_Over}" BorderThickness="1" Grid.Column="1" Grid.ColumnSpan="2" CornerRadius="1" HorizontalAlignment="Stretch" Margin="1,1,1,2" Visibility="{Binding IsMouseOver, Converter={StaticResource BooleanToVisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}" VerticalAlignment="Stretch">
    559.                                    <Border BorderBrush="{StaticResource ItemInnerBorder_Over}" BorderThickness="1" Background="{StaticResource ItemBackground_Over}" CornerRadius="1"/>
    560.                                </Border>
    561.                                <Grid x:Name="FieldIndicator" Visibility="{Binding RelativeSource={RelativeSource AncestorType=telerikdata:RadPropertyGrid}, Path=FieldIndicatorVisibility}">
    562.                                    <Border BorderBrush="{StaticResource ControlOuterBorder}" BorderThickness="0,0,1,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="25">
    563.                                        <Border BorderBrush="{StaticResource ControlInnerBorder}" BorderThickness="1,0,1,0" Background="{StaticResource PropertyGrid_IndentCellBackground}"/>
    564.                                    </Border>
    565.                                </Grid>
    566.                                <Border BorderBrush="{StaticResource PropertyGrid_TemplatesBorderBrush}"  BorderThickness="1,0,0,1" Grid.Column="4">
    567.                                    <ContentPresenter  Margin="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    568.                                </Border>
    569.                                <Border BorderBrush="{StaticResource PropertyGrid_TemplatesBorderBrush}" BorderThickness="0,0,0,1" Grid.Column="1">
    570.                                    <StackPanel Orientation="Horizontal" >
    571.                                        <telerikpropertygrid:PropertyGridIndentPresenter IndentLevel="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IndentLevel}">
    572.                                            <telerikpropertygrid:PropertyGridIndentPresenter.ItemsPanel>
    573.                                                <ItemsPanelTemplate>
    574.                                                    <StackPanel Orientation="Horizontal"/>
    575.                                                </ItemsPanelTemplate>
    576.                                            </telerikpropertygrid:PropertyGridIndentPresenter.ItemsPanel>
    577.                                            <telerikpropertygrid:PropertyGridIndentPresenter.ItemTemplate>
    578.                                                <DataTemplate>
    579.                                                    <telerikpropertygrid:PropertyGridIndentCell />
    580.                                                </DataTemplate>
    581.                                            </telerikpropertygrid:PropertyGridIndentPresenter.ItemTemplate>
    582.                                            <telerikpropertygrid:PropertyGridIndentPresenter.Template>
    583.                                                <ControlTemplate>
    584.                                                    <ItemsPresenter />
    585.                                                </ControlTemplate>
    586.                                            </telerikpropertygrid:PropertyGridIndentPresenter.Template>
    587.                                        </telerikpropertygrid:PropertyGridIndentPresenter>
    588.                                        <telerik:RadToggleButton x:Name="PART_NestedPropertiesButton" Style="{StaticResource PropertyGridNestedToggleButtonStyle}" Background="Transparent"  Width="25" Visibility="{Binding ShouldDisplayNestedProperties, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BooleanToVisibilityConverter}}" IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsExpanded, Mode=TwoWay}"/>
    590.                                        <TextBlock IsHitTestVisible="True" x:Name="PART_FieldLabelN" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="4,2,0,2" Text="{Binding DisplayName}"/>
    591.                                    </StackPanel>
    592.                                </Border>
    594.                                <telerikpropertygrid:PropertyGridColumnResizer  x:Name="ColumnResizer" Grid.Column="1" telerik:StyleManager.Theme="{StaticResource Theme}" Margin="0,0,-4,0"  HorizontalAlignment="Right"/>
    595.                            </Grid>
    596.                            <ItemsControl Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BooleanToVisibilityConverter}, Path=ShouldDisplayNestedItemsControl }" Grid.Row="1"  ItemsSource="{Binding NestedProperties, Converter={StaticResource FlatItemSourceConverter}}">
    597.                                <ItemsControl.ItemTemplate>
    598.                                    <DataTemplate>
    599.                                        <telerikpropertygrid:PropertyGridField  Content ="{Binding}" telerik:StyleManager.Theme="{StaticResource Theme}" Visibility="{Binding Visibility}"/>
    600.                                    </DataTemplate>
    601.                                </ItemsControl.ItemTemplate>
    602.                            </ItemsControl>
    603.                        </Grid>
    604.                    </Border>
    606.                </ControlTemplate>
    607.            </Setter.Value>
    608.        </Setter>
    609.    </Style>
    611.    <Style TargetType="wmsforms:CharacteristicsForm">
    612.        <Setter Property="Background" Value="{StaticResource ControlBackground}" />
    613.        <!--<Setter Property="Foreground" Value="{StaticResource ControlForeground}" />-->
    614.        <Setter Property="BorderBrush" Value="{StaticResource ControlOuterBorder}" />
    615.        <Setter Property="BorderThickness" Value="0" />
    616.        <Setter Property="HorizontalAlignment" Value="Stretch" />
    617.        <Setter Property="VerticalAlignment" Value="Stretch" />
    618.        <Setter Property="IsTabStop" Value="False" />
    620.        <Setter Property="SortAndGroupButtonsVisibility" Value="Collapsed" />
    621.        <Setter Property="AutoGeneratePropertyDefinitions" Value="False" />
    622.        <Setter Property="LabelColumnWidth" Value="100" />
    624.        <Setter Property="EditorTemplateSelector" Value="{StaticResource CharacteristicsEditorTemplateSelector}" />
    625.        <Setter Property="FieldStyle" Value="{StaticResource PropertyGridFieldStyle2}" />
    627.        <Setter Property="Template">
    628.            <Setter.Value>
    629.                <ControlTemplate TargetType="wmsforms:CharacteristicsForm">
    630.                    <Border x:Name="PART_RootElement" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
    631.                        <Grid x:Name="PART_PropertyGridContainer" Background="{TemplateBinding Background}">
    632.                            <Grid.RowDefinitions>
    633.                                <RowDefinition Height="Auto" />
    634.                                <RowDefinition Height="*" />
    635.                                <RowDefinition Height="Auto" />
    636.                            </Grid.RowDefinitions>
    638.                            <Border x:Name="Header" BorderBrush="{StaticResource ControlOuterBorder}" BorderThickness="0 0 0 1" MinHeight="28" Margin="0 0 0 2"
    639.                                    Visibility="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Converter={StaticResource HeaderVisibilityConverter}}">
    640.                                <Border BorderBrush="{StaticResource ControlInnerBorder}" BorderThickness="0">
    641.                                    <Grid Margin="1">
    642.                                        <Grid.ColumnDefinitions>
    643.                                            <ColumnDefinition Width="Auto" />
    644.                                            <ColumnDefinition Width="Auto" />
    645.                                            <ColumnDefinition Width="*" />
    646.                                        </Grid.ColumnDefinitions>
    648.                                        <telerik:RadRadioButton x:Name="groupButton" Width="28" Margin="0 0 3 0"
    649.                                                                IsChecked="{Binding Path=IsGrouped, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
    650.                                                                Visibility="{TemplateBinding SortAndGroupButtonsVisibility}"
    651.                                                                Grid.Column="0" Grid.Row="0">
    652.                                            <ToolTipService.ToolTip>
    653.                                                <ToolTip telerik:LocalizationManager.ResourceKey="Categorize" />
    654.                                            </ToolTipService.ToolTip>
    655.                                            <Path Fill="{StaticResource RadioButton_Indicator}" Stretch="Fill" StrokeThickness="0" Width="17" Height="11"
    656.                                                  Data="M7.0000019,8.9999981 L16.999998,8.9999981 L16.999998,9.9999981 L7.0000019,9.9999981 z M7.0000019,6.9999995 L16.999998,6.9999995 L16.999998,7.9999995 L7.0000019,7.9999995 z M0,6 L3.9999998,8.5 L0,11 z M6.999999,3.0000055 L16.999996,3.0000055 L16.999996,4.0000052 L6.999999,4.0000052 z M7.0000019,0.99999905 L16.999998,0.99999905 L16.999998,1.9999989 L7.0000019,1.9999989 z M0,0 L4,2.5000002 L0,5.0000005 z" />
    657.                                        </telerik:RadRadioButton>
    658.                                        <telerik:RadRadioButton x:Name="sortButton" Content="A-Z" Width="28" Margin="0 0 2 0"
    659.                                                                Visibility="{TemplateBinding SortAndGroupButtonsVisibility}"
    660.                                                                Grid.Column="1" Grid.Row="0">
    661.                                            <ToolTipService.ToolTip>
    662.                                                <ToolTip telerik:LocalizationManager.ResourceKey="Alphabetical" />
    663.                                            </ToolTipService.ToolTip>
    664.                                        </telerik:RadRadioButton>
    666.                                        <TextBox x:Name="searchAsYouTypeTextBox"
    667.                                                 Text="{Binding FilterText, ElementName=PropertyGridPresenter, Mode=TwoWay}"
    668.                                                 Margin="0 0 0 0" HorizontalAlignment="Stretch"
    669.                                                 telerik:TextBoxBehavior.SelectAllOnGotFocus="True"
    670.                                                 telerik:TextBoxBehavior.UpdateTextOnEnter="True" telerik:TextBoxBehavior.UpdateTextOnTextChanged="True"
    671.                                                 Visibility="{TemplateBinding SearchBoxVisibility}"
    672.                                                 Grid.Column="2" Grid.Row="0" />
    674.                                        <Border Background="{TemplateBinding Background}"
    675.                                                Width="22" Margin="0 1 1 1" HorizontalAlignment="Right"
    676.                                                Visibility="{TemplateBinding SearchBoxVisibility}"
    677.                                                Grid.Column="2" Grid.Row="0">
    678.                                            <Path Fill="{StaticResource PropertyGrid_SearchIndicator_Background}"
    679.                                                  Stretch="Fill" StrokeThickness="2" Width="14" Height="14" Margin="4"
    680.                                                  Data="M8.4939966,1.9999999 C6.5610008,1.9999999 4.9939971,3.5670033 4.9939971,5.5 C4.9939971,7.4329967 6.5610008,9 8.4939966,9 C10.426993,9 11.993997,7.4329967 11.993997,5.5 C11.993997,3.5670033 10.426993,1.9999999 8.4939966,1.9999999 z M8.4939976,0 C11.531564,-8.7786177E-08 13.993998,2.4624338 13.993998,5.5 C13.993998,8.5375662 11.531564,11 8.4939976,11 C7.3549109,11 6.2967014,10.65372 5.4188957,10.060686 L5.3678761,10.025319 L1.4142134,13.978982 L0,12.564768 L3.9563832,8.6083851 L3.9333115,8.5751028 C3.3402777,7.6972966 2.9939978,6.6390872 2.9939978,5.5 C2.9939978,2.4624338 5.4564314,-8.7786177E-08 8.4939976,0 z" />
    681.                                        </Border>
    682.                                    </Grid>
    683.                                </Border>
    684.                            </Border>
    686.                            <telerikpropertygrid:PropertyGridPresenter x:Name="PropertyGridPresenter" Margin="0 -1 0 0"
    687.                                                                       ContentTemplate="{Binding Path=PropertyGridLayoutState, RelativeSource={RelativeSource Self}, Converter={StaticResource ItemTemplateConverter}}"
    688.                                                                       PropertyDefinitions="{Binding PropertyDefinitions, RelativeSource={RelativeSource TemplatedParent}}"
    689.                                                                       LabelColumnWidth="{Binding LabelColumnWidth, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
    690.                                                                       SearchInNestedProperties="{Binding SearchInNestedProperties, RelativeSource={RelativeSource TemplatedParent}}"
    691.                                                                       RenderMode="{TemplateBinding RenderMode}" IsGrouped="{TemplateBinding IsGrouped}"
    692.                                                                       Grid.Column="0" Grid.Row="1" />
    694.                            <Border x:Name="PART_DescriptionPanel" BorderBrush="{StaticResource ControlOuterBorder}" BorderThickness="0 1 0 0"
    695.                                    MinHeight="75" Visibility="{TemplateBinding DescriptionPanelVisibility}"
    696.                                    Grid.Column="0" Grid.Row="2">
    697.                                <Border Background="{StaticResource PropertyGrid_DescriptionBackground}"
    698.                                        BorderBrush="{StaticResource ControlInnerBorder}" BorderThickness="0 1 0 0">
    699.                                    <StackPanel Orientation="Vertical">
    700.                                        <TextBlock x:Name="PART_DescriptionLabelTextBlock" FontWeight="Bold" Margin="5"
    701.                                                   Text="{Binding SelectedPropertyDefinition.DisplayName, ElementName=PropertyGridPresenter}" />
    702.                                        <TextBlock x:Name="PART_DescriptionContentTextBlock" TextWrapping="Wrap" Margin="5 0 5 5"
    703.                                                   Text="{Binding SelectedPropertyDefinition.Description, ElementName=PropertyGridPresenter}" />
    704.                                    </StackPanel>
    705.                                </Border>
    706.                            </Border>
    707.                        </Grid>
    708.                    </Border>
    709.                </ControlTemplate>
    710.            </Setter.Value>
    711.        </Setter>
    712.    </Style>

    Kind regards,
  8. Yoan
    Yoan avatar
    1051 posts

    Posted 24 Apr 2014 Link to this post

    Hi Beijerinc,

    Can you try the mentioned approach from my previous reply - using our  Implicit Styles you can try to extract the template of PropertyGridField. Please give it a try and let me know about the result. It would be great if you can send me a small sample with dummy data in order to investigate the issue.

    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
  9. Hans
    Hans avatar
    15 posts
    Member since:
    Jan 2011

    Posted 25 Apr 2014 in reply to Yoan Link to this post

    Hello Yoan,

    Unfortunately we are using multiple instances of the RadPropertyGrid, each with its own style. Therefore I cannot use implicit styles as it would also be applied to the other RadPropertyGrid.

    The style I posted in my previous reply comes directly from the XAMLs located in the Telerik assemblies (using a decompiler). We have done this a 100 times over for all kinds of different controls that we wanted to style. That is why I suspect this option has been overlooked for this control.

    Could you provide an example of an explicitly styled PropertyGridField?

    Kind regards,
  10. Vanya Pavlova
    Vanya Pavlova avatar
    2019 posts

    Posted 29 Apr 2014 Link to this post

    Hi Beijerinc,

    We spent some time to test the snippet you provided and isolate the problem you reported.
    As it turns out, you have an inherited RadPropertyGrid element and you assign custom FieldStyle, which is pointing to a specific style targeted at PropertyGridField. Probably something went wrong with the styles you have defined. 

    By that reason we created a brand new project with inherited property grid, that uses the default templates of RadPropertyGrid. We set the FieldStyle attribute in the same way, as you did. 

    Would it be possible to take a look at the attached demo and let us know how it works by your side? 

    If the project works correctly, I may recommend you to add these styles to your project and manipulate it in the way you need.

    *As a side note, I strongly recommend you to use pure NoXAML binaries, combined with implicit styles. 

    I look forward to hearing from you. 

    Vanya Pavlova
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
  11. Hans
    Hans avatar
    15 posts
    Member since:
    Jan 2011

    Posted 01 May 2014 in reply to Vanya Pavlova Link to this post

    Hello Vanya,

    I have tried the project you provided. I added a Border with a background to the very bottom of the PropertyGridFieldStyle, started the project and discovered that it was working.

    However, when I looked more closely in an attempt to discover the error I had made earlier, I found this:
    <Style TargetType="wmsforms:CharacteristicsForm" BasedOn="{StaticResource CharacteristicsFormStyle}"/>
    <!--<Style TargetType="propertyGrid:PropertyGridField" BasedOn="{StaticResource PropertyGridFieldStyle}"/>-->
    <Style TargetType="propertyGrid:PropertyGridIndentCell" BasedOn="{StaticResource PropertyGridIndentCellStyle}"/>

    Please note the commented style (Telerik.Windows.Controls.Data.xaml line 2061). It is an implicit style for the PropertyGridField. The reason my Border had an effect was because the PropertyGridFieldStyle was not only applied to the FieldStyle property, but also applied as an implicit style. Once I commented this implicit style out, the PropertyGrid stopped showing it's fields, regardless of my added border.

    I hope you can fix this in a future version of the control, as it is sorely needed. I want to thank you for the effort you put into this issue, Vanya. I greatly appreciate your help looking into this matter.

    Kind regards,
  12. Vera
    Vera avatar
    263 posts

    Posted 02 May 2014 Link to this post

    Hi Hans,

    Thank you for the details. We will investigate the case.

    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
  13. Vanya Pavlova
    Vanya Pavlova avatar
    2019 posts

    Posted 07 May 2014 Link to this post

    Hi Hans,

    If you isolate this additional Border element in a separate explicit style (the one with x:Key defined) it will be applied only to all RadPropertyGrid controls, where the FieldStyle attribute is pointing to this resource. 
    As the name implies, this explicit style always takes precedence over the implicit one.    

    Would it be possible to update the project with the problem you have and send it back to us as an attachment in a new thread? 

    Vanya Pavlova
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
  14. Hans
    Hans avatar
    15 posts
    Member since:
    Jan 2011

    Posted 16 May 2014 in reply to Vanya Pavlova Link to this post

    Hello Vanya,

    It is not my intention to be rude, but my previous post contained a file name and line number to the only line that causes the problem. Comment this line out and the RadPropertyGrid will not draw it's fields at all.

    The line references an implicity style for the PropertyGridField class. The project also contains an explicit style for this class that is assigned to the FieldStyle property of the RadPropertyGrid. The project should be able to run without this implicit style because the FieldStyle property is being set, but when the RadPropertyGrid is displayed it contains no fields (probably because it is drawing them with an non-existing style).

    You don't have to add a border to the PropertyGridField style, simply comment out line 2061 of Telerik.Windows.Controls.Data.xaml and you will see that the RadPropertyGrid is unusable.

    Kind regards,
  15. Vanya Pavlova
    Vanya Pavlova avatar
    2019 posts

    Posted 21 May 2014 Link to this post

    Hello Hans,

    Thank you for getting back to us. As it turns out, it seems that there is some kind of misunderstanding, sorry for that. The line you are pointing to is the default implicit style, which is used to style all PropertyGridFields at once. If we comment out this line the grid will become unusable indeed, because the fields would not be styled at all. They rely on implicit styles to achieve desired look and feel.
    I checked once again all themes and we do not have commented this style in any theme. 

    Can you point us to the decompiler results that you were referring to?
    Your custom explicit styles should be outside of Telerik.Windows.Controls.Data.xaml if you need to alter the appearance of  specific fields for specific property grid components.
    Copy your custom style and set it only to those fields or property grids you need. 

    I believe that something went wrong in your project and I will be glad to be of help on that matter. 

    Vanya Pavlova
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
  16. Hans
    Hans avatar
    15 posts
    Member since:
    Jan 2011

    Posted 26 May 2014 in reply to Vanya Pavlova Link to this post

    Hello Vanya,

    In the project that was included on this thread, the Telerik.Windows.Controls.Data.xaml file is a resource dictionary that defines styles for some of the controls used in the project. It styles the CharacteristicsForm class, included with the project, which is a derived RadPropertyGrid with its own style key. The purpose of the project is to apply a different style to one of the PropertyGridField controls used in the CharacteristicsForm (being a RadPropertyGrid).

    The Telerik.Windows.Controls.Data.xaml file contains only a single style for the PropertyGridField, named "PropertyGridFieldStyle" (line 2045). This style is applied explicitly on line 2059, as such:
    <Style x:Key="CharacteristicsFormStyle" TargetType="wmsforms:CharacteristicsForm">
        <Setter Property="Template" Value="{StaticResource RadPropertyGridTemplate}"/>
        <Setter Property="Background" Value="{StaticResource ControlBackground}"/>
        <Setter Property="BorderBrush" Value="{StaticResource ControlOuterBorder}"/>
        <Setter Property="Foreground" Value="{StaticResource ControlForeground}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="FieldStyle" Value="{StaticResource PropertyGridFieldStyle}"/>

    The style is also applied implicitly on line 2062, as such:
    <Style TargetType="propertyGrid:PropertyGridField" BasedOn="{StaticResource PropertyGridFieldStyle}"/>

    As you have seen, if the implicit style is commented out, the CharacteristicsForm breaks. However, if there is an explicit style available (as is the case here), Silverlight will use that instead of any implicit styles. Therefore, commenting out any implicit styles should have no effect at all.

    Since it clearly does, we can safely deduce that the explicit style, provided by the FieldStyle property, is not applied to the fields of the CharacteristicsForm.

    I would like to add that all styles in the example project are Telerik's default styles, save for the RadPropertyGrid's style being applied to TargetType CharacteristicsForm, as that is the point the example project is trying to make.

    If it is still not clear what I mean, I would be happy to schedule a call with you Vanya, so that we can discuss the problem further and hopefully conclude the issue.

    Kind regards,
  17. Yana
    Yana avatar
    4547 posts

    Posted 29 May 2014 Link to this post

    Hello Beijerinc,

    Thank you for sending this detailed explanation - indeed commenting the implicit style affects the PropertyGrid fields even if there is explicit style set to them, this is quite strange and we will definitely investigate it further.

    However,  please note that the Style set to FieldStyle property is still applied, you could easily test it by creating a custom PropertyGridFieldStyle and change, for example, the Background property:

    <Style x:Key="CustomPropertyGridFieldStyle" TargetType="propertyGrid:PropertyGridField">
      <Setter Property="Template" Value="{StaticResource PropertyGridFieldTemplate}"/>
      <Setter Property="BorderBrush" Value="{StaticResource ControlOuterBorder}"/>
      <Setter Property="IsTabStop" Value="False"/>
      <Setter Property="Background" Value="Red"/>
      <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
      <Setter Property="VerticalContentAlignment" Value="Center"/>

    Then setting the newly created CustomPropertyGridFieldStyle to the FieldStyle;

    <Style x:Key="CharacteristicsFormStyle" TargetType="wmsforms:CharacteristicsForm">
        <Setter Property="FieldStyle" Value="{StaticResource CustomPropertyGridFieldStyle}"/>

    will lead to having fields with red background. Indeed, the implicit style for PropertyGridField is still needed, so please leave it for now.

    I hope you will find this helpful. If you have any additional questions or concerns, write to us again.

    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
  18. Hans
    Hans avatar
    15 posts
    Member since:
    Jan 2011

    Posted 30 May 2014 in reply to Yana Link to this post

    Hello Yana,

    I have tried your suggestion and the red background is indeed applied.

    I was surprised by this (considering the weird behavior of the styles) and decided to check if changes to the ControlTemplate were also applied if a default implicit style was present. I copied the ControlTemplate and gave it a unique key, then applied it to a copy of the PropertyGridField style and removed the key of this style (to make it implicit). This somehow makes the PropertyGridFields disappear again.

    To be sure I had made no mistakes, I did this again in a newly unzipped version of the example project, and the same thing happens. I made sure to comment out the implicit style already present to prevent conflicts. I also noticed a "find ancestor"-binding to the derived CharacteristicsForm type (while a binding to the RadPropertyGrid base class would have done fine), so I changed that as well, but to no effect. This strange behavior also occurs when I copy the entire ControlTemplate into the Style as a setter for the Template property.

    I hope you will take this into consideration during your investigation, as I believe it may be linked to the Style behavior. Thank you for your help so far, I look forward to hearing from you.

    Kind regards,
  19. Vanya Pavlova
    Vanya Pavlova avatar
    2019 posts

    Posted 03 Jun 2014 Link to this post

    Hello Hans,

    Thank you for the detailed description.
    We will definitely discuss your problem with the developers on our next regular meeting.
    For the time being I may suggest you to use the workaround proposed by my colleague, Yana.  

    Please excuse us for any inconvenience caused. 

    Vanya Pavlova
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
  20. Hans
    Hans avatar
    15 posts
    Member since:
    Jan 2011

    Posted 10 Jun 2014 in reply to Vanya Pavlova Link to this post

    Hello Vanya,

    Unfortunately the workaround is insufficient for us, as we have the need to change the ControlTemplate, which is the only thing this workaround will not let us do.

    We will wait for the results of your internal investigation.

    Kind regards,
  21. Vanya Pavlova
    Vanya Pavlova avatar
    2019 posts

    Posted 10 Jun 2014 Link to this post

    Hello Hans,

    Thank you for getting back to us. As it turns out, you hit a problem, which could be replicated only in Silverlight, even if you do not use inherited RadPropertyGrid component. 
    I've already logged this bug on our Ideas and Feedback portal, and you may track its progress here. 

    We will do our best to provide a fix for this issue for one of our next internal builds. 

    I'm also updating your Telerik points correctly. 

    Vanya Pavlova
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
  22. John Harrison
    John Harrison avatar
    23 posts
    Member since:
    May 2010

    Posted 30 Oct 2014 in reply to Vanya Pavlova Link to this post


    I'm not sure if this is a related issue, but on selecting an item in the property grid, the background goes a very light colour.

    As a result telerik labels in our user control be come unreadable (see attached picture).

    Is there a way to make a style that will automatically change the labels to black when the property is selected?

  23. Vanya Pavlova
    Vanya Pavlova avatar
    2019 posts

    Posted 31 Oct 2014 Link to this post

    Hi Hans,

    Can you post the control template, referred below?:

    <Style x:Key="CustomPropertyGridFieldStyle" TargetType="propertyGrid:PropertyGridField">
      <Setter Property="Template" Value="{StaticResource PropertyGridFieldTemplate}"/>
      <Setter Property="BorderBrush" Value="{StaticResource ControlOuterBorder}"/>
      <Setter Property="IsTabStop" Value="False"/>
      <Setter Property="Background" Value="Red"/>
      <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
      <Setter Property="VerticalContentAlignment" Value="Center"/>

    Is it a custom one or the default one?
    As a rule of thumb, the default Foreground for this theme is set to a lighter color.
    Then when you select it, it will enter the selected state of PropertyGridField, the selected foreground will turn to black. 

    Vanya Pavlova

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

  24. John Harrison
    John Harrison avatar
    23 posts
    Member since:
    May 2010

    Posted 31 Oct 2014 in reply to Vanya Pavlova Link to this post


    I'm not entirely clear on what you are asking, but for the editing template of the property we are using a custom control.

    This is selected by implementing our own selector derived off DataTemplateSelector.

    We are not touching any of the styling to do with the properties grid.

    The issue seems our editing control uses labels which stay the same colour regardless of the property grids container style.

    Basically is there a way to make our control "aware" that it is selected and make all labels change their colour?

    Kind Regards
  25. Vanya Pavlova
    Vanya Pavlova avatar
    2019 posts

    Posted 31 Oct 2014 Link to this post

    Hello Hans,

    If you want to force SelectedState of PropertyGridField, you may call VisualStateManager.GoToState() for this element.

    However your custom control is not aware of the fact that property grid field enters selected state. 

    I would suggest you to use a small trick here using Binding to IsSelected property of the field:

          <telerik:BooleanToVisibilityConverter x:Key="booleanToVisibilityConverter"/>
    <DataTemplate x:Key="dt">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="SomeText" Margin="0,0,2,0" VerticalAlignment="Center"/>
                <TextBlock Text="SomeText" Visibility="{Binding IsSelected,RelativeSource={RelativeSource AncestorType=telerik:PropertyGridField},Converter={StaticResource booleanToVisibilityConverter}}" Foreground="Black" VerticalAlignment="Center"/>
                <TextBox Text="{Binding Height, Mode=TwoWay}" telerik:StyleManager.Theme="Expression_Dark"/>

    Can you please give it a try and let me know how it corresponds to your needs?

    Vanya Pavlova

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top
DevCraft R3 2016 release webinar banner