Issue with creating ControlTemplate for PropertyGrid

7 posts, 0 answers
  1. Devlin
    Devlin avatar
    7 posts
    Member since:
    Jul 2011

    Posted 28 Jul 2011 Link to this post

    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>

  2. Ivan Ivanov
    Admin
    Ivan Ivanov avatar
    1128 posts

    Posted 29 Jul 2011 Link to this post

    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 >>
  3. UI for WPF is Visual Studio 2017 Ready
  4. Devlin
    Devlin avatar
    7 posts
    Member since:
    Jul 2011

    Posted 29 Jul 2011 Link to this post

    Great, thanks!
  5. Bill
    Bill avatar
    5 posts
    Member since:
    Mar 2012

    Posted 11 Oct 2012 Link to this post

    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
  6. Ivan Ivanov
    Admin
    Ivan Ivanov avatar
    1128 posts

    Posted 16 Oct 2012 Link to this post

    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.

  7. rick
    rick avatar
    6 posts
    Member since:
    Jan 2016

    Posted 24 Mar in reply to Ivan Ivanov Link to this post

    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>

  8. Ivan Ivanov
    Admin
    Ivan Ivanov avatar
    1128 posts

    Posted 29 Mar Link to this post

    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.
Back to Top
UI for WPF is Visual Studio 2017 Ready