Only the last usercontrol shows contentcontrol

Question

I have a weird problem. I've created a usercontrol with a label and a canvas. The canvas references a resource.

But the canvas is only shown on the last control in my stackpanel.

This is my window

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:UserControlSolution" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="UserControlSolution.MainWindow"
    Title="MainWindow" Height="836" Width="270.5" Background="#FF2B2B2B" BorderBrush="{DynamicResource Border}" Loaded="Window_Loaded" >

<Window.Resources>

    <LinearGradientBrush x:Key="Border" EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
        <GradientStop Color="#FF6C6C6C" Offset="0.009"/>
        <GradientStop Color="#FFA1A1A1" Offset="1"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="Orange" Color="#FFF5610E"/>
    <SolidColorBrush x:Key="Red" Color="#FFE51400"/>
    <SolidColorBrush x:Key="Blue" Color="#FF1BA1E2"/>
    <SolidColorBrush x:Key="Yellow" Color="#FFFFC40D"/>

</Window.Resources>

<StackPanel Margin="0,10,0,0">
    <local:UserControlButton x:Name="Robby" Height="50" VerticalAlignment="Top" Margin="2,0,0,5"/>
    <local:UserControlButton x:Name="Erwin" Height="50" VerticalAlignment="Top" Margin="2,0,0,5" />
    <local:UserControlButton x:Name="Laurens" Height="50" VerticalAlignment="Top"  Margin="2,0,0,5"/>
    <local:UserControlButton x:Name="Kevin" Height="50" VerticalAlignment="Top" Margin="2,0,0,5"/>
    <local:UserControlButton x:Name="Liesbeth" Height="50" VerticalAlignment="Top" Margin="2,0,0,5" Background="{DynamicResource Orange}"/>
    <local:UserControlButton x:Name="Jack" Height="50" VerticalAlignment="Top" Margin="2,0,0,5"/>
    <local:UserControlButton x:Name="Filip" Height="50" VerticalAlignment="Top" Margin="2,0,0,5"/>
    <local:UserControlButton x:Name="Stefaan" Height="50" VerticalAlignment="Top" Margin="2,0,0,5" Background="{DynamicResource Red}"/>
    <local:UserControlButton x:Name="Sami" Height="50"  VerticalAlignment="Top" Margin="2,0,0,5" Background="{DynamicResource Blue}"/>
    <local:UserControlButton x:Name="Jurgen" Height="50" VerticalAlignment="Top" Margin="2,0,0,5"/>
</StackPanel>

This is my usercontrol, in the contentcontrol at the bottom I reference my canvas.

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
mc:Ignorable="d"
x:Class="UserControlSolution.UserControlButton"
x:Name="UserControl"
Height="50" Background="#FF2F2F2F">

<i:Interaction.Triggers>
    <i:EventTrigger EventName="MouseEnter">
        <ei:GoToStateAction TargetObject="{Binding ElementName=UserControl}" StateName="Expand"/>
    </i:EventTrigger>
    <i:EventTrigger EventName="MouseLeave">
        <ei:GoToStateAction TargetObject="{Binding ElementName=UserControl}" StateName="Collapse"/>
    </i:EventTrigger>
</i:Interaction.Triggers>

<Grid x:Name="LayoutRoot" Height="50" RenderTransformOrigin="0.5,0.5">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="VisualStateGroup">
            <VisualState x:Name="Expand">
                <Storyboard>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="LayoutRoot">
                        <EasingDoubleKeyFrame KeyTime="0" Value="80"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="UserControl">
                        <EasingDoubleKeyFrame KeyTime="0" Value="79"/>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
            <VisualState x:Name="Collapse"/>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Rectangle x:Name="rectangle" RenderTransformOrigin="0.5,0.5" Width="230" Height="50"/>
    <TextBlock x:Name="NameLabel" FontSize="16" Foreground="#FFE5E5E5" Height="34" Width="149" Text="Onthaal Telefoon" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="10,10,0,0" FontFamily="Segoe UI Semibold"/>
    <Viewbox HorizontalAlignment="Right" VerticalAlignment="Top" Height="50" Width="58.789">
        <ContentControl Content="{DynamicResource appbar_close}" Width="91.96" Height="79.911" />
    </Viewbox>
</Grid>
</UserControl>

And this is my App file where I define my resources

<Application x:Class="UserControlSolution.App"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         StartupUri="MainWindow.xaml">
<Application.Resources>
    <Canvas x:Key="appbar_close" x:Name="appbar_close" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
        <Path Width="31.6666" Height="31.6667" Canvas.Left="22.1666" Canvas.Top="22.1667" Stretch="Fill" Fill="#FFEE1111" Data="F1 M 26.9166,22.1667L 37.9999,33.25L 49.0832,22.1668L 53.8332,26.9168L 42.7499,38L 53.8332,49.0834L 49.0833,53.8334L 37.9999,42.75L 26.9166,53.8334L 22.1666,49.0833L 33.25,38L 22.1667,26.9167L 26.9166,22.1667 Z " Stroke="#FF2F2F2F"/>
    </Canvas>

    <Canvas x:Key="appbar_check" x:Name="appbar_check" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
        <Path Width="37.9998" Height="31.6665" Canvas.Left="19.0001" Canvas.Top="22.1668" Stretch="Fill" Fill="#FF00A300" Data="F1 M 23.7501,33.25L 34.8334,44.3333L 52.2499,22.1668L 56.9999,26.9168L 34.8334,53.8333L 19.0001,38L 23.7501,33.25 Z " Stroke="#FF2F2F2F"/>
    </Canvas>

    <Canvas x:Key="appbar_arrow_right" x:Name="appbar_arrow_right" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
        <Path Width="39.25" Height="28" Canvas.Left="19.0002" Canvas.Top="24" Stretch="Fill" Fill="#FF2B5797" Data="F1 M 19.0002,34L 19.0002,42L 43.7502,42L 33.7502,52L 44.2502,52L 58.2502,38L 44.2502,24L 33.7502,24L 43.7502,34L 19.0002,34 Z " Stroke="#FF2F2F2F"/>
    </Canvas>


    <SolidColorBrush x:Key="UserControlBackground" Color="#FF2F2F2F"/>

</Application.Resources>

As you can see in the screenshot, only the last control shows the canvas..

Answer 1

Since you have only one Canvas and each Visual can have only one parent in visual tree therefore each time you place your resource it's put in that place of visual tree and removed from the previous place. You can either put Canvas directly into ViewBox in UserControl and make Path a resource or you can try setting x:Shared attribute to false on your Canvas which should result in new instance of resource being created each time you refer to it:

<Application.Resources>
    <Canvas x:Key="appbar_close" x:Shared="False" ...>
        <!-- -->
    </Canvas>
</Application.Resources>

Answer 2

Set x:Shared=false on resource. It will work.

<Canvas x:Key="appbar_close" x:Name="appbar_close" x:Shared="false" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0" >