WPF Custom control for receipt preview

Hi,

I have a requirement to show receipt preview as part of WPF page. Sample of receipt is attached.

Each line of text on the receipt can have different alignment(some center, some right or left) and color depending on configuration. Also, the number of lines can vary for each receipt type. I am wondering which controls to be used to effectively implement this. I can create labels dynamically in code behind depending on number of lines and align each one differently with different foreground color but just looking for an effective way if there is any. The width of receipt does NOT vary but length may. Font is same for all lines and all receipt types. Any ideas are really appreciated.

Thanks

It is normally better to avoid dynamically adding controls like labels or textblocks from your code behind. This type of code is difficult to read and almost impossible to test. Instead, you should use a view-model class (look up the MVVM pattern). Your view-model could have a property returning a list of ReceiptItem and then in your view (the XAML file) you make an ItemsControl and bind it to your list of ReceiptItems. Now you can create a template for the ReceiptItem class so that they show up a desired using Label, TextBlock, or whatever you decide is appropriate.

For example, in C# you would need two classes:

public class MyReceiptViewModel
{
    public List<ReceiptItem> ReceiptItems { get; set; }
}

public class ReceiptItem
{
    public string Content { get; set; }
    public bool IsHighlighted { get; set; }
}

Your view might look like (this assumes that you have an instance of MyReceiptViewModel as your data context):

<ItemsControl ItemsSource="{Binding ReceiptItems}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <TextBlock 
                Text="{Binding Content}" 
                Foreground="{Binding IsHighlighted, Converter={StaticResource MyColorFromBooleanConverter}}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>