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>

I am confused by _If the canvas already exists in the xaml it's easy to fill with a resouce. But if the the rectangle does not exist in the xaml already it does not show anything._ — kennyzx, Jan 29 '15 at 04:15
Please post [a _minimal_, _complete_ program](http://stackoverflow.com/help/mcve) that reliably demonstrates the issue. I tried filling in the gaps in your question, by creating a simple XAML-only WPF program, with a `Canvas` in a `Window`, containing a single `Rectangle` element initialized as you indicate above (i.e. centered alignment and using the brush you've shown), and the window is rendered as blank. Since it doesn't show anything when declared using only XAML, it doesn't surprise me it doesn't show anything when you use code-behind to create the same layout. — Peter Duniho, Jan 29 '15 at 07:47
[See here](http://stackoverflow.com/a/22325266/1136211) for an example how to do it the WPF way. — Clemens, Jan 29 '15 at 08:51
I ill post more code in the future for better understanding. Thx for the help Peter. — LucaCosta, Jan 29 '15 at 21:12

score 1 · Accepted Answer · answered Jan 29 '15 at 08:01

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.

dynamically add rectangle with resource fill in WPF

1 Answers1