dynamically add rectangle with resource fill in WPF

Question

Im having a hard time trying to add a rectangle to a static canvas.The rectangle it's filled with a vectorial image that is in a resource file. It does not show the vectorial for some reason.

Code in XAML:

<Window x:Class="Test1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
    <Grid x:Name="grid1">
        <Canvas x:Name="canvas1"/>
    </Grid>
</Window>

Code behind:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        this.Loaded += OnLoaded; 
    }

    private void OnLoaded(object sender, RoutedEventArgs e)
    {
        //dynamically create and add rectangle to a existing canvas
        Rectangle rect = new Rectangle
        {
            VerticalAlignment = VerticalAlignment.Center,
            HorizontalAlignment = HorizontalAlignment.Center,
            Fill = (Brush)FindResource("Alcanc"),
        };
        canvas1.Children.Add(rect);
    }
}

Code in the resource file:

<Application x:Class="Test1.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>

        <Style TargetType="{x:Type Grid}">
            <Setter Property="ShowGridLines" Value="True"/>
        </Style>

        <!--Vector image-->
        <VisualBrush  x:Key="Alcanc" x:Shared="false" Stretch="Uniform">
            <VisualBrush.Visual>
                <Canvas>
                    <Path Data="M120.024,239.976C186.12,239.976 239.976,186.048 239.976,119.952 239.976,53.856 186.12,0 120.024,0 53.928,0 0,53.856 0,119.952 0,186.048 53.928,239.976 120.024,239.976" Fill="White" Height="239.976" Canvas.Left="0" Canvas.Top="0" Width="239.976"/>
                    <Path Data="M84.096,38.304L84.096,138.528 71.784,138.528C66.312,138.528 61.776,134.208 61.416,128.808 61.416,87.912 61.344,119.304 61.344,78.48 59.832,67.608 54.36,59.616 44.424,53.856L3.6,28.512C1.512,27,0.072,24.696,0,22.32L0,22.032C0.072,21.096 0.288,20.16 0.792,19.152 2.736,15.264 8.208,14.832 10.944,16.632L13.68,17.928C29.448,24.696,43.416,30.6,59.184,37.368L59.184,37.44 64.224,38.304 64.944,38.304 65.592,38.304z M84.096,0C75.096,0 67.752,7.416 67.752,16.416 67.752,25.416 75.096,32.76 84.096,32.76z M84.096,138.528L84.096,38.304 104.832,38.304 105.408,38.304C116.568,38.304 125.712,47.376 125.712,58.536 125.712,59.4 125.64,60.192 125.496,61.056L125.496,131.184C125.496,131.256,125.568,131.256,125.568,131.328L125.496,131.4 125.496,131.76C125.28,135.504 122.112,138.528 118.296,138.528 114.48,138.528 111.384,135.504 111.096,131.76L111.096,77.976C110.664,74.448,104.976,74.808,104.832,78.768L104.832,124.704 104.904,124.704 104.904,127.944 104.904,128.088 104.904,128.232 104.904,128.808 104.832,128.808C104.472,134.208,99.936,138.528,94.464,138.528z M84.096,32.76C93.168,32.76 100.512,25.416 100.512,16.416 100.512,7.416 93.168,0 84.096,0z" Fill="#FFCCCCCC" Height="138.528" Canvas.Left="58.464" Canvas.Top="63" Width="125.712"/>
                    <Path Data="M42.017,15.974L3.281,50.246C1.985,51.182 -1.687,56.87 0.905,60.398 3.137,63.638 7.169,63.854 10.409,62.198L51.737,37.646C54.113,36.134 56.921,35.99 60.017,36.782 60.233,37.862 60.449,39.014 60.593,40.166L60.593,87.758C60.449,95.534,64.913,99.206,70.385,99.782L93.929,99.782C100.265,99.638,104.081,93.95,104.081,89.558L104.081,89.414 104.009,40.454C104.225,36.494,109.841,36.134,110.273,39.662L110.273,92.942C110.561,96.686 113.657,99.71 117.473,99.71 121.289,99.71 124.457,96.686 124.673,92.942L124.673,92.582 124.673,92.51 124.673,92.438 124.673,22.814C124.817,21.95 124.817,21.158 124.817,20.294 124.817,9.134 115.745,0.062 104.585,0.062L104.009,0.062 64.841,0.062 64.193,0.062 63.545,0.062C51.593,-1.09,42.521,14.03,42.017,15.974" Fill="#FFCCCCCC" Height="99.783" Canvas.Left="59.215" Canvas.Top="101.818" Width="124.817"/>
                    <Path Data="M6.264,12.6C9.792,12.6 12.6,9.72 12.6,6.264 12.6,2.808 9.792,0 6.264,0 2.808,0 0,2.808 0,6.264 0,9.72 2.808,12.6 6.264,12.6" Fill="#FF3399FF" Height="12.6" Canvas.Left="55.872" Canvas.Top="123.12" Width="12.6"/>
                    <Path Data="F1M0,9.144L9.216,0 9.216,6.912 43.992,6.912 43.992,11.664 9.216,11.664 9.216,18.36z" Fill="#FF3399FF" Height="18.36" Canvas.Left="98.928" Canvas.Top="38.376" Width="43.992"/>
                    <Path Data="M20.165,78.264L20.165,77.904C20.021,74.016,14.549,73.656,14.117,77.112L14.117,131.328 14.045,131.328C13.829,134.928 10.805,137.88 7.061,137.88 3.317,137.88 0.293,134.928 0.077,131.328L0.005,131.328 0.005,130.896 0.005,130.824 0.005,130.752 0.005,60.624C-0.283,49.896,12.461,37.944,22.901,38.232L63.437,38.232 63.509,38.232C63.725,38.16 63.941,38.16 64.157,38.16 75.245,38.16 84.389,47.304 84.389,58.392 84.389,59.256 84.317,60.12 84.173,60.912L84.173,130.608 84.173,130.68 84.173,130.752 84.173,131.112C83.957,134.856 80.789,137.88 76.973,137.88 73.229,137.88 70.061,134.856 69.845,131.112L69.773,131.112 69.773,77.832C69.341,74.304,63.725,74.664,63.581,78.624L63.581,128.088 63.581,127.44 63.581,127.584 63.581,127.728 63.581,128.304C63.221,133.704,58.685,137.88,53.213,137.88L30.605,137.88C25.061,137.88,20.525,133.704,20.165,128.304L20.165,78.336z M42.845,0C33.845,0 26.501,7.344 26.501,16.344 26.501,25.344 33.845,32.688 42.845,32.688 51.845,32.688 59.189,25.344 59.189,16.344 59.189,7.344 51.845,0 42.845,0" Fill="#FF99CC00" Height="137.88" Canvas.Left="99.643" Canvas.Top="63.648" Width="84.389"/>
                </Canvas>
            </VisualBrush.Visual>
        </VisualBrush>
    </Application.Resources>

</Application>

Answer 1

I'm still not sure I understand the question. However, I do know for sure that the C# code you posted won't show anything, because the Rectangle object's width and height are both their default value of 0. An empty rectangle won't draw anything.

When I create a simple window with an empty canvas (using your provided resource):

<Window x:Class="TestSO28203571AddChildCodeBehind.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">

  <Window.Resources>
    <VisualBrush  x:Key="Alcanc" x:Shared="false" Stretch="Uniform">
      <!--Imagem vectorial do Alcance lateral esquerdo-->
      <VisualBrush.Visual>
        <Canvas>
          <Path Data="M120.024,239.976C186.12,239.976 239.976,186.048 239.976,119.952 239.976,53.856 186.12,0 120.024,0 53.928,0 0,53.856 0,119.952 0,186.048 53.928,239.976 120.024,239.976" Fill="White" Height="239.976" Canvas.Left="0" Canvas.Top="0" Width="239.976"/>
          <Path Data="M84.096,38.304L84.096,138.528 71.784,138.528C66.312,138.528 61.776,134.208 61.416,128.808 61.416,87.912 61.344,119.304 61.344,78.48 59.832,67.608 54.36,59.616 44.424,53.856L3.6,28.512C1.512,27,0.072,24.696,0,22.32L0,22.032C0.072,21.096 0.288,20.16 0.792,19.152 2.736,15.264 8.208,14.832 10.944,16.632L13.68,17.928C29.448,24.696,43.416,30.6,59.184,37.368L59.184,37.44 64.224,38.304 64.944,38.304 65.592,38.304z M84.096,0C75.096,0 67.752,7.416 67.752,16.416 67.752,25.416 75.096,32.76 84.096,32.76z M84.096,138.528L84.096,38.304 104.832,38.304 105.408,38.304C116.568,38.304 125.712,47.376 125.712,58.536 125.712,59.4 125.64,60.192 125.496,61.056L125.496,131.184C125.496,131.256,125.568,131.256,125.568,131.328L125.496,131.4 125.496,131.76C125.28,135.504 122.112,138.528 118.296,138.528 114.48,138.528 111.384,135.504 111.096,131.76L111.096,77.976C110.664,74.448,104.976,74.808,104.832,78.768L104.832,124.704 104.904,124.704 104.904,127.944 104.904,128.088 104.904,128.232 104.904,128.808 104.832,128.808C104.472,134.208,99.936,138.528,94.464,138.528z M84.096,32.76C93.168,32.76 100.512,25.416 100.512,16.416 100.512,7.416 93.168,0 84.096,0z" Fill="#FFCCCCCC" Height="138.528" Canvas.Left="58.464" Canvas.Top="63" Width="125.712"/>
          <Path Data="M42.017,15.974L3.281,50.246C1.985,51.182 -1.687,56.87 0.905,60.398 3.137,63.638 7.169,63.854 10.409,62.198L51.737,37.646C54.113,36.134 56.921,35.99 60.017,36.782 60.233,37.862 60.449,39.014 60.593,40.166L60.593,87.758C60.449,95.534,64.913,99.206,70.385,99.782L93.929,99.782C100.265,99.638,104.081,93.95,104.081,89.558L104.081,89.414 104.009,40.454C104.225,36.494,109.841,36.134,110.273,39.662L110.273,92.942C110.561,96.686 113.657,99.71 117.473,99.71 121.289,99.71 124.457,96.686 124.673,92.942L124.673,92.582 124.673,92.51 124.673,92.438 124.673,22.814C124.817,21.95 124.817,21.158 124.817,20.294 124.817,9.134 115.745,0.062 104.585,0.062L104.009,0.062 64.841,0.062 64.193,0.062 63.545,0.062C51.593,-1.09,42.521,14.03,42.017,15.974" Fill="#FFCCCCCC" Height="99.783" Canvas.Left="59.215" Canvas.Top="101.818" Width="124.817"/>
          <Path Data="M6.264,12.6C9.792,12.6 12.6,9.72 12.6,6.264 12.6,2.808 9.792,0 6.264,0 2.808,0 0,2.808 0,6.264 0,9.72 2.808,12.6 6.264,12.6" Fill="#FF3399FF" Height="12.6" Canvas.Left="55.872" Canvas.Top="123.12" Width="12.6"/>
          <Path Data="F1M0,9.144L9.216,0 9.216,6.912 43.992,6.912 43.992,11.664 9.216,11.664 9.216,18.36z" Fill="#FF3399FF" Height="18.36" Canvas.Left="98.928" Canvas.Top="38.376" Width="43.992"/>
          <Path Data="M20.165,78.264L20.165,77.904C20.021,74.016,14.549,73.656,14.117,77.112L14.117,131.328 14.045,131.328C13.829,134.928 10.805,137.88 7.061,137.88 3.317,137.88 0.293,134.928 0.077,131.328L0.005,131.328 0.005,130.896 0.005,130.824 0.005,130.752 0.005,60.624C-0.283,49.896,12.461,37.944,22.901,38.232L63.437,38.232 63.509,38.232C63.725,38.16 63.941,38.16 64.157,38.16 75.245,38.16 84.389,47.304 84.389,58.392 84.389,59.256 84.317,60.12 84.173,60.912L84.173,130.608 84.173,130.68 84.173,130.752 84.173,131.112C83.957,134.856 80.789,137.88 76.973,137.88 73.229,137.88 70.061,134.856 69.845,131.112L69.773,131.112 69.773,77.832C69.341,74.304,63.725,74.664,63.581,78.624L63.581,128.088 63.581,127.44 63.581,127.584 63.581,127.728 63.581,128.304C63.221,133.704,58.685,137.88,53.213,137.88L30.605,137.88C25.061,137.88,20.525,133.704,20.165,128.304L20.165,78.336z M42.845,0C33.845,0 26.501,7.344 26.501,16.344 26.501,25.344 33.845,32.688 42.845,32.688 51.845,32.688 59.189,25.344 59.189,16.344 59.189,7.344 51.845,0 42.845,0" Fill="#FF99CC00" Height="137.88" Canvas.Left="99.643" Canvas.Top="63.648" Width="84.389"/>
        </Canvas>
      </VisualBrush.Visual>
    </VisualBrush>

  </Window.Resources>

  <Canvas x:Name="canvas1" />
</Window>

And then I declare MainWindow like this:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        Rectangle rect = new Rectangle
        {
            VerticalAlignment = VerticalAlignment.Center,
            HorizontalAlignment = HorizontalAlignment.Center,
            Fill = (Brush)FindResource("Alcanc"),
            Width = 200,
            Height = 150
        };

        canvas1.Children.Add(rect);
    }
}

Your graphic is drawn correctly. Well, it's drawn…I don't actually know what size you wanted it. But the key is, you need to specify a size.