CODEWITHSUNDEEP
c#xamlwindows-8
Depechie
Depechie

Reputation: 6142

Image with border ontop of image in flipview

Example

How would I create the following image example in XAML? ( so a green overlay on top of an image ) When I add an image and a border ( with inside it a textblock ), the border will also always stretch itself to full height instead of the needed height for the text in the textblock.

It's contained in a Flipview. But a normal example in a grid will do also.

Upvotes: 1

Views: 612

Answers (1)

ZombieSheep
ZombieSheep

Reputation: 29953

Take a look at the VS2011 / 12 grid application templates. In Common\StandardStyles.xaml you'll find all the styles for the GridView items on a hub screen, and a lot of them follow this kind of pattern. For example, the "Standard250x250ItemTemplate" style is defined as follows...

<DataTemplate x:Key="Standard250x250ItemTemplate">
    <Grid HorizontalAlignment="Left" Width="250" Height="250">
        <Border Background="{StaticResource ListViewItemPlaceholderRectBrush}">
            <Image Source="{Binding Image}" Stretch="UniformToFill"/>
        </Border>
        <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundBrush}">
            <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayTextBrush}" Style="{StaticResource TitleTextStyle}" Height="60" Margin="15,0,15,0"/>
            <TextBlock Text="{Binding Subtitle}" Foreground="{StaticResource ListViewItemOverlaySecondaryTextBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
        </StackPanel>
    </Grid>
</DataTemplate>

Upvotes: 1

Related Questions