WPFレシートプレビューのカスタムコントロール

Question

こんにちは、

私は、レシートプレビューをWPFページの一部として表示する必要があります。レシートのサンプルが添付されています。

レシート上の各テキスト行は、構成によっては異なるアライメント（中央、一部左右）と色が異なる場合があります。また、レシートの種類ごとに回線数が異なる場合もあります。私は、これを効果的に実装するためにどのコントロールを使うべきか疑問に思っています。私は線の数に応じてコードを動的に作成し、それぞれ異なる前景色で各ラベルを整列させることができますが、もしあれば効果的な方法を探しています。領収書の幅は変化しませんが、長さがあります。フォントはすべての行とすべてのレシートタイプで同じです。どんなアイディアも本当に感謝しています。

おかげ

Answer 1

背後にあるコードからラベルやテキストブロックのようなコントロールを追加する動的避けるために、通常より良いです。このタイプのコードは読みにくく、テストするのがほとんど不可能です。その代わりに、ビューモデルクラスを使用する必要があります（MVVMパターンを参照）。あなたのビューモデルはReceiptItemのリストを返すプロパティを持ち、ビュー（XAMLファイル）でItemsControlを作成し、それをReceiptItemのリストにバインドすることができます。 ReceiptItemクラスのテンプレートを作成して、Label、TextBlockなどを使用して、必要なものが表示されるようにすることができます。

たとえば、C＃で使用すると、2つのクラス必要があります：あなたのビューは（これは、あなたのデータコンテキストとしてMyReceiptViewModelのインスタンスを持っていることを前提とし）のように見えるかもしれません

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

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

は：

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