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

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 に答える
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 に答える