Question

Sorry if this is a dense question, but I’m looking to see if there is a way to have a style resource of Canvas in App.xaml and also have children on that Canvas and just refer to it in the Style of another canvas. The resource I envision would be something like:

<Style x:Key="Background1" TargetType="Canvas">
            <Setter Property="Width" Value="500"/>
            <Setter Property="Height" Value="600" />
            <Setter Property="Background" Value="Red"/>
            <Setter Property="Children">
                <Setter.Value>
                    <Rectangle Canvas.Top="20" Canvas.Left="20"  Width="100" Height="100" Fill="Yellow"></Rectangle>
                </Setter.Value>
            </Setter>
        </Style>

And then calling it would be as simple as:

<Canvas Style="{StaticResource Background1}"  x:Name="CanvasRoot"  >
    <Rectangle x:Name="PageRectangle" Canvas.Left="114" Canvas.Top="84" Height="378" Width="210" Stroke="#92D050" Fill="#C0504D" />
</Canvas>

Any thoughts on if something like this can be done. What I’ve done doesn’t work because there is no “Children” property on Canvas.

Answer 1

So you want to add a child to a Canvas via a Style? I’m afraid this is simply not possible. Styles allows you to set the values of an elements dependency properties, such as Height, Background, Stroke etc … You can also use them to set attached properties. However, the Children property you are trying to set is not a dependency property, it is the collection of children elements that describe the children of your canvas in the visual tree.

The only way to add new elements t the visual tree using styles is to add them to some controls template. Unfortunately you canot template panels (Canvas, Grid, StackPanel). You could use a ContentControl and add your rectangle as part of its template.

A ContentControl is a lookless container of a single child. See the template described here:

http://msdn.microsoft.com/en-us/library/dd334411%28VS.95%29.aspx

Here it is, templates to add a rectangle. I am not sure what layout you are trying to achieve, but it should give you the general idea

<Style TargetType="ContentControl" x:Key="myContentControl">
      <Setter Property="Foreground" Value="#FF000000"/>
      <Setter Property="HorizontalContentAlignment" Value="Left"/>
      <Setter Property="VerticalContentAlignment" Value="Top"/>
      <Setter Property="Template">
          <Setter.Value>
              <ControlTemplate TargetType="ContentControl">
                  <Canvas>
                    <Rectangle Canvas.Top="20" Canvas.Left="20"  Width="100" Height="100" Fill="Yellow"></Rectangle>
                    <ContentPresenter
                        Content="{TemplateBinding Content}"
                        ContentTemplate="{TemplateBinding ContentTemplate}"
                        Cursor="{TemplateBinding Cursor}"
                        Margin="{TemplateBinding Padding}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                  </Canvas>
              </ControlTemplate>
          </Setter.Value>
      </Setter>

<ContentControl Style={StaticResource myContentControl}>
  <Canvas x:Name="CanvasRoot"  >
    <Rectangle x:Name="PageRectangle" Canvas.Left="114" Canvas.Top="84" Height="378" Width="210" Stroke="#92D050" Fill="#C0504D" />
  </Canvas>
</ContentControl>