Ghost1372

everything can be handy

ShyHeader

Property

Name
OverlayBrush
BackgroundImage
BackgroundImageOpacity
Title
Subtitle
Description
Profile
Footer

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<GridView ItemsSource="{x:Bind ViewModel.SampleImageAndTextData, Mode=OneWay}">
<GridView.Header>
    <dev:ShyHeader Title="Lorem Ipsum"
                    BackgroundImage="ms-appx:///Assets/Others/Abstract.jpg"
                    Description="Lorem ipsum dolor sit amet..."
                    Subtitle="dolor sit amet">
        <dev:ShyHeader.Profile>
            <PersonPicture Width="150"
                            Height="150"
                            ProfilePicture="ms-appx:///Assets/Others/Profile.png" />
        </dev:ShyHeader.Profile>
        <dev:ShyHeader.Footer>
            <StackPanel Orientation="Horizontal">
                <Button Content="Footer Button" />
                <Button Content="Footer Button" />
                <Button Content="Footer Button" />
            </StackPanel>
        </dev:ShyHeader.Footer>
    </dev:ShyHeader>
</GridView.Header>
<GridView.ItemTemplate>
    <DataTemplate x:DataType="model:SampleData">
        <Image Width="200"
                Height="200"
                Margin="4"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Source="{x:Bind ImageUrl}"
                Stretch="UniformToFill" />
    </DataTemplate>
</GridView.ItemTemplate>
</GridView>

If you place a GridView inside a ScrollViewer, the ShyHeader might not function correctly. In such cases, make sure to explicitly set a Height for the ShyHeader.

DevWinUI

Demo

you can run demo and see this feature.

0%