PropertyGrid Localize

Hello, I encountered difficulties providing a german UI for your PropertyGrid:

I did manage to show my translated text for collections on the "right side" by adding my own DataTemplate for the key PropertyGrid.CollectionDisplayKey. So far so good.

But on the left side, the row header still states "Item[0]", "Item[1]" etc. I tried to create my own class CustomCollectionElement deriving from CollectionElement and overriding HumanName, and then replace each PropertyGridRow.Node by my own by adding a converter to the DateTemplate with the key PropertyGrid.CollectionElementEditorKey, but my overridden HumanName-getter is not called.

What I actually try is just exchanging the text "Item" by some german equivalent for all collections, e.g. for ReadOnlyCollection, I would love to use the approach as described in "How Do I Localize Built-In Editors?", but these strings are no StaticResources yet.

Any other ideas how I can reach my goal to translate the Item[xy]-texts on the left of my PropertyGrid?

Hi Simpzon,

Unfortunately this string comes from deep within the model which will be difficult to surface as a localization option. Instead, I've come up with an alternative solution - create a converter for binding to the HumanName property.

First, if you haven't done so already, you'll need to set the PropertyNameTemplate of the PropertyGrid to be your own template. This is easy to do - Go to the Themes folder at the install directory of WPF Elements and find the theme for the PropertyGrid that you're using (Generic, OfficeBlue, Alloy etc). Then copy the template that it's using for the PropertyNameTemplate. Paste this into your ResourceDictionary, and you may need to update the namespaces used in the template.

Then, create an IValueConverter, here's what I experimented with:

  string str = (string)value;
  if (str != null && str.StartsWith("Item["))
  {
    str = str.Replace("Item[", "").Replace("]", "");
    return "Artikel[" + str + "]";
  }
  return value;

Due to the square brackets in the string, this logic shouldn't conflict with any other property names. Then, simply set this converter into the Node.HumanName binding within the PropertyNameTemplate.

Hope that helps, please let me know if you have any questions about implementing this.

-Jason Fauchelle

Hi Jason, thanks for your suggestions. I could not find the original DataTemplate used as PropertyNameTemplate in the Theme-xamls, but at least I know now, which part to modify and it's even easily accessible by setting PropertyGrid.PropertyNameTemplate. Now, I only need to get the original template to keep such nice things as indentation and expand/collapse-buttons and add that translating converter, I think I can extract that at runtime somehow.

... well that was not that easy, the template does a lot more than just displaying the PropertyName and the extracted DataTemplate did miss some things so the view was quite ugly after replacing it by a simple TextBlock and the list collapse/expand did no longer work. I ended up with grabbing TextBlocks from the VisualTree when expanding TreeViewNodes and then replace the text item by item. This is not elegant, but it works.

Thank you

Simpzon

Hi Simpzon,

Apologies, the template is poorly named "FancyNodeTemplate". I ought to go through and fix up some of these names including others such as "AllSinginingAllDancingSearchBox". Here is the property name template for OfficeBlue:

<HierarchicalDataTemplate x:Key="FancyNodeTemplate" ItemsSource="{Binding Children}">
  <Grid Margin="{Binding Level,Converter={StaticResource LevelToIndentConverter},RelativeSource={RelativeSource AncestorType={x:Type pg:TreeListViewItem}}}">
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="15" Name="SubitemExpanderColumn" />
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="15" />
    </Grid.ColumnDefinitions>
    <Border Visibility="{Binding Path=(pg:TreeListView.ShowSubitemExpanders), Converter={StaticResource bvc}, RelativeSource={RelativeSource AncestorType={x:Type local:PropertyGrid}}}">
      <ToggleButton x:Name="ExpansionToggle" Focusable="False" Style="{StaticResource ExpansionStyle}" Margin="0,3,0,0"
                    IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource AncestorType={x:Type TreeViewItem}}}"  
                    Visibility="{Binding HasItems, RelativeSource={RelativeSource AncestorType={x:Type TreeViewItem}}, Converter={StaticResource bvc}}" />
    </Border>
    <Border HorizontalAlignment="Stretch" Grid.Column="1">
      <TextBlock Text="{Binding Node.HumanName}" Foreground="{StaticResource Foreground}" HorizontalAlignment="Left" VerticalAlignment="Top" 
                 Padding="3,5,0,1"
                 ToolTipService.IsEnabled="{Binding Path=(ToolTipService.IsEnabled), RelativeSource={RelativeSource AncestorType={x:Type local:PropertyGrid}}}"
                 Tag="{Binding PropertyNameToolTipTemplate, RelativeSource={RelativeSource AncestorType={x:Type local:PropertyGrid}}}">
        <ToolTipService.ToolTip>
          <ToolTip Content="{Binding}" ContentTemplate="{Binding PlacementTarget.Tag, RelativeSource={RelativeSource Self}}" />
        </ToolTipService.ToolTip>
      </TextBlock>
    </Border>
  </Grid>
  <HierarchicalDataTemplate.Triggers>
    <DataTrigger Binding="{Binding Path=(pg:TreeListView.ShowSubitemExpanders), RelativeSource={RelativeSource AncestorType={x:Type local:PropertyGrid}}}" Value="False">
      <Setter TargetName="SubitemExpanderColumn" Property="Width" Value="0" />
    </DataTrigger>
  </HierarchicalDataTemplate.Triggers>
</HierarchicalDataTemplate>

If you need to start from a different theme, look for "FancyNodeTemplate" in the files that end with *.PropertyGrid.xaml. Also, remember to change the namespace from "pg" to whatever you're using for Mindscape WPF Elements.

Hope that helps. Let me know if you have further questions about doing this and I'll help you out.

-Jason Fauchelle

Hi Jason, thanks again for your efforts. At least, I know now, how to do it the WPF-way by replacing the DataTemplate. However, for now I think I will keep my current code-behind-approach, where I replace the TreeNode-Texts in the TreeViewItem.ExpandedEvent, so I can keep the original template untouched.

Maybe, If you go ahead with renaming templates, you could introduce a separate StaticResource-Key for the PropertyName-display itself, i.e. only this part from the template:

<TextBlock Text="{Binding Node.HumanName}" Foreground="{StaticResource Foreground}" HorizontalAlignment="Left" VerticalAlignment="Top" 
             Padding="3,5,0,1"
             ToolTipService.IsEnabled="{Binding Path=(ToolTipService.IsEnabled), RelativeSource={RelativeSource AncestorType={x:Type local:PropertyGrid}}}"
             Tag="{Binding PropertyNameToolTipTemplate, RelativeSource={RelativeSource AncestorType={x:Type local:PropertyGrid}}}">
    <ToolTipService.ToolTip>
      <ToolTip Content="{Binding}" ContentTemplate="{Binding PlacementTarget.Tag, RelativeSource={RelativeSource Self}}" />
    </ToolTipService.ToolTip>
  </TextBlock>

Anyway, my issue is solved. Thank you.

Simpzon

P.S.: I personally like the AllSingingAllDancingSearchBox.