Issue with creating ControlTemplate for PropertyGrid

[Devlin]

I'm having issues implementing a ControlTemplate for the RadPropertyGrid. When I create a ControlTemplate in Blend by editing a copy and subsequently add it to the resources of my view, the PropertyGridPresenter region of the control area no longer displays the bound property definitions, though the other visual regions remain intact. This occurs with AutoGeneratePropertyDefinitions in both "False" and "True" states. The generated template is below, am I missing something crucial?


        <ControlTemplate x:Key="RadPropertyGridControlTemplate" TargetType="{x:Type telerik:RadPropertyGrid}">
            <Border x:Name="PART_RootElement" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                <Grid x:Name="PART_PropertyGridContainer" Background="{TemplateBinding Background}">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Border x:Name="Header" BorderBrush="#FF848484" BorderThickness="0,0,0,1" Margin="0,0,0,-1">
                        <Border BorderBrush="White" BorderThickness="1">
                            <Border.Background>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="White" Offset="0"/>
                                    <GradientStop Color="#FFCDCDCD" Offset="1"/>
                                    <GradientStop Color="#FFCECECE" Offset="0.42"/>
                                    <GradientStop Color="#FFAFAFAF" Offset="0.43"/>
                                </LinearGradientBrush>
                            </Border.Background>
                            <Grid Margin="1">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <telerik:RadRadioButton x:Name="groupButton" Margin="0,0,3,0" Visibility="{TemplateBinding SortAndGroupButtonsVisibility}" Width="28">
                                    <telerik:StyleManager.Theme>
                                        <telerik:Office_BlackTheme/>
                                    </telerik:StyleManager.Theme>
                                    <telerik:RadRadioButton.ToolTip>
                                        <ToolTip Content="Categorize" telerik:LocalizationManager.ResourceKey="Categorize">
                                            <telerik:StyleManager.Theme>
                                                <telerik:Office_BlackTheme/>
                                            </telerik:StyleManager.Theme>
                                        </ToolTip>
                                    </telerik:RadRadioButton.ToolTip>
                                    <Path Data="M7.0000019,8.9999981L16.999998,8.9999981 16.999998,9.9999981 7.0000019,9.9999981z M7.0000019,6.9999995L16.999998,6.9999995 16.999998,7.9999995 7.0000019,7.9999995z M0,6L3.9999998,8.5 0,11z M6.999999,3.0000055L16.999996,3.0000055 16.999996,4.0000052 6.999999,4.0000052z M7.0000019,0.99999905L16.999998,0.99999905 16.999998,1.9999989 7.0000019,1.9999989z M0,0L4,2.5000002 0,5.0000005z" Fill="Black" Height="11" Stretch="Fill" SnapsToDevicePixels="True" StrokeThickness="0" Width="17"/>
                                </telerik:RadRadioButton>
                                <telerik:RadRadioButton x:Name="sortButton" Content="A-Z" Grid.Column="1" IsChecked="True" Visibility="{TemplateBinding SortAndGroupButtonsVisibility}" Width="28">
                                    <telerik:StyleManager.Theme>
                                        <telerik:Office_BlackTheme/>
                                    </telerik:StyleManager.Theme>
                                    <telerik:RadRadioButton.ToolTip>
                                        <ToolTip Content="Alphabetical" telerik:LocalizationManager.ResourceKey="Alphabetical">
                                            <telerik:StyleManager.Theme>
                                                <telerik:Office_BlackTheme/>
                                            </telerik:StyleManager.Theme>
                                        </ToolTip>
                                    </telerik:RadRadioButton.ToolTip>
                                </telerik:RadRadioButton>
                                <TextBox x:Name="searchAsYouTypeTextBox" Grid.Column="2" HorizontalAlignment="Stretch" Margin="2,0,0,0" telerik:TextBoxBehavior.SelectAllOnGotFocus="True" Text="{Binding FilterText, ElementName=PropertyGridPresenter, Mode=TwoWay}" telerik:TextBoxBehavior.UpdateTextOnEnter="True" telerik:TextBoxBehavior.UpdateTextOnTextChanged="True" Visibility="{TemplateBinding SearchBoxVisibility}">
                                    <telerik:StyleManager.Theme>
                                        <telerik:Office_BlackTheme/>
                                    </telerik:StyleManager.Theme>
                                </TextBox>
                                <Path Grid.Column="2" Data="M8.4939966,1.9999999C6.5610008,1.9999999 4.9939971,3.5670033 4.9939971,5.5 4.9939971,7.4329967 6.5610008,9 8.4939966,9 10.426993,9 11.993997,7.4329967 11.993997,5.5 11.993997,3.5670033 10.426993,1.9999999 8.4939966,1.9999999z M8.4939976,0C11.531564,-8.7786177E-08 13.993998,2.4624338 13.993998,5.5 13.993998,8.5375662 11.531564,11 8.4939976,11 7.3549109,11 6.2967014,10.65372 5.4188957,10.060686L5.3678761,10.025319 1.4142134,13.978982 0,12.564768 3.9563832,8.6083851 3.9333115,8.5751028C3.3402777,7.6972966 2.9939978,6.6390872 2.9939978,5.5 2.9939978,2.4624338 5.4564314,-8.7786177E-08 8.4939976,0z" Fill="#FF919191" HorizontalAlignment="Right" Height="14" Margin="4" Stretch="Fill" SnapsToDevicePixels="True" StrokeThickness="2" Visibility="{TemplateBinding SearchBoxVisibility}" Width="14"/>
                            </Grid>
                        </Border>
                    </Border>
                    <Border BorderBrush="#FF848484" BorderThickness="0,1" Grid.Row="1">
                        <ScrollViewer x:Name="PART_ItemsScrollViewer" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
                            <telerik:StyleManager.Theme>
                                <telerik:Office_BlackTheme/>
                            </telerik:StyleManager.Theme>
                            <telerik:PropertyGridPresenter x:Name="PropertyGridPresenter" LabelColumnWidth="{Binding LabelColumnWidth, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" PropertyDefinitions="{Binding PropertyDefinitions, RelativeSource={RelativeSource TemplatedParent}}">
                                <telerik:PropertyGridPresenter.ContentTemplate>
                                    <Binding ElementName="groupButton" Path="IsChecked">
                                        <Binding.Converter>
                                            <telerik:ItemTemplateConverter>
                                                <telerik:ItemTemplateConverter.FlatTemplate>
                                                    <DataTemplate>
                                                        <ItemsControl>
                                                            <ItemsControl.ItemTemplate>
                                                                <DataTemplate>
                                                                    <telerik:PropertyGridField Content="{Binding}">
                                                                        <telerik:PropertyGridField.Resources>
                                                                            <Style x:Key="RadComboBox" TargetType="{x:Type telerik:RadComboBox}">
                                                                                <Setter Property="ItemContainerStyle">
                                                                                    <Setter.Value>
                                                                                        <Style TargetType="{x:Type telerik:RadComboBoxItem}">
                                                                                            <Setter Property="telerik:StyleManager.Theme">
                                                                                                <Setter.Value>
                                                                                                    <telerik:Office_BlackTheme/>
                                                                                                </Setter.Value>
                                                                                            </Setter>
                                                                                        </Style>
                                                                                    </Setter.Value>
                                                                                </Setter>
                                                                                <Setter Property="IsEditable" Value="True"/>
                                                                                <Setter Property="telerik:StyleManager.Theme">
                                                                                    <Setter.Value>
                                                                                        <telerik:Office_BlackTheme/>
                                                                                    </Setter.Value>
                                                                                </Setter>
                                                                            </Style>
                                                                            <Style x:Key="TextBox" TargetType="{x:Type TextBox}">
                                                                                <Setter Property="Padding" Value="3,2,0,2"/>
                                                                                <Setter Property="Background" Value="Transparent"/>
                                                                                <Setter Property="BorderBrush" Value="Transparent"/>
                                                                                <Setter Property="telerik:StyleManager.Theme">
                                                                                    <Setter.Value>
                                                                                        <telerik:Office_BlackTheme/>
                                                                                    </Setter.Value>
                                                                                </Setter>
                                                                            </Style>
                                                                            <Style x:Key="CheckBox" TargetType="{x:Type CheckBox}">
                                                                                <Setter Property="Margin" Value="3,2,0,2"/>
                                                                                <Setter Property="telerik:StyleManager.Theme">
                                                                                    <Setter.Value>
                                                                                        <telerik:Office_BlackTheme/>
                                                                                    </Setter.Value>
                                                                                </Setter>
                                                                            </Style>
                                                                        </telerik:PropertyGridField.Resources>
                                                                        <telerik:StyleManager.Theme>
                                                                            <telerik:Office_BlackTheme/>
                                                                        </telerik:StyleManager.Theme>
                                                                    </telerik:PropertyGridField>
                                                                </DataTemplate>
                                                            </ItemsControl.ItemTemplate>
                                                            <ItemsControl.Style>
                                                                <Style TargetType="{x:Type ItemsControl}">
                                                                    <Setter Property="BorderBrush" Value="#FF848484"/>
                                                                    <Setter Property="BorderThickness" Value="0,0,0,1"/>
                                                                    <Setter Property="Template">
                                                                        <Setter.Value>
                                                                            <ControlTemplate TargetType="{x:Type ItemsControl}">
                                                                                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" VerticalAlignment="Top">
                                                                                    <ItemsPresenter/>
                                                                                </Border>
                                                                            </ControlTemplate>
                                                                        </Setter.Value>
                                                                    </Setter>
                                                                </Style>
                                                            </ItemsControl.Style>
                                                        </ItemsControl>
                                                    </DataTemplate>
                                                </telerik:ItemTemplateConverter.FlatTemplate>
                                                <telerik:ItemTemplateConverter.GroupTemplate>
                                                    <DataTemplate>
                                                        <ItemsControl>
                                                            <ItemsControl.ItemTemplate>
                                                                <DataTemplate>
                                                                    <Border BorderBrush="#FF848484" BorderThickness="0,1,0,0" Margin="0,-1,0,0">
                                                                        <Grid>
                                                                            <Grid.RowDefinitions>
                                                                                <RowDefinition Height="Auto"/>
                                                                                <RowDefinition Height="*"/>
                                                                            </Grid.RowDefinitions>
                                                                            <telerik:RadToggleButton x:Name="expandCollapseButton" BorderBrush="{x:Null}" Content="{Binding Key}" IsChecked="True">
                                                                                <telerik:RadToggleButton.Style>
                                                                                    <Style TargetType="{x:Type telerik:RadToggleButton}">
                                                                                        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                                                                                        <Setter Property="HorizontalContentAlignment" Value="Left"/>
                                                                                        <Setter Property="Height" Value="25"/>
                                                                                        <Setter Property="FontWeight" Value="Bold"/>
                                                                                        <Setter Property="Foreground" Value="Black"/>
                                                                                        <Setter Property="SnapsToDevicePixels" Value="True"/>
                                                                                        <Setter Property="BorderBrush" Value="#FF848484"/>
                                                                                        <Setter Property="Template">
                                                                                            <Setter.Value>
                                                                                                <ControlTemplate TargetType="{x:Type telerik:RadToggleButton}">
                                                                                                    <Grid>
                                                                                                        <Grid.ColumnDefinitions>
                                                                                                            <ColumnDefinition Width="Auto"/>
                                                                                                            <ColumnDefinition Width="*"/>
                                                                                                        </Grid.ColumnDefinitions>
                                                                                                        <Border x:Name="IconOuterBorder" BorderBrush="#FF848484" BorderThickness="0,0,0,1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="25">
                                                                                                            <Border x:Name="IconInnerBorder" BorderBrush="White" BorderThickness="1,1,0,1" Background="#FFE4E4E4">
                                                                                                                <Path x:Name="ExpanderButton" 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" Fill="Black" HorizontalAlignment="Center" Height="5" RenderTransformOrigin="0.5,0.5" SnapsToDevicePixels="True" VerticalAlignment="Center" Width="7">
                                                                                                                    <Path.RenderTransform>
                                                                                                                        <RotateTransform/>
                                                                                                                    </Path.RenderTransform>
                                                                                                                </Path>
                                                                                                            </Border>
                                                                                                        </Border>
                                                                                                        <Border BorderBrush="#FF848484" BorderThickness="0,0,0,1" Grid.ColumnSpan="2" Grid.Column="1">
                                                                                                            <Border BorderBrush="White" BorderThickness="0,1,1,1" Background="#FFE4E4E4">
                                                                                                                <ContentPresenter x:Name="PART_ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                                                                                            </Border>
                                                                                                        </Border>
                                                                                                    </Grid>
                                                                                                    <ControlTemplate.Triggers>
                                                                                                        <Trigger Property="IsChecked" Value="True">
                                                                                                            <Trigger.EnterActions>
                                                                                                                <BeginStoryboard>
                                                                                                                    <Storyboard>
                                                                                                                        <DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" Storyboard.TargetName="ExpanderButton">
                                                                                                                            <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="180"/>
                                                                                                                        </DoubleAnimationUsingKeyFrames>
                                                                                                                    </Storyboard>
                                                                                                                </BeginStoryboard>
                                                                                                            </Trigger.EnterActions>
                                                                                                            <Trigger.ExitActions>
                                                                                                                <BeginStoryboard>
                                                                                                                    <Storyboard>
                                                                                                                        <DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" Storyboard.TargetName="ExpanderButton">
                                                                                                                            <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
                                                                                                                        </DoubleAnimationUsingKeyFrames>
                                                                                                                    </Storyboard>
                                                                                                                </BeginStoryboard>
                                                                                                            </Trigger.ExitActions>
                                                                                                            <Setter Property="BorderThickness" TargetName="IconOuterBorder" Value="0"/>
                                                                                                            <Setter Property="BorderThickness" TargetName="IconInnerBorder" Value="1,1,0,0"/>
                                                                                                        </Trigger>
                                                                                                    </ControlTemplate.Triggers>
                                                                                                </ControlTemplate>
                                                                                            </Setter.Value>
                                                                                        </Setter>
                                                                                    </Style>
                                                                                </telerik:RadToggleButton.Style>
                                                                            </telerik:RadToggleButton>
                                                                            <ContentPresenter x:Name="PART_ContentPresenter" Content="{Binding Items}" Grid.Row="1">
                                                                                <ContentPresenter.ContentTemplate>
                                                                                    <DataTemplate>
                                                                                        <ItemsControl>
                                                                                            <ItemsControl.ItemTemplate>
                                                                                                <DataTemplate>
                                                                                                    <telerik:PropertyGridField Content="{Binding}">
                                                                                                        <telerik:PropertyGridField.Resources>
                                                                                                            <Style x:Key="RadComboBox" TargetType="{x:Type telerik:RadComboBox}">
                                                                                                                <Setter Property="ItemContainerStyle">
                                                                                                                    <Setter.Value>
                                                                                                                        <Style TargetType="{x:Type telerik:RadComboBoxItem}">
                                                                                                                            <Setter Property="telerik:StyleManager.Theme">
                                                                                                                                <Setter.Value>
                                                                                                                                    <telerik:Office_BlackTheme/>
                                                                                                                                </Setter.Value>
                                                                                                                            </Setter>
                                                                                                                        </Style>
                                                                                                                    </Setter.Value>
                                                                                                                </Setter>
                                                                                                                <Setter Property="IsEditable" Value="True"/>
                                                                                                                <Setter Property="telerik:StyleManager.Theme">
                                                                                                                    <Setter.Value>
                                                                                                                        <telerik:Office_BlackTheme/>
                                                                                                                    </Setter.Value>
                                                                                                                </Setter>
                                                                                                            </Style>
                                                                                                            <Style x:Key="TextBox" TargetType="{x:Type TextBox}">
                                                                                                                <Setter Property="Padding" Value="3,2,0,2"/>
                                                                                                                <Setter Property="Background" Value="Transparent"/>
                                                                                                                <Setter Property="BorderBrush" Value="Transparent"/>
                                                                                                                <Setter Property="telerik:StyleManager.Theme">
                                                                                                                    <Setter.Value>
                                                                                                                        <telerik:Office_BlackTheme/>
                                                                                                                    </Setter.Value>
                                                                                                                </Setter>
                                                                                                            </Style>
                                                                                                            <Style x:Key="CheckBox" TargetType="{x:Type CheckBox}">
                                                                                                                <Setter Property="Margin" Value="3,2,0,2"/>
                                                                                                                <Setter Property="telerik:StyleManager.Theme">
                                                                                                                    <Setter.Value>
                                                                                                                        <telerik:Office_BlackTheme/>
                                                                                                                    </Setter.Value>
                                                                                                                </Setter>
                                                                                                            </Style>
                                                                                                        </telerik:PropertyGridField.Resources>
                                                                                                        <telerik:StyleManager.Theme>
                                                                                                            <telerik:Office_BlackTheme/>
                                                                                                        </telerik:StyleManager.Theme>
                                                                                                    </telerik:PropertyGridField>
                                                                                                </DataTemplate>
                                                                                            </ItemsControl.ItemTemplate>
                                                                                            <ItemsControl.Style>
                                                                                                <Style TargetType="{x:Type ItemsControl}">
                                                                                                    <Setter Property="BorderBrush" Value="#FF848484"/>
                                                                                                    <Setter Property="BorderThickness" Value="0,0,0,1"/>
                                                                                                    <Setter Property="Template">
                                                                                                        <Setter.Value>
                                                                                                            <ControlTemplate TargetType="{x:Type ItemsControl}">
                                                                                                                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" VerticalAlignment="Top">
                                                                                                                    <ItemsPresenter/>
                                                                                                                </Border>
                                                                                                            </ControlTemplate>
                                                                                                        </Setter.Value>
                                                                                                    </Setter>
                                                                                                </Style>
                                                                                            </ItemsControl.Style>
                                                                                        </ItemsControl>
                                                                                    </DataTemplate>
                                                                                </ContentPresenter.ContentTemplate>
                                                                                <ContentPresenter.Visibility>
                                                                                    <Binding ElementName="expandCollapseButton" Path="IsChecked">
                                                                                        <Binding.Converter>
                                                                                            <telerik:BooleanToVisibilityConverter/>
                                                                                        </Binding.Converter>
                                                                                    </Binding>
                                                                                </ContentPresenter.Visibility>
                                                                            </ContentPresenter>
                                                                        </Grid>
                                                                    </Border>
                                                                </DataTemplate>
                                                            </ItemsControl.ItemTemplate>
                                                        </ItemsControl>
                                                    </DataTemplate>
                                                </telerik:ItemTemplateConverter.GroupTemplate>
                                            </telerik:ItemTemplateConverter>
                                        </Binding.Converter>
                                    </Binding>
                                </telerik:PropertyGridPresenter.ContentTemplate>
                                <telerik:StyleManager.Theme>
                                    <telerik:Office_BlackTheme/>
                                </telerik:StyleManager.Theme>
                            </telerik:PropertyGridPresenter>
                        </ScrollViewer>
                    </Border>
                    <Border x:Name="PART_DescriptionPanel" BorderBrush="White" BorderThickness="0,1,0,0" Background="#FFBFBFBF" MinHeight="75" Grid.Row="2" Visibility="{TemplateBinding DescriptionPanelVisibility}">
                        <StackPanel Orientation="Vertical">
                            <TextBlock FontWeight="Bold" Margin="5" Text="{Binding SelectedPropertyDefinition.DisplayName, ElementName=PropertyGridPresenter}"/>
                            <TextBlock Margin="5" TextWrapping="Wrap" Text="{Binding SelectedPropertyDefinition.Description, ElementName=PropertyGridPresenter}"/>
                        </StackPanel>
                    </Border>
                </Grid>
            </Border>
        </ControlTemplate>

[Ivan Ivanov]

Hello Devlin,

I have extracted RadPropertyGrid's templates and resources for you. Please, refer to the attached project.

Kind regards,
Ivan Ivanov
the Telerik team

[Devlin]

Great, thanks!

[Bill]

Hi!

Can we edit the property grid template? I am having the same issue with the latest version (q2 sp2 912)

When i go into blend, select the propertygrid, edit a copy of the radpropertygrid template, the property grid definitions dissappear. Even though I did not make any changes to the template itself. just "edit a copy"...

Is this by design? Should i still use the attached project from the previous post?

Thanks for all your help!

Bill

[Ivan Ivanov]

Hello,

We have managed to reproduce this issue. It appears that Blend clears an ItemsControl ItemsSource binding. You can workaround this easily by setting ItemsSource={Binding} on FlatTemplate's  ItemsControl. We will need some more time to fix this, so for now, please stick to this approach. I will keep you notified of any updates.

Kind regards,
Ivan Ivanov
the Telerik team

[rick]

Hi Ivan,

I cannot resolve this problem with the solution of your last post. Would you kindly help to take a look at my code?

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">

    <Style x:Name="abc"  TargetType="{x:Type telerik:RadPropertyGrid}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type telerik:RadPropertyGrid}">
                    <Border x:Name="PART_RootElement" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                        <Grid x:Name="PART_PropertyGridContainer" Background="{TemplateBinding Background}">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <Border x:Name="Header" BorderBrush="#FF848484" BorderThickness="0,0,0,1" Margin="0,0,0,2" MinHeight="28">
                                <Border.Visibility>
                                    <Binding RelativeSource="{RelativeSource TemplatedParent}">
                                        <Binding.Converter>
                                            <telerik:HeaderVisibilityConverter/>
                                        </Binding.Converter>
                                    </Binding>
                                </Border.Visibility>
                                <Border BorderBrush="White" BorderThickness="1">
                                    <Border.Background>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="White" Offset="0"/>
                                            <GradientStop Color="#FFCDCDCD" Offset="1"/>
                                            <GradientStop Color="#FFCECECE" Offset="0.42"/>
                                            <GradientStop Color="#FFAFAFAF" Offset="0.43"/>
                                        </LinearGradientBrush>
                                    </Border.Background>
                                    <Grid Margin="1">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition Width="*"/>
                                        </Grid.ColumnDefinitions>
                                        <Label>请输入内容进行搜索：</Label>
                                        <TextBox x:Name="searchAsYouTypeTextBox" Grid.Column="2" HorizontalAlignment="Stretch" Margin="2,0,0,0" telerik:TextBoxBehavior.SelectAllOnGotFocus="True" Text="{Binding FilterText, ElementName=PropertyGridPresenter, Mode=TwoWay}" telerik:TextBoxBehavior.UpdateTextOnEnter="True" telerik:TextBoxBehavior.UpdateTextOnTextChanged="True" Visibility="{TemplateBinding SearchBoxVisibility}">
                                            <telerik:StyleManager.Theme>
                                                <telerik:Office_BlackTheme/>
                                            </telerik:StyleManager.Theme>
                                        </TextBox>
                                        <Border Background="{TemplateBinding Background}" Grid.Column="2" HorizontalAlignment="Right" Margin="0,1,1,1" Visibility="{TemplateBinding SearchBoxVisibility}" Width="22">
                                            <Path Data="M8.4939966,1.9999999C6.5610008,1.9999999 4.9939971,3.5670033 4.9939971,5.5 4.9939971,7.4329967 6.5610008,9 8.4939966,9 10.426993,9 11.993997,7.4329967 11.993997,5.5 11.993997,3.5670033 10.426993,1.9999999 8.4939966,1.9999999z M8.4939976,0C11.531564,-8.7786177E-08 13.993998,2.4624338 13.993998,5.5 13.993998,8.5375662 11.531564,11 8.4939976,11 7.3549109,11 6.2967014,10.65372 5.4188957,10.060686L5.3678761,10.025319 1.4142134,13.978982 0,12.564768 3.9563832,8.6083851 3.9333115,8.5751028C3.3402777,7.6972966 2.9939978,6.6390872 2.9939978,5.5 2.9939978,2.4624338 5.4564314,-8.7786177E-08 8.4939976,0z" Fill="#FF919191" Height="14" Margin="4" Stretch="Fill" StrokeThickness="2" Width="14"/>
                                        </Border>
                                    </Grid>
                                </Border>
                            </Border>
                            <telerik:PropertyGridPresenter x:Name="PropertyGridPresenter" IsGrouped="{TemplateBinding IsGrouped}" LabelColumnWidth="{Binding LabelColumnWidth, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Margin="0,-1,0,0" PropertyDefinitions="{Binding PropertyDefinitions, RelativeSource={RelativeSource TemplatedParent}}" Grid.Row="1" RenderMode="{TemplateBinding RenderMode}" SearchInNestedProperties="{Binding SearchInNestedProperties, RelativeSource={RelativeSource TemplatedParent}}">
                                <telerik:PropertyGridPresenter.ContentTemplate>
                                    <Binding Path="PropertyGridLayoutState" RelativeSource="{RelativeSource Self}">
                                        <Binding.Converter>
                                            <telerik:ItemTemplateConverter>
                                                <telerik:ItemTemplateConverter.FlatRenderingTemplate>
                                                    <DataTemplate>
                                                        <ItemsControl IsTabStop="False">
                                                            <ItemsControl.Style>
                                                                <Style TargetType="{x:Type ItemsControl}">
                                                                    <Setter Property="ItemsPanel">
                                                                        <Setter.Value>
                                                                            <ItemsPanelTemplate>
                                                                                <VirtualizingStackPanel IsItemsHost="True"/>
                                                                            </ItemsPanelTemplate>
                                                                        </Setter.Value>
                                                                    </Setter>
                                                                    <Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
                                                                    <Style.BasedOn>
                                                                        <Style TargetType="{x:Type ItemsControl}">
                                                                            <Setter Property="Template">
                                                                                <Setter.Value>
                                                                                    <ControlTemplate TargetType="{x:Type ItemsControl}">
                                                                                        <ScrollViewer FocusVisualStyle="{x:Null}" Margin="0,-1,0,0">
                                                                                            <telerik:StyleManager.Theme>
                                                                                                <telerik:Office_BlackTheme/>
                                                                                            </telerik:StyleManager.Theme>
                                                                                            <ItemsPresenter/>
                                                                                        </ScrollViewer>
                                                                                    </ControlTemplate>
                                                                                </Setter.Value>
                                                                            </Setter>
                                                                        </Style>
                                                                    </Style.BasedOn>
                                                                </Style>
                                                            </ItemsControl.Style>
                                                        </ItemsControl>
                                                    </DataTemplate>
                                                </telerik:ItemTemplateConverter.FlatRenderingTemplate>
                                                <telerik:ItemTemplateConverter.FlatTemplate>
                                                    <DataTemplate>
                                                        <ItemsControl IsTabStop="False" ItemsSource="{Binding}">
                                                            <ItemsControl.ItemTemplate>
                                                                <DataTemplate>
                                                                    <telerik:PropertyGridField Content="{Binding}" Visibility="{Binding Visibility}">
                                                                        <telerik:StyleManager.Theme>
                                                                            <telerik:Office_BlackTheme/>
                                                                        </telerik:StyleManager.Theme>
                                                                    </telerik:PropertyGridField>
                                                                </DataTemplate>
                                                            </ItemsControl.ItemTemplate>
                                                            <ItemsControl.Style>
                                                                <Style TargetType="{x:Type ItemsControl}">
                                                                    <Setter Property="Template">
                                                                        <Setter.Value>
                                                                            <ControlTemplate TargetType="{x:Type ItemsControl}">
                                                                                <ScrollViewer FocusVisualStyle="{x:Null}" Margin="0,-1,0,0">
                                                                                    <telerik:StyleManager.Theme>
                                                                                        <telerik:Office_BlackTheme/>
                                                                                    </telerik:StyleManager.Theme>
                                                                                    <ItemsPresenter/>
                                                                                </ScrollViewer>
                                                                            </ControlTemplate>
                                                                        </Setter.Value>
                                                                    </Setter>
                                                                </Style>
                                                            </ItemsControl.Style>
                                                        </ItemsControl>
                                                    </DataTemplate>
                                                </telerik:ItemTemplateConverter.FlatTemplate>
                                                <telerik:ItemTemplateConverter.GroupTemplate>
                                                    <DataTemplate>
                                                        <ItemsControl>
                                                            <ItemsControl.ItemTemplate>
                                                                <DataTemplate>
                                                                    <Border BorderBrush="#FF848484" BorderThickness="0,1,0,0" Margin="0,-1,0,0">
                                                                        <Grid>
                                                                            <Grid.RowDefinitions>
                                                                                <RowDefinition Height="Auto"/>
                                                                                <RowDefinition Height="*"/>
                                                                            </Grid.RowDefinitions>
                                                                            <telerik:RadToggleButton x:Name="expandCollapseButton" BorderBrush="{x:Null}" Content="{Binding Key}" IsChecked="True" InnerCornerRadius="0">
                                                                                <telerik:RadToggleButton.Style>
                                                                                    <Style TargetType="{x:Type telerik:RadToggleButton}">
                                                                                        <Setter Property="VerticalContentAlignment" Value="Center"/>
                                                                                        <Setter Property="HorizontalContentAlignment" Value="Left"/>
                                                                                        <Setter Property="MinHeight" Value="25"/>
                                                                                        <Setter Property="FontWeight" Value="Bold"/>
                                                                                        <Setter Property="Foreground" Value="Black"/>
                                                                                        <Setter Property="SnapsToDevicePixels" Value="True"/>
                                                                                        <Setter Property="BorderBrush" Value="#FF848484"/>
                                                                                        <Setter Property="Template">
                                                                                            <Setter.Value>
                                                                                                <ControlTemplate TargetType="{x:Type telerik:RadToggleButton}">
                                                                                                    <Grid UseLayoutRounding="True">
                                                                                                        <Grid.ColumnDefinitions>
                                                                                                            <ColumnDefinition Width="Auto"/>
                                                                                                            <ColumnDefinition Width="*"/>
                                                                                                        </Grid.ColumnDefinitions>
                                                                                                        <VisualStateManager.VisualStateGroups>
                                                                                                            <VisualStateGroup x:Name="CommonStates">
                                                                                                                <VisualState x:Name="Normal"/>
                                                                                                                <VisualState x:Name="MouseOver"/>
                                                                                                                <VisualState x:Name="Disabled"/>
                                                                                                            </VisualStateGroup>
                                                                                                            <VisualStateGroup x:Name="CheckStates">
                                                                                                                <VisualState x:Name="Checked">
                                                                                                                    <Storyboard>
                                                                                                                        <DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" Storyboard.TargetName="ExpanderButton">
                                                                                                                            <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="180"/>
                                                                                                                        </DoubleAnimationUsingKeyFrames>
                                                                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="IconOuterBorder">
                                                                                                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                                                                                                <DiscreteObjectKeyFrame.Value>
                                                                                                                                    <Thickness>0</Thickness>
                                                                                                                                </DiscreteObjectKeyFrame.Value>
                                                                                                                            </DiscreteObjectKeyFrame>
                                                                                                                        </ObjectAnimationUsingKeyFrames>
                                                                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="IconInnerBorder">
                                                                                                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                                                                                                <DiscreteObjectKeyFrame.Value>
                                                                                                                                    <Thickness>1,1,0,0</Thickness>
                                                                                                                                </DiscreteObjectKeyFrame.Value>
                                                                                                                            </DiscreteObjectKeyFrame>
                                                                                                                        </ObjectAnimationUsingKeyFrames>
                                                                                                                    </Storyboard>
                                                                                                                </VisualState>
                                                                                                                <VisualState x:Name="Unchecked"/>
                                                                                                            </VisualStateGroup>
                                                                                                            <VisualStateGroup x:Name="FocusStates">
                                                                                                                <VisualState x:Name="Focused"/>
                                                                                                                <VisualState x:Name="Unfocused"/>
                                                                                                            </VisualStateGroup>
                                                                                                        </VisualStateManager.VisualStateGroups>
                                                                                                        <Border x:Name="IconOuterBorder" BorderBrush="#FF848484" BorderThickness="0,0,0,1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="25">
                                                                                                            <Border x:Name="IconInnerBorder" BorderBrush="White" BorderThickness="1,1,0,1" Background="#FFE4E4E4">
                                                                                                                <Path x:Name="ExpanderButton" 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" Fill="Black" HorizontalAlignment="Center" Height="5" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Center" Width="7">
                                                                                                                    <Path.RenderTransform>
                                                                                                                        <RotateTransform/>
                                                                                                                    </Path.RenderTransform>
                                                                                                                </Path>
                                                                                                            </Border>
                                                                                                        </Border>
                                                                                                        <Border BorderBrush="#FF848484" BorderThickness="0,0,0,1" Grid.ColumnSpan="2" Grid.Column="1" Margin="-2,0,0,0">
                                                                                                            <Border BorderBrush="White" BorderThickness="0,1,1,1" Background="#FFE4E4E4">
                                                                                                                <ContentPresenter x:Name="PART_ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                                                                                            </Border>
                                                                                                        </Border>
                                                                                                        <Border x:Name="ExpandBorder" BorderBrush="#FF848484" BorderThickness="0,0,0,1" Grid.ColumnSpan="2" Margin="0,-1,0,0" VerticalAlignment="Top"/>
                                                                                                    </Grid>
                                                                                                </ControlTemplate>
                                                                                            </Setter.Value>
                                                                                        </Setter>
                                                                                    </Style>
                                                                                </telerik:RadToggleButton.Style>
                                                                            </telerik:RadToggleButton>
                                                                            <ContentPresenter x:Name="PART_ContentPresenter" Content="{Binding Items}" Grid.Row="1">
                                                                                <ContentPresenter.ContentTemplate>
                                                                                    <DataTemplate>
                                                                                        <ItemsControl IsTabStop="False">
                                                                                            <ItemsControl.ItemTemplate>
                                                                                                <DataTemplate>
                                                                                                    <telerik:PropertyGridField Content="{Binding}" Visibility="{Binding Visibility}">
                                                                                                        <telerik:StyleManager.Theme>
                                                                                                            <telerik:Office_BlackTheme/>
                                                                                                        </telerik:StyleManager.Theme>
                                                                                                    </telerik:PropertyGridField>
                                                                                                </DataTemplate>
                                                                                            </ItemsControl.ItemTemplate>
                                                                                        </ItemsControl>
                                                                                    </DataTemplate>
                                                                                </ContentPresenter.ContentTemplate>
                                                                                <ContentPresenter.Visibility>
                                                                                    <Binding ElementName="expandCollapseButton" Path="IsChecked">
                                                                                        <Binding.Converter>
                                                                                            <telerik:BooleanToVisibilityConverter/>
                                                                                        </Binding.Converter>
                                                                                    </Binding>
                                                                                </ContentPresenter.Visibility>
                                                                            </ContentPresenter>
                                                                        </Grid>
                                                                    </Border>
                                                                </DataTemplate>
                                                            </ItemsControl.ItemTemplate>
                                                            <ItemsControl.Style>
                                                                <Style TargetType="{x:Type ItemsControl}">
                                                                    <Setter Property="Template">
                                                                        <Setter.Value>
                                                                            <ControlTemplate TargetType="{x:Type ItemsControl}">
                                                                                <ScrollViewer FocusVisualStyle="{x:Null}" Margin="0,-1,0,0">
                                                                                    <telerik:StyleManager.Theme>
                                                                                        <telerik:Office_BlackTheme/>
                                                                                    </telerik:StyleManager.Theme>
                                                                                    <ItemsPresenter/>
                                                                                </ScrollViewer>
                                                                            </ControlTemplate>
                                                                        </Setter.Value>
                                                                    </Setter>
                                                                </Style>
                                                            </ItemsControl.Style>
                                                        </ItemsControl>
                                                    </DataTemplate>
                                                </telerik:ItemTemplateConverter.GroupTemplate>
                                                <telerik:ItemTemplateConverter.VirtualizedFlatTemplate>
                                                    <DataTemplate>
                                                        <ItemsControl IsTabStop="False">
                                                            <ItemsControl.ItemTemplate>
                                                                <DataTemplate>
                                                                    <telerik:PropertyGridField Content="{Binding}" Visibility="{Binding Visibility}">
                                                                        <telerik:StyleManager.Theme>
                                                                            <telerik:Office_BlackTheme/>
                                                                        </telerik:StyleManager.Theme>
                                                                    </telerik:PropertyGridField>
                                                                </DataTemplate>
                                                            </ItemsControl.ItemTemplate>
                                                            <ItemsControl.Style>
                                                                <Style TargetType="{x:Type ItemsControl}">
                                                                    <Setter Property="ItemsPanel">
                                                                        <Setter.Value>
                                                                            <ItemsPanelTemplate>
                                                                                <VirtualizingStackPanel IsItemsHost="True"/>
                                                                            </ItemsPanelTemplate>
                                                                        </Setter.Value>
                                                                    </Setter>
                                                                    <Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
                                                                    <Style.BasedOn>
                                                                        <Style TargetType="{x:Type ItemsControl}">
                                                                            <Setter Property="Template">
                                                                                <Setter.Value>
                                                                                    <ControlTemplate TargetType="{x:Type ItemsControl}">
                                                                                        <ScrollViewer FocusVisualStyle="{x:Null}" Margin="0,-1,0,0">
                                                                                            <telerik:StyleManager.Theme>
                                                                                                <telerik:Office_BlackTheme/>
                                                                                            </telerik:StyleManager.Theme>
                                                                                            <ItemsPresenter/>
                                                                                        </ScrollViewer>
                                                                                    </ControlTemplate>
                                                                                </Setter.Value>
                                                                            </Setter>
                                                                        </Style>
                                                                    </Style.BasedOn>
                                                                </Style>
                                                            </ItemsControl.Style>
                                                        </ItemsControl>
                                                    </DataTemplate>
                                                </telerik:ItemTemplateConverter.VirtualizedFlatTemplate>
                                            </telerik:ItemTemplateConverter>
                                        </Binding.Converter>
                                    </Binding>
                                </telerik:PropertyGridPresenter.ContentTemplate>
                                <telerik:StyleManager.Theme>
                                    <telerik:Office_BlackTheme/>
                                </telerik:StyleManager.Theme>
                            </telerik:PropertyGridPresenter>
                            <Border x:Name="PART_DescriptionPanel" BorderBrush="#FF848484" BorderThickness="0,1,0,0" MinHeight="75" Grid.Row="2" Visibility="{TemplateBinding DescriptionPanelVisibility}">
                                <Border BorderBrush="White" BorderThickness="0,1,0,0" Background="#FFBFBFBF">
                                    <StackPanel Orientation="Vertical">
                                        <TextBlock x:Name="PART_DescriptionLabelTextBlock" FontWeight="Bold" Margin="5" Text="{Binding SelectedPropertyDefinition.DisplayName, ElementName=PropertyGridPresenter}"/>
                                        <TextBlock x:Name="PART_DescriptionContentTextBlock" Margin="5" TextWrapping="Wrap" Text="{Binding SelectedPropertyDefinition.Description, ElementName=PropertyGridPresenter}"/>
                                    </StackPanel>
                                </Border>
                            </Border>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Background" Value="White"/>
        <Setter Property="BorderBrush" Value="#FF848484"/>
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="SnapsToDevicePixels" Value="True"/>
    </Style>
</ResourceDictionary>

[Ivan Ivanov]

Hi,

I tried applying the mentioned style in a sample project on my side and it seems to load propertly. Can you please confirm what you are trying to achieve, or if you are experiencing a different behavior?

Regards,
Ivan Ivanov
Telerik