Alloy Sample Background Color Change

I am trying to experiment with changing the style to match my application color theme.  Is there a good and easy to follow example out there that I could follow.  I have looked at the Templating Alloy.xaml example but could the the background to Whitemoke of the textbox on the propertygrid to change color.  It stays on the dark blackish color.  How do I ground on the control inside the property grid. The foreground of the textbox was successfully changed to pink.  Please help.  Here is the code that I've modified.

         <ms:BuiltInEditorStyle EditorKey="{x:Static ms:PropertyGrid.SimpleTextEditorKey}">
              <Style TargetType="{x:Type ms:TextBox}">
                <Setter Property="Control.Foreground" Value="Pink" />
                <Setter Property="Control.Background" Value="WhiteSmoke" />

                <Setter Property="Control.Template">
                  <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ms:TextBox}">
                      <Border Style="{StaticResource EditorBorder}" Margin="0" Padding="0">
                        <DockPanel>
                          <ToggleButton x:Name="ErrorPlaceholder" Style="{StaticResource ErrorPopupTriggerStyle}" />
                          <Popup IsOpen="{Binding ElementName=ErrorPlaceholder, Path=IsChecked}" AllowsTransparency="True"
                             Placement="Bottom" PlacementTarget="{Binding ElementName=ErrorPlaceholder}" StaysOpen="False">
                            <ItemsControl ItemsSource="{Binding RelativeSource={RelativeSource AncestorType={x:Type ms:TextBox}}, Path=(Validation.Errors)}"
                                      ItemTemplate="{StaticResource ValidationErrorMessage}" />
                          </Popup>
                          <ScrollViewer Margin="1" x:Name="PART_ContentHost" />
                        </DockPanel>
                      </Border>
                      <ControlTemplate.Triggers>
                        <Trigger Property="Validation.HasError" Value="True">
                          <Setter TargetName="ErrorPlaceholder" Property="Visibility" Value="Visible" />
                        </Trigger>
                      </ControlTemplate.Triggers>
                    </ControlTemplate>
                  </Setter.Value>
                </Setter>
                <Setter Property="Validation.ErrorTemplate">
                  <Setter.Value>
                    <ControlTemplate>
                      <DockPanel>
                        <Ellipse Width="6" Height="6" Margin="0,0,8,0" Fill="Red"
                             ToolTip="{Binding ElementName=EditorHolder, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}" />
                        <AdornedElementPlaceholder x:Name="EditorHolder" />
                      </DockPanel>
                    </ControlTemplate>
                  </Setter.Value>
                </Setter>
              </Style>
            </ms:BuiltInEditorStyle>

 

It looks like the background colour being set in the style is being overridden by the border background.  (This probably means we are not correctly propagating the background colour from the style to the text box, so the text box is remaining transparent.)

To get around this, add the following attribute to the ScrollViewer declaration in the ControlTemplate:

<ScrollViewer Margin="1" x:Name="PART_ContentHost" Background="{TemplateBinding Background}" />

You should now find that your Control.Background setter is correctly applied to the text box.

Another possibility to consider is to change the Background setter in the EditorBorder style.  This will also affect the combo boxes.

Finally, just as a heads up, we'd draw your attention to the styles in Source / Styles.  These are much more comprehensive than the styles in the Templating sample.  We'd still recommend the Templating sample for learning from and experimenting with because the full styles are a bit intimidating, but once you go beyond experimenting and into building a real production style, the Source / Styles styles may be a better starting point because the Templating samples omit a lot of the stuff a real style will have to handle (e.g. the Templating samples don't demonstrate all the editors, and don't handle expanding properties).

I have tried two of the three suggestions.  They both works.  The last one, I think I would need the source code.  Unfortunately, I am using the trial version and that does not have source code. 

In your reply, you've mentioned editors and expanding properties that the Templating sample does not demonstrate.  Can you give specific examples of these control.  I am wondering if we need them.  Thanks again. Sorry, I am still somewhat new.

The source code (XAML files) for the custom styles is included even in the trial version -- you should find it in the installation directory under Source / Styles.

Regarding editors:

The Alloy example in the Templating sample demonstrates how to customise the combo box (ListSelectEditorKey) and text box (SimpleTextEditorKey) editors.  The grid however has several other built-in editors, such as the colour picker, slider and numeric up-down.  If you are customising the appearance of the grid, and you plan to use these editors (for example for numeric properties, or because your object has a property of colour type), you will want to customise the appearance of these editors as well as the ones shown in the Templating sample.  The Styles files include all the built-in editors.

Regarding expanding properties:

If a property is of a class type, with multiple subproperties, then by default these are shown as expandable sub-nodes.  For example, suppose you have a PhoneNumber class with CountryCode, RegionCode and Number properties, and a Person has a PhoneNumber property.  Then the PhoneNumber row in the grid would have an "expand" symbol next to it so that the user could edit the CountryCode, RegionCode or Number properties individually.  The Alloy example in the Templating sample does not support expansion.  (We instead provided "type editors" for the PhoneNumber properties, so that users could edit the phone number on its own row instead of having to expand it.)  The Styles files do handle expandable properties.

Hope this makes sense -- please follow up if it doesn't.