Display at most 3 items, and each item has its own location
===

It's probably a long story, but I really have no idea of solving it.

A company produces 3 categories of products namely food, drink, and other, and under each category there are several products. For example, the food cateogory has products of Chocolate, biscuit; the drink category has products of milk, tea, coke; the other category has products of book, clock, etc. 

But **at a certain peroid, the company at most makes 3 kinds of products from distinct categories.** For example, in January the company produced Chocolate, tea, and clock; in February it produced coke and book.

    class ProductBase
    {
        protected ProductBase(string name, double price)
        {
            Name = name;
            Price = price;
        }
    
        public int Type { get; protected set; }
    
        public string Name { get; private set; }
    
        public double Price { get; private set; }
    }
    
    class Food : ProductBase
    {
        protected Food(string name, double price)
            : base(name,price)
        { Type = 1; }
    
        public bool IsFried { get; set; }
    }
    
    class Drink : ProductBase
    {
        protected Drink(string name, double price)
            : base(name,price)
        { Type = 2; }
    
        public bool IsLowFat { get; set; }
    }
    
    class Other : ProductBase
    {
        protected Other(string name, double price)
            : base(name,price)
        { Type = 3; }
    }

Now I need to display the products. For convenience, food should always be in the first location, drink second, and other third. Plus, **even if there's no food product, its place cannot hold drink or other product.**

Here are all three products. LF indicates Green Tea is LowFat.
![3 products][1]

If there are only two products, it should present like this.
![2 products][2]

**Each line should have the same width and height.** IsLowFat/IsFried sits at 1st column, Name at 2nd, Price at 3th. **The width of the second column can change so it fits the available width of the container.**

In the demo above, I use this code, but it is very ugly and **the FontSize cannot glow according to the window size.** I tried ViewBox but I cannot handle it.

    <Window x:Class="WpfApplication1.Window1"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="Window1" Height="190" Width="402" FontSize="30">
        <UniformGrid Rows="3" >
            <DockPanel>
                <TextBlock Width="50"  Text="" Margin="0,0,5,0" DockPanel.Dock="Left" />
                <TextBlock DockPanel.Dock="Right" Text=""/>
                <TextBlock TextAlignment="Left" Text=""/>
            </DockPanel>
            <DockPanel>
                <TextBlock Width="50" Text="LF" Margin="0,0,5,0" DockPanel.Dock="Left" />
                <TextBlock DockPanel.Dock="Right" Text="$2"/>
                <TextBlock TextAlignment="Left" Text="Green Tea"/>
            </DockPanel>
            <DockPanel>
                <TextBlock  Width="50" Text="" Margin="0,0,5,0" DockPanel.Dock="Left" />
                <TextBlock DockPanel.Dock="Right" Text="$7"/>
                <TextBlock TextAlignment="Left" Text="Beautiful Clock"/>
            </DockPanel>
        </UniformGrid>
    </Window>

So what's your suggestion? What's the best way to meet my requirements? Any insight is appreciated.

  [1]: http://i.stack.imgur.com/0ie6h.png
  [2]: http://i.stack.imgur.com/0rEFl.png