Skip to content

ImageGenerator creates PNG images from XAML templates. Use it to put text onto buttons or any other purpose where you need to generate images based on runtime data.

License

Notifications You must be signed in to change notification settings

jwynia/ImageGenerator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ImageGenerator

ImageGenerator creates PNG images from XAML templates. Use it to put text onto buttons or any other purpose where you need to generate images based on runtime data.

I've used it mostly to generate buttons that more easily match mockups than fiddling with CSS, but theoretically, most XAML should work. Any fonts will need to be installed on the machine where this code runs in order for it to be properly used.

Usage

After installing the package, you'll need to create XAML templates for the types of images you want to create. A basic button is included as a sample.

<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" mc:Ignorable="d">
<Grid x:Name="LayoutRoot" HorizontalAlignment="Left" VerticalAlignment="Top">
    <Button HorizontalAlignment="Center" BorderThickness="0" VerticalAlignment="Center" FontFamily="Calibri" FontSize="13" FontWeight="Bold">
        <Button.Background>
            <SolidColorBrush Color="#153E7E"/>
        </Button.Background>
        <Border Margin="2" BorderBrush="#ffffff" BorderThickness="1" Padding="5">
            <TextBlock Text="@Model.Text.ToUpper()" Foreground="#ffffff" Padding="40, 0, 40, 0"/>
        </Border>
    </Button>
</Grid>
</UserControl>

Standard Razor code is used to put dynamic data into the image. The template can reference properties on an object you'll provide when you call the ImageGenerator. That object is available in your template as "Model" similar to how ASP.NET MVC ViewModels are.

To get a byte array to do with as you please (save it yourself, serve it up directly, cache, etc.):

string xamlString = File.ReadAllText("SampleTemplates/BlueButton.xaml");
string imgOutputFileName = "BlueButton.png";

dynamic viewModel = new ExpandoObject();
viewModel.Text = "Add to Cart";
byte[] image = ImageGenerator.GenerateImage(xamlString, viewModel);

To generate a file, add the full path to where you want the PNG saved as a 3rd parameter and call the GenerateImageFile() method instead:

string xamlString = File.ReadAllText("SampleTemplates/BlueButton.xaml");
string imgOutputFileName = "BlueButton.png";

dynamic viewModel = new ExpandoObject();
viewModel.Text = "Add to Cart";
                       
String imageOutputPath = Directory.CreateDirectory("Output").FullName;
String fullFileName = Path.Combine(imageOutputPath,imgOutputFileName);

byte[] imageFile = ImageGenerator.GenerateImageFile(xamlString, viewModel, fullFileName);

When generating the file, you'll still get back the byte array, but the file will be sitting in the place you specify.

About

ImageGenerator creates PNG images from XAML templates. Use it to put text onto buttons or any other purpose where you need to generate images based on runtime data.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages