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

Question

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

我的意思是，我会使用一个堆栈面板，但我知道这不是一个堆栈面板，因为它不能将文本块分成几行。

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

Answer 1

之间适当的间距你已经看过在XAML中

<Run /> 

元素？你可以做格式化和更多。

其接近你的形象，当然不是完美:)。问题是，你想绑定所有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>