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

RadPropertyGrid custom style problem

1 Answer 257 Views
PropertyGrid
This is a migrated thread and some comments may be shown as answers.
Mohamed
Top achievements
Rank 1
Mohamed asked on 22 Jul 2011, 10:26 AM
Hi Telerik,

Thank you for the new telerik release and mainly about the ribbonView which works very well.
Thank you for the radPropertyGrid too but I'm trying to customize it using blend.
So I've just applied a style to my radPropertyGrid without modifying anything and when running the project, an exception is occured.
You'll find my project attached please try to run it and look at my code to see if I've made something wrong.


Thank you very much for your help and your reactivity.

Here is my XAML code :
<UserControl
    xmlns:SL40PropertyGrid="clr-namespace:SL40PropertyGrid;assembly=SL40PropertyGrid"
    x:Class="SilverlightApplication_propertyGrid.MainPage"
    Width="640" Height="480">
    <UserControl.Resources>
        <SolidColorBrush x:Key="ControlOuterBorder" Color="#FF848484"/>
        <SolidColorBrush x:Key="ControlInnerBorder" Color="White"/>
        <LinearGradientBrush x:Key="PropertyGrid_HeaderBackground" 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>
        <SolidColorBrush x:Key="RadioButton_Indicator" Color="Black"/>
        <telerik:Office_BlackTheme x:Key="Theme"/>
        <SolidColorBrush x:Key="PropertyGrid_SearchIndicator_Background" Color="#FF919191"/>
        <Style x:Key="ItemsControlStyle" TargetType="ItemsControl">
            <Setter Property="BorderBrush" Value="#FF848484"/>
            <Setter Property="BorderThickness" Value="0,0,0,1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ItemsControl">
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" VerticalAlignment="Top">
                            <ItemsPresenter/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <DataTemplate x:Key="flatTemplate">
            <ItemsControl ItemsSource="{Binding}" Style="{StaticResource ItemsControlStyle}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <telerik:PropertyGridField Content="{Binding}">
                            <telerik:PropertyGridField.Resources>
                                <Style x:Key="TextBox" telerik:StyleManager.BasedOn="{StaticResource Theme}" TargetType="TextBox">
                                    <Setter Property="Padding" Value="3,2,0,2"/>
                                    <Setter Property="Background" Value="Transparent"/>
                                    <Setter Property="BorderBrush" Value="Transparent"/>
                                </Style>
                                <Style x:Key="CheckBox" telerik:StyleManager.BasedOn="{StaticResource Theme}" TargetType="CheckBox">
                                    <Setter Property="Margin" Value="3,2,0,2"/>
                                </Style>
                                <Style x:Key="RadComboBox" telerik:StyleManager.BasedOn="{StaticResource Theme}" TargetType="telerik:RadComboBox">
                                    <Setter Property="ItemContainerStyle">
                                        <Setter.Value>
                                            <Style telerik:StyleManager.BasedOn="{StaticResource Theme}" TargetType="telerik:RadComboBoxItem"/>
                                        </Setter.Value>
                                    </Setter>
                                    <Setter Property="IsEditable" Value="True"/>
                                </Style>
                            </telerik:PropertyGridField.Resources>
                            <telerik:StyleManager.Theme>
                                <StaticResource ResourceKey="Theme"/>
                            </telerik:StyleManager.Theme>
                        </telerik:PropertyGridField>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </DataTemplate>
        <SolidColorBrush x:Key="PropertyGrid_IndentCellBackground" Color="#FFE4E4E4"/>
        <SolidColorBrush x:Key="ToggleButton_Indicator" Color="Black"/>
        <Style x:Key="PropertyGridToggleButtonStyle" TargetType="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="#FF000000"/>
            <Setter Property="BorderBrush" Value="{StaticResource ControlOuterBorder}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerik:RadToggleButton">
                        <Grid>
                            <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="00:00:00" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" Storyboard.TargetName="ExpanderButton">
                                                <EasingDoubleKeyFrame KeyTime="00:00:00.2" Value="180"/>
                                            </DoubleAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="IconOuterBorder">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="0,0,0,0"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="IconInnerBorder">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="1,1,0,0"/>
                                            </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="{StaticResource ControlOuterBorder}" BorderThickness="0,0,0,1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="25">
                                <Border x:Name="IconInnerBorder" BorderBrush="{StaticResource ControlInnerBorder}" BorderThickness="1,1,0,1" Background="{StaticResource PropertyGrid_IndentCellBackground}">
                                    <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="{StaticResource ToggleButton_Indicator}" HorizontalAlignment="Center" Height="5" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Center" Width="7">
                                        <Path.RenderTransform>
                                            <RotateTransform/>
                                        </Path.RenderTransform>
                                    </Path>
                                </Border>
                            </Border>
                            <Border BorderBrush="{StaticResource ControlOuterBorder}" BorderThickness="0,0,0,1" Grid.ColumnSpan="2" Grid.Column="1">
                                <Border BorderBrush="{StaticResource ControlInnerBorder}" BorderThickness="0,1,1,1" Background="{StaticResource PropertyGrid_IndentCellBackground}">
                                    <ContentPresenter x:Name="PART_ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                </Border>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <telerik:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
        <telerik:GroupingItemsSourceConverter x:Key="GroupingItemsSourceConverter"/>
        <DataTemplate x:Key="groupTemplate">
            <ItemsControl ItemsSource="{Binding ., Converter={StaticResource GroupingItemsSourceConverter}}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Border BorderBrush="{StaticResource ControlOuterBorder}" 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" Style="{StaticResource PropertyGridToggleButtonStyle}"/>
                                <ContentPresenter x:Name="PART_ContentPresenter" ContentTemplate="{StaticResource flatTemplate}" Content="{Binding Items}" Grid.Row="1" Visibility="{Binding IsChecked, Converter={StaticResource BooleanToVisibilityConverter}, ElementName=expandCollapseButton}"/>
                            </Grid>
                        </Border>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </DataTemplate>
        <telerik:ItemTemplateConverter x:Key="ItemTemplateConverter" FlatTemplate="{StaticResource flatTemplate}" GroupTemplate="{StaticResource groupTemplate}"/>
        <SolidColorBrush x:Key="PropertyGrid_DescriptionBorderBrush" Color="White"/>
        <SolidColorBrush x:Key="PropertyGrid_DescriptionBackground" Color="#FFBFBFBF"/>
        <ControlTemplate x:Key="RadPropertyGridTemplate" TargetType="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="{StaticResource ControlOuterBorder}" BorderThickness="0,0,0,1" Margin="0,0,0,-1">
                        <Border BorderBrush="{StaticResource ControlInnerBorder}" BorderThickness="1" Background="{StaticResource PropertyGrid_HeaderBackground}">
                            <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" telerik:StyleManager.Theme="{StaticResource Theme}" Visibility="{TemplateBinding SortAndGroupButtonsVisibility}" Width="28">
                                    <ToolTipService.ToolTip>
                                        <ToolTip telerik:LocalizationManager.ResourceKey="Categorize" telerik:StyleManager.Theme="{StaticResource Theme}"/>
                                    </ToolTipService.ToolTip>
                                    <Path Data="M7.0000019,8.9999981 L16.999998,8.9999981 L16.999998,9.9999981 L7.0000019,9.9999981 z M7.0000019,6.9999995 L16.999998,6.9999995 L16.999998,7.9999995 L7.0000019,7.9999995 z M0,6 L3.9999998,8.5 L0,11 z M6.999999,3.0000055 L16.999996,3.0000055 L16.999996,4.0000052 L6.999999,4.0000052 z M7.0000019,0.99999905 L16.999998,0.99999905 L16.999998,1.9999989 L7.0000019,1.9999989 z M0,0 L4,2.5000002 L0,5.0000005 z" Fill="{StaticResource RadioButton_Indicator}" Height="11" Stretch="Fill" StrokeThickness="0" Width="17"/>
                                </telerik:RadRadioButton>
                                <telerik:RadRadioButton x:Name="sortButton" Content="A-Z" Grid.Column="1" IsChecked="True" telerik:StyleManager.Theme="{StaticResource Theme}" Visibility="{TemplateBinding SortAndGroupButtonsVisibility}" Width="28">
                                    <ToolTipService.ToolTip>
                                        <ToolTip telerik:LocalizationManager.ResourceKey="Alphabetical" telerik:StyleManager.Theme="{StaticResource Theme}"/>
                                    </ToolTipService.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:StyleManager.Theme="{StaticResource Theme}" telerik:TextBoxBehavior.UpdateTextOnEnter="True" telerik:TextBoxBehavior.UpdateTextOnTextChanged="True" Visibility="{TemplateBinding SearchBoxVisibility}"/>
                                <Path Grid.Column="2" Data="M8.4939966,1.9999999 C6.5610008,1.9999999 4.9939971,3.5670033 4.9939971,5.5 C4.9939971,7.4329967 6.5610008,9 8.4939966,9 C10.426993,9 11.993997,7.4329967 11.993997,5.5 C11.993997,3.5670033 10.426993,1.9999999 8.4939966,1.9999999 z M8.4939976,0 C11.531564,-8.7786177E-08 13.993998,2.4624338 13.993998,5.5 C13.993998,8.5375662 11.531564,11 8.4939976,11 C7.3549109,11 6.2967014,10.65372 5.4188957,10.060686 L5.3678761,10.025319 L1.4142134,13.978982 L0,12.564768 L3.9563832,8.6083851 L3.9333115,8.5751028 C3.3402777,7.6972966 2.9939978,6.6390872 2.9939978,5.5 C2.9939978,2.4624338 5.4564314,-8.7786177E-08 8.4939976,0 z" Fill="{StaticResource PropertyGrid_SearchIndicator_Background}" HorizontalAlignment="Right" Height="14" Margin="4" Stretch="Fill" StrokeThickness="2" Visibility="{TemplateBinding SearchBoxVisibility}" Width="14"/>
                            </Grid>
                        </Border>
                    </Border>
                    <Border BorderBrush="{StaticResource ControlOuterBorder}" BorderThickness="0,1,0,1" Grid.Row="1">
                        <ScrollViewer x:Name="PART_ItemsScrollViewer" ScrollViewer.HorizontalScrollBarVisibility="Auto" telerik:StyleManager.Theme="{StaticResource Theme}" ScrollViewer.VerticalScrollBarVisibility="Auto">
                            <telerik:PropertyGridPresenter x:Name="PropertyGridPresenter" ContentTemplate="{Binding IsChecked, Converter={StaticResource ItemTemplateConverter}, ElementName=groupButton}" LabelColumnWidth="{Binding LabelColumnWidth, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" PropertyDefinitions="{Binding PropertyDefinitions, RelativeSource={RelativeSource TemplatedParent}}" telerik:StyleManager.Theme="{StaticResource Theme}"/>
                        </ScrollViewer>
                    </Border>
                    <Border x:Name="PART_DescriptionPanel" BorderBrush="{StaticResource PropertyGrid_DescriptionBorderBrush}" BorderThickness="0,1,0,0" Background="{StaticResource PropertyGrid_DescriptionBackground}" 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>
        <SolidColorBrush x:Key="ControlBackground" Color="White"/>
        <SolidColorBrush x:Key="ControlForeground" Color="#FF000000"/>
        <Style x:Key="RadPropertyGridStyle" TargetType="telerik:RadPropertyGrid">
            <Setter Property="Template" Value="{StaticResource RadPropertyGridTemplate}"/>
            <Setter Property="Background" Value="{StaticResource ControlBackground}"/>
            <Setter Property="BorderBrush" Value="{StaticResource ControlOuterBorder}"/>
            <Setter Property="Foreground" Value="{StaticResource ControlForeground}"/>
            <Setter Property="BorderThickness" Value="1"/>
        </Style>
    </UserControl.Resources>
 
    <Grid x:Name="LayoutRoot" Background="White">
        <telerik:RadPropertyGrid Item="Does that work?" Margin="0" d:LayoutOverrides="Width, Height" Style="{StaticResource RadPropertyGridStyle}"/>
    </Grid>
</UserControl>

Again thanks for your help.

1 Answer, 1 is accepted

Sort by
0
Maya
Telerik team
answered on 22 Jul 2011, 01:36 PM
Hi Mohamed,

Indeed, you are quite correct. The bug has been logged into our Public Issue Tracking System and I have updated your Telerik point accordingly. We will do our best to provide a fix as soon as possible. 
 

Kind regards,
Maya
the Telerik team

Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

Tags
PropertyGrid
Asked by
Mohamed
Top achievements
Rank 1
Answers by
Maya
Telerik team
Share this question
or