This project has moved and is read-only. For the latest updates, please go here.

Propertygrid - Custom Collection Editor Example

Nov 9, 2016 at 12:30 AM
I am playing around with the propertygrid control and have it displaying my object as intended. The one area I am not quite understanding if how to customize the collection control dialog that pops up when I click on a griditem linked to a collection.

Is there any examples of how I would write this in XAML?
Developer
Nov 9, 2016 at 3:18 PM
Hi,

You need to customize the CollectionControlDialog. This control is a Window that contains a CollectionControl (ListBox and PropertyGrid) and Buttons (Ok, Cancel).

Here's an example based on the default CollectionControlDialog, CollectionControl, and Buttons :
<Application x:Class="WpfApplication63.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:WpfApplication63"
             xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
             xmlns:colconv="clr-namespace:Xceed.Wpf.Toolkit.Converters;assembly=Xceed.Wpf.Toolkit"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
    <xctk:ObjectTypeToNameConverter x:Key="ObjectTypeToNameConverter" />
    <colconv:NewItemTypesComboBoxConverter x:Key="NewItemTypesComboBoxConverter" />      
      
    <Style x:Key="MyButtonStyle"
           TargetType="{x:Type Button}">
      <Setter Property="Background"
              Value="Yellow" />
    </Style>

    <Style x:Key="CollectionControlButtonStyle"
           TargetType="{x:Type Button}">
      <Style.Triggers>
        <Trigger Property="IsEnabled"
                 Value="false">
          <Setter Property="Opacity"
                  Value="0.6" />
        </Trigger>
      </Style.Triggers>
      <Setter Property="HorizontalContentAlignment"
              Value="Center" />
      <Setter Property="VerticalContentAlignment"
              Value="Center" />
      <Setter Property="Height"
              Value="26" />
      <Setter Property="Width"
              Value="26" />
    </Style>

    <Style x:Key="MyCollectionControl"
           TargetType="{x:Type xctk:CollectionControl}">
      <Style.Resources>
        <Style TargetType="ListBox">
          <Setter Property="ItemTemplate">
            <Setter.Value>
              <DataTemplate>
                <TextBlock Text="{Binding Converter={StaticResource ObjectTypeToNameConverter}}" />
              </DataTemplate>
            </Setter.Value>
          </Setter>
        </Style>
      </Style.Resources>
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type xctk:CollectionControl}">
            <Border Background="Blue"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}">
              <Grid  Margin="{TemplateBinding Padding}">
                <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="*" />
                  <ColumnDefinition Width="1.5*" />
                </Grid.ColumnDefinitions>
                <Grid>
                  <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                  </Grid.ColumnDefinitions>
                  <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition />
                  </Grid.RowDefinitions>
                  <TextBlock Margin="0,0,0,5"
                             Text="Select type:" />
                  <ComboBox x:Name="PART_NewItemTypesComboBox"
                            Grid.Row="1"
                            Margin="0,0,0,3"
                            HorizontalAlignment="Stretch"
                            DisplayMemberPath="Name">
                    <ComboBox.ItemsSource>
                      <MultiBinding Converter="{StaticResource NewItemTypesComboBoxConverter}">
                        <Binding RelativeSource="{RelativeSource TemplatedParent}"
                                 Path="ItemsSourceType" />
                        <Binding RelativeSource="{RelativeSource TemplatedParent}"
                                 Path="NewItemTypes" />
                      </MultiBinding>
                    </ComboBox.ItemsSource>
                  </ComboBox>
                  <Button Margin="3,0,0,3"
                          Grid.Row="1"
                          Grid.Column="1"
                          Padding="5,0"
                          Content="Add"
                          Command="New"
                          CommandParameter="{Binding SelectedItem, ElementName=PART_NewItemTypesComboBox}" />
                  <ListBox x:Name="PART_ListBox"
                           Grid.Row="2"
                           Grid.ColumnSpan="2"
                           ItemsSource="{Binding Items, RelativeSource={RelativeSource TemplatedParent}}"
                           SelectedItem="{Binding SelectedItem, RelativeSource={RelativeSource TemplatedParent}}"
                           SelectedIndex="0">
                  </ListBox>
                  <StackPanel Margin="7,2,0,0"
                              VerticalAlignment="Top"
                              Grid.Column="2"
                              Grid.Row="2">
                    <Button Style="{StaticResource CollectionControlButtonStyle}"
                            Command="ComponentCommands.MoveUp"
                            CommandParameter="{Binding SelectedItem, ElementName=PART_ListBox}">
                      <Path Fill="#FF000000"
                            Data="F0 M 6,0 L 12,7 8,7 8,12 4,12 4,7 0,7 Z" />
                    </Button>
                    <Button Margin="0,1,0,0"
                            Style="{StaticResource CollectionControlButtonStyle}"
                            Command="ComponentCommands.MoveDown"
                            CommandParameter="{Binding SelectedItem, ElementName=PART_ListBox}">
                      <Path Fill="#FF000000"
                            Data="F0 M 4,0 L 8,0 8,5 12,5 6,12 0,5 4,5 Z" />
                    </Button>
                    <Button Margin="0,7,0,0"
                            Style="{StaticResource CollectionControlButtonStyle}"
                            Command="Delete"
                            CommandParameter="{Binding SelectedItem, ElementName=PART_ListBox}">
                      <Image Stretch="None"
                             Height="16"
                             Width="16"
                             Margin="1"
                             Source="/Xceed.Wpf.Toolkit;component/CollectionControl/Images/Delete16.png" />
                    </Button>
                  </StackPanel>
                </Grid>
                <Grid Column="1"
                      Margin="20,0,0,0">
                  <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition />
                  </Grid.RowDefinitions>
                  <TextBlock Grid.Column="1"
                             Text="Properties:" />
                  <xctk:PropertyGrid x:Name="PART_PropertyGrid"
                                     Grid.Row="1"
                                     Grid.Column="1"
                                     Margin="0,5,0,0"
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Stretch"
                                     SelectedObject="{Binding SelectedItem, RelativeSource={RelativeSource TemplatedParent}}"
                                     IsReadOnly="{Binding IsReadOnly, RelativeSource={RelativeSource TemplatedParent}}" />
                </Grid>
              </Grid>
            </Border>
            <ControlTemplate.Triggers>
              <Trigger Property="IsEnabled"
                       Value="False">
                <Setter Property="Foreground"
                        Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"
                        TargetName="PART_NewItemTypesComboBox" />
              </Trigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>

    <Style TargetType="{x:Type xctk:CollectionControlDialog}">
      <Style.Resources>
        <Style TargetType="{x:Type xctk:CollectionControl}"
               BasedOn="{StaticResource MyCollectionControl}" />
        <Style TargetType="{x:Type Button}"
               BasedOn="{StaticResource MyButtonStyle}" />
      </Style.Resources>
      <Setter Property="Background"
              Value="Red" />
      <Setter Property="BorderBrush"
              Value="Green" />
      <Setter Property="BorderThickness"
              Value="5" />
    </Style>
  </Application.Resources>
</Application>
――――
Get more controls, features, updates and technical support with Xceed Toolkit Plus for WPF
Nov 11, 2016 at 3:35 AM
Thanks. I got this sample working in my app. I am going to play around with to get a better feel for it and dig a bit deeper in the collection control dialog.
Nov 11, 2016 at 3:01 PM
Edited Nov 11, 2016 at 10:25 PM
Is there a working solution that shows how the propertygrid and collection editor works end to end? Just a plain vanilla solution that shows editing a collection.

Here is some more clarification. This is the sample I have (with the following changes above).

Image

The main items I am still trying to accomplish are:
1) The areas circled in purple I do not need (up/down and search)
2) Filling in "Event" with a list of my item events (think of it like a workflow).
Developer
Nov 14, 2016 at 2:05 PM
Hi,

1) To remove the "Up/Down" arrows, you can remove the 2 following buttons from the style "MyCollectionControl" that was posted earlier in this thread :
-The button with Command="ComponentCommands.MoveUp"
-The button with Command="ComponentCommands.MoveDown"
To remove the "SearchTextBox", you can add the following property to "PART_PropertyGrid" in the style "MyCollectionControl" that was posted earlier in this thread :
-ShowSearchBox="False"
To remove the "SortOptions", you can add the following property to "PART_PropertyGrid" in the style "MyCollectionControl" that was posted earlier in this thread :
-ShowSortOptions="False"

2) I believe you want to add "Event" item to the ListBox, but the "Add" button is disabled. Have you changed anything to disabled it ? What kind of object is your "Event" ?

――――
Get more controls, features, updates and technical support with Xceed Toolkit Plus for WPF