How to imitate the following template made in HTML to XAML

The following image was created using HTML in a METRO application. But right now, I'm working with C# with METRO APPLICATION, and until I know from XAML I don't know how to imitate the following template.

I mean, I'd use a stack panel but I know that's not a stack panel because it cannot divide the textblock into lines.

This should be a trick to do this in c#.

enter image description here

Solution

did you have looked at the

<Run />

element in xaml? you can do formatting and much more with it.

enter image description here

its close to your image, but of course not perfect :). the question is, do you want to bind all 3 text?

<Grid Width="250" Height="70" Background="#FF8D3838">
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>

    <TextBlock Grid.Row="0" VerticalAlignment="Bottom" Margin="20,0,5,0">
        <Run Text="  TODAY  " Background="#FF722828" Foreground="AntiqueWhite" /> 
        <Run Text=" Cappuccino Fudge" FontSize="20" Foreground="White"/>
    </TextBlock>
    <TextBlock Grid.Row="1" Text="CupCakes" Foreground="White" VerticalAlignment="Top" FontSize="20" Margin="20,0,5,0"/>   
</Grid>