如何模仿HTML中的以下模板到XAML

Question

以下图像是在METRO应用程序中使用HTML创建的。但是现在，我正在使用METRO APPLICATION与C＃合作，直到我从XAML了解到我不知道如何模仿以下模板。

我的意思是，我使用的是堆栈面板，但我知道它不是堆栈面板，因为它无法将文本块划分为多行。

这应该是在c＃中执行此操作的技巧。

Answer 1

你看过

吗？

<Run /> 

xaml中的

元素？您可以使用它进行格式化等。

它接近你的形象，但当然不完美:)。问题是，你想绑定所有3个文本吗？

<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>

Answer 2

您不应将单个文本块用于完整文本。而是使用多个来实现这一点。

这种布局可以通过多种方式实现

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>

    <StackPanel Orientation="Horizontal" Grid.Row="0">
         <Textblock Text="Today"/>
         <Textblock Text="Cappuccino Fudge"/>
    </StackPanel>

    <TextBlock Text="Cupcakes" Grid.Row="1"/>

</Grid>

使用边距在元素之间保持适当的间距

<StackPanel Orientation="Verical">
    <StackPanel Orientation="Horizontal">
             <Textblock Text="Today"/>
             <Textblock Text="Cappuccino Fudge"/>
    </StackPanel>

    <Textblock Text="Cupcakes"/>
</StackPanel

Answer 3

如果你需要的话，这一部分XAML将模仿图像。

<Grid Width="228" Height="65" Background="#750B1C">
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <TextBlock Text="TODAY" VerticalAlignment="Bottom" Foreground="LightGray" FontSize="8" Background="#5E0A17" Padding="3" Margin="10,0,5,0" />
    <TextBlock Text="Cappuccino Fudge" Grid.Column="1" VerticalAlignment="Bottom" Foreground="White" FontSize="16" />

    <TextBlock Text="Cupcakes" Grid.Row="1" Grid.ColumnSpan="2" Foreground="White" FontSize="16" Margin="10,0,0,0" />
</Grid>