WPFDevelopers/src/WPFDevelopers.Samples.Shared/ExampleViews/WaterfallPanelExample.xaml at master · WPFDevelopersOrg/WPFDevelopers · GitHub

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<UserControl
    x:Class="WPFDevelopers.Samples.ExampleViews.WaterfallPanelExample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="clr-namespace:WPFDevelopers.Samples.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:vm="clr-namespace:WPFDevelopers.Samples.ViewModels"
    xmlns:wd="https://github.com/WPFDevelopersOrg/WPFDevelopers"
    d:DesignHeight="450"
    d:DesignWidth="800"
    mc:Ignorable="d">
    <UserControl.Resources>
        <vm:WaterfallPanelExampleVM x:Key="WaterfallPanelViewModel" />
        <Style x:Key="MasonryImage" TargetType="Image">
            <EventSetter Event="ImageFailed" Handler="Image_Failed" />
            <Setter Property="Stretch" Value="Uniform" />
            <Setter Property="HorizontalAlignment" Value="Stretch" />
            <Setter Property="VerticalAlignment" Value="Top" />
        </Style>
    </UserControl.Resources>
    <controls:CodeViewer Header="{Binding NavigateMenuItem.Name}">
        <TabControl>
            <TabItem Header="XAML">
                <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
                    <wd:WaterfallPanel
                        Margin="16"
                        MinColumnWidth="200"
                        Spacing="16">
                        <Image Source="https://images.unsplash.com/photo-1510001618818-4b4e3d86bf0f?w=523&amp;auto=format" Style="{StaticResource MasonryImage}" />
                        <Image Source="https://images.unsplash.com/photo-1507513319174-e556268bb244?w=523&amp;auto=format" Style="{StaticResource MasonryImage}" />
                        <Image Source="https://images.unsplash.com/photo-1474181487882-5abf3f0ba6c2?w=523&amp;auto=format" Style="{StaticResource MasonryImage}" />
                        <Image Source="https://images.unsplash.com/photo-1492778297155-7be4c83960c7?w=523&amp;auto=format" Style="{StaticResource MasonryImage}" />
                        <Image Source="https://images.unsplash.com/photo-1508062878650-88b52897f298?w=523&amp;auto=format" Style="{StaticResource MasonryImage}" />
                        <Image Source="https://images.unsplash.com/photo-1506158278516-d720e72406fc?w=523&amp;auto=format" Style="{StaticResource MasonryImage}" />
                        <Image Source="https://images.unsplash.com/photo-1552203274-e3c7bd771d26?w=523&amp;auto=format" Style="{StaticResource MasonryImage}" />
                        <Image Source="https://images.unsplash.com/photo-1528163186890-de9b86b54b51?w=523&amp;auto=format" Style="{StaticResource MasonryImage}" />
                        <Image Source="https://images.unsplash.com/photo-1727423304224-6d2fd99b864c?w=523&amp;auto=format" Style="{StaticResource MasonryImage}" />
                        <Image Source="https://images.unsplash.com/photo-1675090391405-432434e23595?w=523&amp;auto=format" Style="{StaticResource MasonryImage}" />
                        <Image Source="https://images.unsplash.com/photo-1554196967-97a8602084d9?w=523&amp;auto=format" Style="{StaticResource MasonryImage}" />
                        <Image Source="https://images.unsplash.com/photo-1491961865842-98f7befd1a60?w=523&amp;auto=format" Style="{StaticResource MasonryImage}" />
                        <Image Source="https://images.unsplash.com/photo-1721728613411-d56d2ddda959?w=523&amp;auto=format" Style="{StaticResource MasonryImage}" />
                        <Image Source="https://images.unsplash.com/photo-1731901245099-20ac7f85dbaa?w=523&amp;auto=format" Style="{StaticResource MasonryImage}" />
                        <Image Source="https://images.unsplash.com/photo-1617694455303-59af55af7e58?w=523&amp;auto=format" Style="{StaticResource MasonryImage}" />
                        <Image Source="https://images.unsplash.com/photo-1709198165282-1dab551df890?w=523&amp;auto=format" Style="{StaticResource MasonryImage}" />
                    </wd:WaterfallPanel>
                </ScrollViewer>
            </TabItem>
            <TabItem Header="MVVM">
                <wd:WaterfallItemsControl
                    Margin="16"
                    ItemsSource="{Binding Items, Source={StaticResource WaterfallPanelViewModel}}"
                    MinColumnWidth="200"
                    Spacing="16">
                    <wd:WaterfallItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Image Source="{Binding ImageUri}" Style="{StaticResource MasonryImage}" />
                        </DataTemplate>
                    </wd:WaterfallItemsControl.ItemTemplate>
                </wd:WaterfallItemsControl>
            </TabItem>
            <TabItem Header="Virtualization (5000)">
                <wd:WaterfallItemsControl
                    wd:ScrollViewerBehavior.IsBackToTopEnabled="True"
                    EstimatedItemHeight="210"
                    ItemsSource="{Binding LargeItems, Source={StaticResource WaterfallPanelViewModel}}"
                    MinColumnWidth="200"
                    Spacing="16">
                    <wd:WaterfallItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Border
                                Height="{Binding Height}"
                                Padding="16"
                                Background="{DynamicResource WD.PrimaryMouseOverBrush}"
                                BorderBrush="{DynamicResource WD.PrimaryBrush}"
                                BorderThickness="1"
                                CornerRadius="8">
                                <TextBlock
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    FontSize="20"
                                    Text="{Binding Title}" />
                            </Border>
                        </DataTemplate>
                    </wd:WaterfallItemsControl.ItemTemplate>
                </wd:WaterfallItemsControl>
            </TabItem>
        </TabControl>
        <controls:CodeViewer.SourceCodes>
            <controls:SourceCodeModel CodeSource="/WPFDevelopers.SamplesCode;component/ExampleViews/WaterfallPanelExample.xaml" CodeType="Xaml" />
            <controls:SourceCodeModel CodeSource="/WPFDevelopers.SamplesCode;component/ExampleViews/WaterfallPanelExample.xaml.cs" CodeType="CSharp" />
            <controls:SourceCodeModel
                CodeSource="/WPFDevelopers.SamplesCode;component/ViewModels/WaterfallPanelExampleVM.cs"
                CodeType="CSharp"
                Haader="ViewModel" />
        </controls:CodeViewer.SourceCodes>
    </controls:CodeViewer>
</UserControl>