0

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

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

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

在此处输入图像描述

4

3 回答 3

2

你看过

<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>
于 2012-07-11T05:33:56.863 回答
0

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

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

<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
于 2012-07-11T05:28:24.070 回答
0

如果您需要，这部分 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>
于 2012-07-11T07:38:44.023 回答