Bound ContentControl not displaying

Question

I have two ContentControls on a page that bind to the same StaticResource and one of them draws correctly an the other doesn't draw at all.

The resource is defined thus:

<Path x:Key="ArrowNorth"
    Stroke="DarkGray"
    StrokeThickness="1"
    Data="M 20,4 L 36,20 L 32,24 L 23,15 L 23,33 L 17,33 L 17,15 L 8,24 L 4,20 Z">
    <Path.Fill>
        <RadialGradientBrush GradientOrigin="0.15,0.2" Center="0.3,0.4">
            <GradientStop Color="White"  Offset="0"/>
            <GradientStop Color="{Binding Source={StaticResource MainWindowResource}, Path=ArrowColor}"  Offset="1"/>
        </RadialGradientBrush>
    </Path.Fill>
</Path>

The resource is basically an arrow that I am trying to display on top of a circle. The place that it is not drawing correctly is define like this:

<Grid Canvas.Top="30" Canvas.Left="6" ToolTip="Up"
       Visibility="{Binding Source={StaticResource MainWindowResource}, Path=ShowVertical}">
    <Ellipse x:Name="lightEllipseU" Height="40" Width="40">
        <Ellipse.Fill>
            <RadialGradientBrush GradientOrigin="0.3,0.3" Center="0.4,0.4">
                <GradientStop Color="White"  Offset="0"/>
                <GradientStop
                    Color="{Binding Source={StaticResource MainWindowResource}, Path=LightColorU}"
                    Offset="1"/>
            </RadialGradientBrush>
        </Ellipse.Fill>
    </Ellipse>
    <!-- This doesn't display -->
    <ContentControl Content="{Binding Source={StaticResource ArrowNorth}}"/> 
</Grid>

The Ellipse displays fine and just to test the Z order, I commented out the Ellipse and the ContentControl would still not display. Further down the page I use the arrow in a differnt place and the arrow displays just fine. Here is the code:

<Grid Canvas.Top="10" Canvas.Left="110" ToolTip="Y Axis">
    <Ellipse x:Name="lightEllipseN" Height="40" Width="40">
        <Ellipse.Fill>
            <RadialGradientBrush GradientOrigin="0.3,0.3" Center="0.4,0.4">
                <GradientStop Color="White"  Offset="0"/>
                <GradientStop Color="{Binding Source={StaticResource MainWindowResource}, Path=LightColorN}"  Offset="1"/>
            </RadialGradientBrush>
        </Ellipse.Fill>
    </Ellipse>
    <!-- This displays just fine -->
    <ContentControl Content="{Binding Source={StaticResource ArrowNorth}}"/>
</Grid>

The code is absolutely the same (cut and paste). I can't understand why it will work in one place an not another.

Answer 1

You are right, as each Visual can have only one parent and since you have only one Path then last time it's used it will be put in that place of visual tree. What you can do is create Geometry resource:

 <Window.Resources>
     <!-- ..... -->
     <Geometry x:Key="myPath">M 20,4 L 36,20 L 32,24 L 23,15 L 23,33 L 17,33 L 17,15 L 8,24 L 4,20 Z</Geometry>
 </Window.Resources>

and then you can use is in more then one Path:

<Grid ...>
    <Ellipse Height="40" Width="40">
        <Ellipse.Fill>
            <RadialGradientBrush GradientOrigin="0.3,0.3" Center="0.4,0.4">
                <GradientStop Color="White" Offset="0"/>
                <GradientStop Color="Black" Offset="1"/>
            </RadialGradientBrush>
        </Ellipse.Fill>
    </Ellipse>
    <Path Stroke="DarkGray" StrokeThickness="1" Data="{StaticResource myPath}">
        <Path.Fill>
            <RadialGradientBrush GradientOrigin="0.15,0.2" Center="0.3,0.4">
                <GradientStop Color="White" Offset="0"/>
                <GradientStop Color="Black" Offset="1"/>
            </RadialGradientBrush>
        </Path.Fill>
    </Path>
</Grid>

However, since it's used in more then one place and it basically looks the same, only colours change, it would be useful to create custom UserControl with 2 DependancyProperty for colours binding and then you can reuse it as many places you like