PropertyGrid Cells - default widths and heights.

Hello,

Please refer to the attached word document for images. I'm using the property grid without any customization and the default editors that are used.

When the PropertyGrid is loaded how can I have the following automatically happen?

1. How can I make the default heights of the cells bigger and move the value a bit closer to the separation line (i.e. left)

2. The look of the editor for Boolean is fine but would like to not have it editable by typing, just use the drop-down.

3. By default would like to have the column width containing the values bigger and the column width containing the display name smaller and both column adjust proportionally when the window is resized (more like the WinForms PropertyGrid behaves). Otherwise the values field can be very small as show in the attached document. It would be good if it loaded and behaved similar to the WinForms PropertyGrid.

Thanks

Oscar

Hi Oscar,

1) To set the height of the rows, you can set the PropertyNameTemplate of the property grid, and set the MinHeight on the outer container of that template. Here is an example (I've set the MinHeight to 22 on the outer Border):

<DataTemplate>
        <Border BorderBrush="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"
        SnapsToDevicePixels="True" Name="Bd"
        Focusable="True" FocusVisualStyle="{StaticResource EmptyStyle}"
        Padding="2,0,6,0" Margin="-10,0,0,0" MinHeight="22"
        BorderThickness="18,0,1,0">
          <DockPanel Margin="-19,0,0,0">
            <ToggleButton x:Name="Expander" 
                  Style="{StaticResource {x:Static ms:TreeListView.ExpandCollapseToggleStyleKey}}" 
                  Margin="{Binding Level,Converter={StaticResource LevelToIndentConverter},RelativeSource={RelativeSource AncestorType={x:Type ms:TreeListViewItem}}}"
                  IsChecked="{Binding Path=IsExpanded,RelativeSource={RelativeSource AncestorType={x:Type ms:TreeListViewItem}}}"
                  ClickMode="Press" />
            <TextBlock Name="NameBlock" Text="{Binding Node.HumanName}" VerticalAlignment="Center"
               Foreground="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"
               ToolTipService.IsEnabled="{Binding Path=(ToolTipService.IsEnabled), RelativeSource={RelativeSource AncestorType={x:Type ms:PropertyGrid}}}"
               Tag="{Binding PropertyNameToolTipTemplate, RelativeSource={RelativeSource AncestorType={x:Type ms:PropertyGrid}}}"
               >
      <ToolTipService.ToolTip>
        <ToolTip Content="{Binding}" 
                 ContentTemplate="{Binding PlacementTarget.Tag, RelativeSource={RelativeSource Self}}"
                 />
      </ToolTipService.ToolTip>
            </TextBlock>
          </DockPanel>
        </Border>
        <DataTemplate.Triggers>
          <DataTrigger Binding="{Binding Path=HasItems,RelativeSource={RelativeSource AncestorType={x:Type ms:TreeListViewItem}}}" 
               Value="False">
            <Setter TargetName="Expander"
            Property="ToggleButton.Visibility"
            Value="Hidden" />
          </DataTrigger>
          <DataTrigger Binding="{Binding Path=(ms:TreeListView.ShowSubitemExpanders),RelativeSource={RelativeSource AncestorType={x:Type ms:PropertyGrid}}}" 
               Value="False">
            <Setter TargetName="Expander"
            Property="ToggleButton.Visibility"
            Value="Hidden" />
            <Setter TargetName="Bd"
            Property="Border.BorderThickness"
            Value="3,0,1,0" />
          </DataTrigger>
          <DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType={x:Type ms:TreeListViewItem}}}"
               Value="True">
            <Setter TargetName="Bd" Property="Border.Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
            <Setter TargetName="NameBlock" Property="TextBlock.Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
          </DataTrigger>
        </DataTemplate.Triggers>
      </DataTemplate>

To get this to work without copying in a bunch of generic resources, you can include the following resource dictionary:

<ResourceDictionary Source="/Mindscape.WpfElements;component/Themes/Common.Generic.xaml" />

2) To change the editor used for all boolean properties, you can add the following to ms:PropertyGrid.Editors:

<ms:TypeEditor EditedType="{x:Type sys:Boolean}" EditorTemplate="{StaticResource {x:Static ms:PropertyGrid.ListSelectNoTextEntryEditorKey}}" />

3) I couldn't find a way to make the property column smaller and the value column bigger by default. As you've probably noticed, the property column auto sizes based on its content. You may need to provide custom styles to control this. Have a look through our various property grid themes to see how to create custom styles.

Let me know if you have further questions.

-Jason Fauchelle

For anyone else seeing this.

To make one work you also need to include in the xaml

<ms:LevelToIndentConverter x:Key="LevelToIndentConverter" />