如何将以下用 HTML 制作的模板模仿为 XAML答案

【问题标题】：How to imitate the following template made in HTML to XAML如何将以下用 HTML 制作的模板模仿为 XAML
【发布时间】：2012-07-11 05:23:19
【问题描述】：

以下图像是在 METRO 应用程序中使用 HTML 创建的。但是现在，我正在使用带有 METRO APPLICATION 的 C#，在我从 XAML 中知道之前，我不知道如何模仿以下模板。

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

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

【问题讨论】：

标签： c# wpf xaml datatemplate microsoft-metro

【解决方案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>

【讨论】：

是的，但我意识到我的文本块不能有背景属性。我正在处理那个

【解决方案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

【讨论】：

【解决方案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>

【讨论】：