Save Stackpanel's content as PNG image

Question

Save Stackpanel's content as PNG image

Pratham Jain 351

Hi All,

I have a stackpanel control which displays four textblocks in vertical orientation.

User's image

The second textbox displays the barcode generated using code39 font. I want to print all these four textblocks on barcode stickers for scanning. For this I am converting the stackpanel to PNG image with specific height and width and saving the image on disk like below:

private void SaveStackPanelAsPng(StackPanel panel, string filename, int pixelWidth = 500, int pixelHeight = 150)
{
    // Ensure the panel has its layout calculated correctly
    // 1. Measure and Arrange the panel (important if it's not fully rendered)
    // 1. Measure and Arrange the element to the desired size
    panel.Measure(new Size(pixelWidth, pixelHeight));
    panel.Arrange(new Rect(0, 0, pixelWidth, pixelHeight));
    // 2. Render the element to a RenderTargetBitmap
    RenderTargetBitmap renderBitmap = new RenderTargetBitmap(
        pixelWidth, pixelHeight, 96, 96, PixelFormats.Pbgra32); // Use 96 DPI (standard WPF DPI)
    renderBitmap.Render(panel);
    // 3. Encode the bitmap as PNG
    PngBitmapEncoder encoder = new PngBitmapEncoder();
    encoder.Frames.Add(BitmapFrame.Create(renderBitmap));
    // 4. Save to a file stream
    using (FileStream stream = File.Create(filename))
    {
        encoder.Save(stream);
    }
}

But after saving it as PNG it is not displaying any barcode information (or displaying 0 barcodes) in image. Please advise how can I fix the same.

Regards,

Pratham

Viorel 126.8K Reputation points

2026-02-21T23:26:48.5633333+00:00

Does it work with other fonts (even unsuitable ones)?

Pratham Jain 351

Yes, it is working for other fonts. It is also working with this font when I am printing it to PDF file:

PrintDialog barcodePrintDialog = new PrintDialog();
try
{
    barcodePrintDialog.PageRangeSelection = PageRangeSelection.AllPages;
    barcodePrintDialog.UserPageRangeEnabled = true;
    if (barcodePrintDialog.ShowDialog() == true)
        barcodePrintDialog.PrintVisual(this.stkpnlBarcodePreview, "Barcode");
}

Regards,

Pratham

Pratham Jain 351 Reputation points

2026-02-22T01:36:36.6533333+00:00

Also it needs to be print in array of rows and columns based on page size and label size instead of single PNG.

Regards,

Pratham

Answer accepted by question author

0 additional answers

Your answer

Viorel 126.8K Reputation points

2026-02-21T23:26:48.5633333+00:00

Does it work with other fonts (even unsuitable ones)?
Pratham Jain 351 Reputation points

2026-02-22T00:23:06.1366667+00:00

Yes, it is working for other fonts. It is also working with this font when I am printing it to PDF file:

PrintDialog barcodePrintDialog = new PrintDialog(); try { barcodePrintDialog.PageRangeSelection = PageRangeSelection.AllPages; barcodePrintDialog.UserPageRangeEnabled = true; if (barcodePrintDialog.ShowDialog() == true) barcodePrintDialog.PrintVisual(this.stkpnlBarcodePreview, "Barcode"); }

Regards,

Pratham
Pratham Jain 351 Reputation points

2026-02-22T01:36:36.6533333+00:00

Also it needs to be print in array of rows and columns based on page size and label size instead of single PNG.

Regards,

Pratham

Answer 1

Danny Nguyen (WICLOUD CORPORATION) 6,615 Microsoft External Staff Moderator

Hi @Pratham Jain,

Your export code is OK. The issue is typically that the “barcode” is generated by a Code39 font, and when WPF renders to a RenderTargetBitmap it will only draw the bars if that exact font is available and actually used. If WPF can’t resolve the Code39 font, it silently falls back to a normal font and the barcode bars won’t appear in the saved PNG.

Please check

Is the Code39 font installed on the same machine where you generate the PNG (dev PC / server / VM)?
Are you explicitly setting the barcode TextBlock’s FontFamily to the Code39 font (with the correct family name)?

Example (works if the font is installed and the family name matches):


<TextBlock Text="*RI000001*" FontFamily="Free 3 of 9" FontSize="48" />

To avoid relying on the font being installed on every machine, you can try embed the Code39 font to your WPF app

Add the .ttf (Code39) to your project, e.g. Fonts/Code39.ttf
Select the TTF in Solution Explorer and set Build Action = Resource
Reference it via pack URI (important: the part after # must match the font’s internal family name, not necessarily the file name):


<TextBlock

    Text="*RI000001*"

    FontSize="48"

    FontFamily="pack://application:,,,/YourAssemblyName;component/Fonts/#Your Code39 Font Family Name" />

You can read more on that approach here Packaging Fonts with Applications.

Let me know if this works for you.

Pratham Jain 351 Reputation points

2026-02-23T12:08:06.7366667+00:00
Hi @Danny Nguyen (WICLOUD CORPORATION) ,

Thank you for your suggestion. Yes the code39 font is installed on same machine(dev PC) where I have generated the PNG. Yes I am explicitly setting the barcode TextBlock’s FontFamily to the Code39 font.

I have also tried with another approach by embedding the Code39 font to my WPF Application as suggested by you.

XAML for barcode Textblock:

<TextBlock Text="{Binding ElementName= cmbItem, Path= SelectedValue, Mode= OneWay}" FontFamily="pack://application:,,,/Inventory;component/Fonts/#Code39AzaleaWide3" FontSize="{Binding ElementName= cmbItemFontSize, Path= Text, Mode= OneWay}"></TextBlock>

In UI, textblock again displayed the barcode for the selected item according to this font:

But after exporting the stackpanel to PNG on clicking the "Print" button it is generating the below transparent file:

After reading this file through several online scanners they are displaying that it does not contain any barcode.

Regards,

Pratham
Danny Nguyen (WICLOUD CORPORATION) 6,615 Reputation points Microsoft External Staff Moderator

2026-02-24T02:54:08.03+00:00
If it renders as a barcode on-screen (with the embedded font), then the font isn’t the problem anymore. At this point the only way to diagnose it reliably is to see exactly what is being rendered.

Can you paste the full XAML of the StackPanel you are exporting (the panel and all 4 TextBlocks), including any relevant styles/templates (Background/Foreground, theme resources, etc.)?

Also please confirm these details:

Are you exporting the same instance that is displayed on screen (the exact StackPanel from the visual tree), or are you creating a new StackPanel in code for printing?

What are the actual pixel dimensions of the saved PNG (width × height) and its DPI?

The image of the transparent PNG doesn't look like it is transparent to me. Is this a screen shot or the actual resulting image? From what I've checked, transparency doesn't seem to interfere with online barcode scans.

Pratham Jain 351

Please find below the XAML for StackPanel which I am exporting as PNG:

<StackPanel Name="stkpnlBarcodePreview" Height="Auto" Width="auto">
                    <TextBlock Text="{Binding ElementName= txtBarcodeHeader, Path= Text, Mode= OneWay}" FontFamily="{Binding ElementName= cmbBarcodeHeaderFont, Path= Text, Mode= OneWay}" FontSize="{Binding ElementName= cmbBarHeaderFontSize, Path= Text, Mode= OneWay}" Margin="5,5,5,5"></TextBlock>
                    <!--<TextBlock Text="{Binding ElementName= cmbItem, Path= SelectedValue, Mode= OneWay}" FontFamily="{Binding ElementName= cmbItemBarcodeFont, Path= Text, Mode= OneWay}" FontSize="{Binding ElementName= cmbItemFontSize, Path= Text, Mode= OneWay}" Margin="5,5,5,5"></TextBlock>-->
                    <TextBlock Text="{Binding ElementName= cmbItem, Path= SelectedValue, Mode= OneWay}" FontFamily="pack://application:,,,/Inventory;component/Fonts/#Code39AzaleaWide3" FontSize="{Binding ElementName= cmbItemFontSize, Path= Text, Mode= OneWay}" Margin="5,5,5,5"></TextBlock>
                    <TextBlock Text="{Binding ElementName= txtblkBarcodeValue, Path= Text, Mode= OneWay}" FontFamily="{Binding ElementName= cmbBarcodeValueFont, Path= Text, Mode= OneWay}" FontSize="{Binding ElementName= cmbBarcodeValueFontSize, Path= Text, Mode= OneWay}" Margin="5,2,5,5"></TextBlock>
                    <TextBlock Text="{Binding ElementName= txtBarcodeFooter, Path= Text, Mode= OneWay}" FontFamily="{Binding ElementName= cmbBarcodeFooterFont, Path= Text, Mode= OneWay}" FontSize="{Binding ElementName= cmbBarcodeFooterFontSize, Path= Text, Mode= OneWay}" Margin="5,5,5,5"></TextBlock>
</StackPanel>

I am exporting the same instance that is displayed on screen (the exact StackPanel from the visual tree).

Meanwhile I have also tried with creating the new Stackpanels in code and adding them to Grid control and then passing the grid to PrintDialog.PrintVisual() method like below

These stackpanels have content as four textblocks with same properties that are displayed on screen

 private void AddGridandStackpanel()
        {
            var grid = new Grid();
            grid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1, GridUnitType.Star) });
            grid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1, GridUnitType.Star) });
            grid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1, GridUnitType.Star) });
            grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) });
            grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) });
            grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) });
            for (int i = 0; i < 3; i++)
            {
                for (int j = 0; j < 3; j++)
                {
                    var newStackPanel = new StackPanel();
                    foreach (UIElement child in this.stkpnlBarcodePreview.Children)
                    {
                        if (child is System.Windows.Controls.TextBlock)
                        {
                            var originalTextBlock = (TextBlock)child;
                            System.Windows.Controls.TextBlock newTextBlock = new System.Windows.Controls.TextBlock
                            {
                                Text = originalTextBlock.Text,
                                Margin = originalTextBlock.Margin,
                                FontSize = originalTextBlock.FontSize,
                                FontFamily = originalTextBlock.FontFamily
                            };
                            newStackPanel.Children.Add(newTextBlock);
                        }
                    }
                    Grid.SetColumn(newStackPanel, j);
                    Grid.SetRow(newStackPanel, i);
                    grid.Children.Add(newStackPanel);
                }
            }
            PrintDialog barcodePrintDialog = new PrintDialog();
            double printableHeight = barcodePrintDialog.PrintableAreaHeight;
            double printableWidth = barcodePrintDialog.PrintableAreaWidth;
            grid.Measure(new Size(printableWidth, printableHeight));
            grid.Arrange(new Rect(0, 0, printableWidth, printableHeight));
            grid.UpdateLayout();
            barcodePrintDialog.PageRangeSelection = PageRangeSelection.AllPages;
            barcodePrintDialog.UserPageRangeEnabled = true;
            if (barcodePrintDialog.ShowDialog() == true)
                barcodePrintDialog.PrintVisual(grid, "Barcode");
        }

This approach is working fine and I am able to read 9 barcodes according to above code.

The actual pixel dimensions of the saved PNG (width × height) is 500 X 150 and its DPI is 96.

Regards,

Pratham

Pratham Jain 351

Hi @Danny Nguyen (WICLOUD CORPORATION)

Please find the full XAML of page:

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="auto"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="auto"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="1.5*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"></RowDefinition>
            <RowDefinition Height="auto"></RowDefinition>
            <RowDefinition Height="auto"></RowDefinition>
            <RowDefinition Height="auto"></RowDefinition>
            <RowDefinition Height="auto"></RowDefinition>
            <RowDefinition Height="auto"></RowDefinition>
    </Grid.RowDefinitions>
        <TextBlock Text="Item:" Margin="10,10,5,5"></TextBlock>
        <ComboBox Grid.Column="1" Name="cmbItem" DisplayMemberPath="ItemName" SelectedValuePath="ItemCode" Margin="10,10,5,5"></ComboBox>
        <TextBlock Grid.Column="2" Text="Font:" Margin="10,10,5,5"></TextBlock>
        <ComboBox Grid.Column="3" Name="cmbItemBarcodeFont" Margin="10,10,5,5"></ComboBox>
        <TextBlock Grid.Column="4" Text="Font Size:" Margin="10,10,5,5"></TextBlock>
        <ComboBox Grid.Column="5" Name="cmbItemFontSize" Margin="10,10,5,5">
            <ComboBoxItem Content="8" />
            <ComboBoxItem Content="9" />
            <ComboBoxItem Content="10" />
            <ComboBoxItem Content="11" />
            <ComboBoxItem Content="12" />
            <ComboBoxItem Content="14" />
            <ComboBoxItem Content="16" />
            <ComboBoxItem Content="18" />
            <ComboBoxItem Content="20" />
            <ComboBoxItem Content="22" />
            <ComboBoxItem Content="24" />
            <ComboBoxItem Content="26" />
            <ComboBoxItem Content="28" />
            <ComboBoxItem Content="36" />
            <ComboBoxItem Content="48" />
            <ComboBoxItem Content="72" />
        </ComboBox>
        <TextBlock Grid.Row="1" Text="Barcode Value:" Margin="10,10,5,5"></TextBlock>
        <TextBlock Grid.Column="1" Grid.Row="1" Name="txtblkBarcodeValue" Text="{Binding ElementName= cmbItem, Path= SelectedValue, Mode= OneWay}" Margin="10,10,5,5"></TextBlock>
        <TextBlock Grid.Column="2" Grid.Row="1"  Text="Font:" Margin="10,10,5,5"></TextBlock>
        <ComboBox Grid.Column="3" Grid.Row="1" Name="cmbBarcodeValueFont" Margin="10,10,5,5"></ComboBox>
        <TextBlock Grid.Column="4" Grid.Row="1"  Text="Font Size:" Margin="10,10,5,5"></TextBlock>
        <ComboBox Grid.Column="5" Grid.Row="1" Name="cmbBarcodeValueFontSize" Margin="10,10,5,5">
            <ComboBoxItem Content="8" />
            <ComboBoxItem Content="9" />
            <ComboBoxItem Content="10" />
            <ComboBoxItem Content="11" />
            <ComboBoxItem Content="12" />
            <ComboBoxItem Content="14" />
            <ComboBoxItem Content="16" />
            <ComboBoxItem Content="18" />
            <ComboBoxItem Content="20" />
            <ComboBoxItem Content="22" />
            <ComboBoxItem Content="24" />
            <ComboBoxItem Content="26" />
            <ComboBoxItem Content="28" />
            <ComboBoxItem Content="36" />
            <ComboBoxItem Content="48" />
            <ComboBoxItem Content="72" />
        </ComboBox>
        <!--<Label Grid.Column="6" Grid.Row="0" Grid.ColumnSpan="2" Grid.RowSpan="5" Name="lblBarCode" Content="{Binding ElementName= cmbItem, Path= SelectedValue}" FontFamily="{Binding ElementName= cmbItemFont, Path= Text}"   Margin="10,10,5,5"></Label>-->
    <GroupBox Grid.Column="6" Grid.Row="0" Grid.ColumnSpan="2" Grid.RowSpan="5" Header="Preview" Margin="10,10,5,5">
        <Border BorderBrush="Gray" BorderThickness="1" CornerRadius="6" Margin="10,10,5,5" Height="auto" Width="auto">
            <StackPanel Name="stkpnlBarcodePreview" Height="Auto" Width="auto">
                <TextBlock Text="{Binding ElementName= txtBarcodeHeader, Path= Text, Mode= OneWay}" FontFamily="{Binding ElementName= cmbBarcodeHeaderFont, Path= Text, Mode= OneWay}" FontSize="{Binding ElementName= cmbBarHeaderFontSize, Path= Text, Mode= OneWay}" Margin="5,5,5,5"></TextBlock>
                <!--<TextBlock Text="{Binding ElementName= cmbItem, Path= SelectedValue, Mode= OneWay}" FontFamily="{Binding ElementName= cmbItemBarcodeFont, Path= Text, Mode= OneWay}" FontSize="{Binding ElementName= cmbItemFontSize, Path= Text, Mode= OneWay}" Margin="5,5,5,5"></TextBlock>-->
                <TextBlock Text="{Binding ElementName= cmbItem, Path= SelectedValue, Mode= OneWay}" FontFamily="pack://application:,,,/Inventory;component/Fonts/#Free 3 of 9 Extended" FontSize="{Binding ElementName= cmbItemFontSize, Path= Text, Mode= OneWay}" Margin="5,5,5,5"></TextBlock>
                <TextBlock Text="{Binding ElementName= txtblkBarcodeValue, Path= Text, Mode= OneWay}" FontFamily="{Binding ElementName= cmbBarcodeValueFont, Path= Text, Mode= OneWay}" FontSize="{Binding ElementName= cmbBarcodeValueFontSize, Path= Text, Mode= OneWay}" Margin="5,2,5,5"></TextBlock>
                <TextBlock Text="{Binding ElementName= txtBarcodeFooter, Path= Text, Mode= OneWay}" FontFamily="{Binding ElementName= cmbBarcodeFooterFont, Path= Text, Mode= OneWay}" FontSize="{Binding ElementName= cmbBarcodeFooterFontSize, Path= Text, Mode= OneWay}" Margin="5,5,5,5"></TextBlock>
            </StackPanel>
        </Border>
    </GroupBox>
    <TextBlock Grid.Row="2" Text="Barcode Header:" Margin="10,10,5,5"></TextBlock>
    <TextBox Grid.Column="1" Grid.Row="2" Name="txtBarcodeHeader" Text="{Binding ElementName= cmbItem, Path= SelectedItem.ItemName, Mode= OneWay}" Margin="10,10,5,5"></TextBox>
        <TextBlock Grid.Column="2" Grid.Row="2"  Text="Font:" Margin="10,10,5,5"></TextBlock>
        <ComboBox Grid.Column="3" Grid.Row="2" Name="cmbBarcodeHeaderFont" Margin="10,10,5,5">
        </ComboBox>
        <TextBlock Grid.Column="4" Grid.Row="2" Text="Font Size:" Margin="10,10,5,5"></TextBlock>
        <ComboBox Grid.Column="5" Grid.Row="2" Name="cmbBarcodeHeaderFontSize" Margin="10,10,5,5">
        <ComboBoxItem Content="8" />
        <ComboBoxItem Content="9" />
        <ComboBoxItem Content="10" />
        <ComboBoxItem Content="11" />
        <ComboBoxItem Content="12" />
        <ComboBoxItem Content="14" />
        <ComboBoxItem Content="16" />
        <ComboBoxItem Content="18" />
        <ComboBoxItem Content="20" />
        <ComboBoxItem Content="22" />
        <ComboBoxItem Content="24" />
        <ComboBoxItem Content="26" />
        <ComboBoxItem Content="28" />
        <ComboBoxItem Content="36" />
        <ComboBoxItem Content="48" />
        <ComboBoxItem Content="72" />
    </ComboBox>
        <TextBlock Grid.Row="3" Text="Barcode Footer:" Margin="10,10,5,5"></TextBlock>
        <TextBox Grid.Column="1" Grid.Row="3" Name="txtBarcodeFooter" Text="{Binding ElementName= cmbItem, Path= SelectedItem.ItemPrice}" Margin="10,10,5,5"></TextBox>
        <TextBlock Grid.Column="2" Grid.Row="3"  Text="Font:" Margin="10,10,5,5"></TextBlock>
        <ComboBox Grid.Column="3" Grid.Row="3" Name="cmbBarcodeFooterFont" Margin="10,10,5,5">
        </ComboBox>
        <TextBlock Grid.Column="4" Grid.Row="3" Text="Font Size:" Margin="10,10,5,5"></TextBlock>
        <ComboBox Grid.Column="5" Grid.Row="3" Name="cmbBarcodeFooterFontSize" Margin="10,10,5,5">
        <ComboBoxItem Content="8" />
        <ComboBoxItem Content="9" />
        <ComboBoxItem Content="10" />
        <ComboBoxItem Content="11" />
        <ComboBoxItem Content="12" />
        <ComboBoxItem Content="14" />
        <ComboBoxItem Content="16" />
        <ComboBoxItem Content="18" />
        <ComboBoxItem Content="20" />
        <ComboBoxItem Content="22" />
        <ComboBoxItem Content="24" />
        <ComboBoxItem Content="26" />
        <ComboBoxItem Content="28" />
        <ComboBoxItem Content="36" />
        <ComboBoxItem Content="48" />
        <ComboBoxItem Content="72" />
    </ComboBox>
        <TextBlock Grid.Row="4" Text="Sticker Width(px):" Margin="10,10,5,5"></TextBlock>
        <TextBox Grid.Column="1" Grid.Row="4" Name="txtStickerWidth" Margin="10,11,5,4"></TextBox>
        <TextBlock Grid.Column="2" Grid.Row="4" Text="Sticker Height(px):" Margin="10,10,5,5"></TextBlock>
        <TextBox Grid.Column="3" Grid.Row="4" Name="txtStickerHeight" Margin="10,10,5,5"></TextBox>
        <Button Grid.Column="6" Grid.Row="5" Content="Print" HorizontalAlignment="Center" Margin="10,10,5,5" Height="24" Width="64" Click="Button_Click"></Button>
</Grid>

Danny Nguyen (WICLOUD CORPORATION) 6,615 Reputation points Microsoft External Staff Moderator

2026-02-24T10:57:20.6+00:00
Hi, thanks for the follow up.

A couple quick checks as I’m still reproducing this on my side :

Force high contrast on the exported panel

Your preview StackPanel doesn’t set a background/foreground, and it’s inside a themed GroupBox/Border. The PNG you showed looks low-contrast, and many decoders will fail even if it “looks like” a barcode.

Try temporarily:

stkpnlBarcodePreview Background="White"

barcode TextBlock Foreground="Black"

Increase effective resolution

500x150 @ 96 DPI is very low for a barcode (especially if the selected FontSize is small). PrintVisual() works because it prints at printer DPI; the bitmap export is screen-DPI.

As a quick test, keep the same code but export a much larger bitmap (e.g. 1500×450) or render at 300 DPI and see if scanners start decoding.

Test with a large barcode font size

Try barcode FontSize = 48 or 72 during export. If that suddenly decodes, it confirms this is resolution/scaling rather than font embedding.
Pratham Jain 351 Reputation points

2026-02-24T14:39:56.63+00:00

Hi,

After making the above changes it suddenly started decoding. So, shall I go with PNG image export of stackpanel

or

with PrintDialog.PrintVisual() which seems more easy approach:
Danny Nguyen (WICLOUD CORPORATION) 6,615 Reputation points Microsoft External Staff Moderator

2026-02-25T02:45:50.87+00:00

That's great, so that confirms the problem was contrast or resolution, not the font.

For printing barcode stickers, I’d recommend going with PrintDialog.PrintVisual() (or XPS printing) as the primary approach. It keeps the output as vector/text until the printer driver rasterizes it at the printer’s native DPI (203/300/600), which gives you the correct scaling that scanners need. It’s also simpler because you don’t have to babysit DPI, scaling, or anti-aliasing.

Use PNG export only if you specifically need an image file to store/share/send to another system. If you do use PNG, keep the set up consistent.

So: PrintVisual for printing reliability, PNG only when you actually need an image output.

Share via

Save Stackpanel's content as PNG image

0 additional answers

Your answer