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

Issue with creating ControlTemplate for PropertyGrid

6 Answers 321 Views
PropertyGrid
This is a migrated thread and some comments may be shown as answers.
Devlin
Top achievements
Rank 1
Devlin asked on 28 Jul 2011, 11:27 PM
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>

6 Answers, 1 is accepted

Sort by
0
Ivan Ivanov
Telerik team
answered on 29 Jul 2011, 03:57 PM
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
Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>
0
Devlin
Top achievements
Rank 1
answered on 29 Jul 2011, 05:08 PM
Great, thanks!
0
Bill
Top achievements
Rank 1
answered on 11 Oct 2012, 04:37 PM
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
0
Ivan Ivanov
Telerik team
answered on 16 Oct 2012, 03:56 PM
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

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
rick
Top achievements
Rank 1
answered on 24 Mar 2016, 12:55 PM

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?

                    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>

0
Ivan Ivanov
Telerik team
answered on 29 Mar 2016, 12:57 PM
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
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
Tags
PropertyGrid
Asked by
Devlin
Top achievements
Rank 1
Answers by
Ivan Ivanov
Telerik team
Devlin
Top achievements
Rank 1
Bill
Top achievements
Rank 1
rick
Top achievements
Rank 1
Share this question
or