CODEWITHSUNDEEP
c#wpfxamldatatemplatemicrosoft-metro
Darf Zon
Darf Zon

Reputation: 6378

How to imitate the following template made in HTML to XAML

The following image was created using HTML in a METRO application. But right now, I'm working with C# with METRO APPLICATION, and until I know from XAML I don't know how to imitate the following template.

I mean, I'd use a stack panel but I know that's not a stack panel because it cannot divide the textblock into lines.

This should be a trick to do this in c#.

enter image description here

Upvotes: 0

Views: 150

Answers (3)

blindmeis
blindmeis

Reputation: 22445

did you have looked at the 

<Run />

element in xaml? you can do formatting and much more with it.

enter image description here

its close to your image, but of course not perfect :). the question is, do you want to bind all 3 text? 

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

Upvotes: 2

Eirik
Eirik

Reputation: 4215

This bit of XAML will mimic the image if that's what you need..

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

Upvotes: 0

Haris Hasan
Haris Hasan

Reputation: 30107

You should not use a single textblock for complete text. Rather use more than one to achieve this.

This layout can be achieved in many ways

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

Use margins for proper spacing between elements

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

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

Upvotes: 0

Related Questions