HTML로 만든 다음 템플릿을 XAML로 모방하는 방법

다음 이미지는 METRO 응용 프로그램에서 HTML을 사용하여 만들어졌습니다. 하지만 지금은 METRO APPLICATION을 사용하여 C#을 사용하고 있으며 XAML에서 알기 전까지 다음 템플릿을 모방하는 방법을 알지 못합니다.HTML로 만든 다음 템플릿을 XAML로 모방하는 방법

스택 패널을 사용 하겠지만 스택 블록이 아니라는 것을 알고 있습니다. 스택 패널이 아니라 텍스트 블록을 줄로 나눌 수 없기 때문입니다.

이것은 C#에서 이것을 수행하는 트릭입니다.

enter image description here

출처

2012-07-11 Darf Zon

사이에 적절한 간격을위한 여러 가지 방법으로

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

사용 마진을 달성 할 수있다 당신은 XAML에서

<Run />

요소를 살펴 보았다 했습니까? 당신은 포맷팅 등을 할 수 있습니다.

enter image description here

는 완벽하지 이미지에 근접하지만, 물론 :). 질문은, 당신은 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-11 05:33:56 blindmeis

나는 지하철에서 작동하는지 잘 모릅니다. – blindmeis

예,하지만 저는 textblock이 백그라운드 속성을 가질 수 없다는 것을 알고있었습니다. 나는 그걸 다루고있다 –

고마워! 저건 완벽 해! –

당신은 전체 텍스트에 대해 하나 된 본체를 사용하지 말아야합니다. 오히려이를 달성하기 위해 둘 이상을 사용하십시오.

이 레이아웃

요소

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

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

출처

2012-07-11 05:28:24

즉 당신이 필요하다면 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-11 07:38:44 Eirik

HTML로 만든 다음 템플릿을 XAML로 모방하는 방법

답변

관련 문제