Skip to content

Commit 853358e

Browse files
niels9001marcelwgn
niels9001
and
marcelwgn
authored
[Binding] List-Detail-View sample (#2133)
<!--- Provide a general summary of your changes in the Title above --> ## Description <!--- Describe your changes in detail --> ## Motivation and Context <!--- Why is this change required? What problem does it solve? --> <!--- If it fixes an open issue, please link to the issue here. --> ## How Has This Been Tested? <!--- Please describe in detail how you tested your changes. --> <!--- Include details of your testing environment, and the tests you ran to --> <!--- see how your change affects other areas of the code, etc. --> ## Screenshots (if appropriate): ## Types of changes <!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: --> - [ ] Bug fix (non-breaking change which fixes an issue) - [ ] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to change) --------- Co-authored-by: Marcel Wagner <marcelwagner@microsoft.com>
1 parent d0d9785 commit 853358e

File tree

8 files changed

+262
-96
lines changed

8 files changed

+262
-96
lines changed

‎WinUIGallery/Package.Dev.appxmanifest‎

Lines changed: 47 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,48 @@
1-
<?xml version="1.0" encoding="utf-8"?>
2-
<Package xmlns="http://schemas.microsoft.com/appx/manifest/foundation/windows10" xmlns:mp="http://schemas.microsoft.com/appx/2014/phone/manifest" xmlns:uap="http://schemas.microsoft.com/appx/manifest/uap/windows10" xmlns:uap3="http://schemas.microsoft.com/appx/manifest/uap/windows10/3" xmlns:rescap="http://schemas.microsoft.com/appx/manifest/foundation/windows10/restrictedcapabilities" IgnorableNamespaces="uap mp uap3">
3-
<!--Note: package version and assembly version must be kept in sync-->
4-
<Identity Name="Microsoft.WinUI3ControlsGallery.Debug" Publisher="CN=Microsoft Corporation, O=Microsoft Corporation, L=Redmond, S=Washington, C=US" Version="2.7.0.0" />
5-
<mp:PhoneIdentity PhoneProductId="863667e0-667a-4bb4-ac52-c59656c7333a" PhonePublisherId="00000000-0000-0000-0000-000000000000" />
6-
<Properties>
7-
<DisplayName>WinUI 3 Gallery Dev</DisplayName>
8-
<PublisherDisplayName>Microsoft Corporation</PublisherDisplayName>
9-
<Logo>Assets\Tiles\StoreLogo.png</Logo>
10-
<uap:SupportedUsers>multiple</uap:SupportedUsers>
11-
</Properties>
12-
<Dependencies>
13-
<TargetDeviceFamily Name="Windows.Desktop" MinVersion="10.0.17763.0" MaxVersionTested="10.0.19041.0" />
14-
</Dependencies>
15-
<Resources>
16-
<Resource Language="x-generate" />
17-
</Resources>
18-
<Applications>
19-
<Application Id="App" Executable="$targetnametoken$.exe" EntryPoint="$targetentrypoint$">
20-
<uap:VisualElements DisplayName="WinUI 3 Gallery Dev" Square150x150Logo="Assets\Tiles\MedTile.png" Square44x44Logo="Assets\Tiles\AppList.png" Description="WinUI 3 Gallery Debug" BackgroundColor="transparent">
21-
<uap:DefaultTile Square310x310Logo="Assets\Tiles\LargeTile.png" Wide310x150Logo="Assets\Tiles\WideTile.png" Square71x71Logo="Assets\Tiles\SmallTile.png">
22-
<uap:ShowNameOnTiles>
23-
<uap:ShowOn Tile="square150x150Logo" />
24-
<uap:ShowOn Tile="wide310x150Logo" />
25-
<uap:ShowOn Tile="square310x310Logo" />
26-
</uap:ShowNameOnTiles>
27-
</uap:DefaultTile>
28-
<uap:SplashScreen Image="Assets\Tiles\SplashScreen.png" BackgroundColor="transparent" />
29-
</uap:VisualElements>
30-
<Extensions>
31-
<uap3:Extension Category="windows.appUriHandler">
32-
<uap3:AppUriHandler>
33-
<uap3:Host Name="winuigallery.com" />
34-
<uap3:Host Name="xamlcontrolsgallery.com" />
35-
</uap3:AppUriHandler>
36-
</uap3:Extension>
37-
<uap:Extension Category="windows.protocol">
38-
<uap:Protocol Name="winui3gallerydev">
39-
<uap:DisplayName>WinUI 3 Gallery Dev</uap:DisplayName>
40-
</uap:Protocol>
41-
</uap:Extension>
42-
</Extensions>
43-
</Application>
44-
</Applications>
45-
<Capabilities>
46-
<rescap:Capability Name="runFullTrust" />
47-
</Capabilities>
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<Package xmlns="http://schemas.microsoft.com/appx/manifest/foundation/windows10" xmlns:mp="http://schemas.microsoft.com/appx/2014/phone/manifest" xmlns:uap="http://schemas.microsoft.com/appx/manifest/uap/windows10" xmlns:uap3="http://schemas.microsoft.com/appx/manifest/uap/windows10/3" xmlns:rescap="http://schemas.microsoft.com/appx/manifest/foundation/windows10/restrictedcapabilities" IgnorableNamespaces="uap mp uap3">
3+
<!--Note: package version and assembly version must be kept in sync-->
4+
<Identity Name="Microsoft.WinUI3ControlsGallery.Debug" Publisher="CN=Microsoft Corporation, O=Microsoft Corporation, L=Redmond, S=Washington, C=US" Version="2.7.0.0" />
5+
<mp:PhoneIdentity PhoneProductId="863667e0-667a-4bb4-ac52-c59656c7333a" PhonePublisherId="00000000-0000-0000-0000-000000000000" />
6+
<Properties>
7+
<DisplayName>WinUI 3 Gallery Dev</DisplayName>
8+
<PublisherDisplayName>Microsoft Corporation</PublisherDisplayName>
9+
<Logo>Assets\Tiles\StoreLogo.png</Logo>
10+
<uap:SupportedUsers>multiple</uap:SupportedUsers>
11+
</Properties>
12+
<Dependencies>
13+
<TargetDeviceFamily Name="Windows.Desktop" MinVersion="10.0.17763.0" MaxVersionTested="10.0.19041.0" />
14+
</Dependencies>
15+
<Resources>
16+
<Resource Language="x-generate" />
17+
</Resources>
18+
<Applications>
19+
<Application Id="App" Executable="$targetnametoken$.exe" EntryPoint="$targetentrypoint$">
20+
<uap:VisualElements DisplayName="WinUI 3 Gallery Dev" Square150x150Logo="Assets\Tiles\MedTile.png" Square44x44Logo="Assets\Tiles\AppList.png" Description="WinUI 3 Gallery Debug" BackgroundColor="transparent">
21+
<uap:DefaultTile Square310x310Logo="Assets\Tiles\LargeTile.png" Wide310x150Logo="Assets\Tiles\WideTile.png" Square71x71Logo="Assets\Tiles\SmallTile.png">
22+
<uap:ShowNameOnTiles>
23+
<uap:ShowOn Tile="square150x150Logo" />
24+
<uap:ShowOn Tile="wide310x150Logo" />
25+
<uap:ShowOn Tile="square310x310Logo" />
26+
</uap:ShowNameOnTiles>
27+
</uap:DefaultTile>
28+
<uap:SplashScreen Image="Assets\Tiles\SplashScreen.png" BackgroundColor="transparent" />
29+
</uap:VisualElements>
30+
<Extensions>
31+
<uap3:Extension Category="windows.appUriHandler">
32+
<uap3:AppUriHandler>
33+
<uap3:Host Name="winuigallery.com" />
34+
<uap3:Host Name="xamlcontrolsgallery.com" />
35+
</uap3:AppUriHandler>
36+
</uap3:Extension>
37+
<uap:Extension Category="windows.protocol">
38+
<uap:Protocol Name="winui3gallerydev">
39+
<uap:DisplayName>WinUI 3 Gallery Dev</uap:DisplayName>
40+
</uap:Protocol>
41+
</uap:Extension>
42+
</Extensions>
43+
</Application>
44+
</Applications>
45+
<Capabilities>
46+
<rescap:Capability Name="runFullTrust" />
47+
</Capabilities>
4848
</Package>

‎WinUIGallery/Package.appxmanifest‎

Lines changed: 47 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,48 @@
1-
<?xml version="1.0" encoding="utf-8"?>
2-
<Package xmlns="http://schemas.microsoft.com/appx/manifest/foundation/windows10" xmlns:mp="http://schemas.microsoft.com/appx/2014/phone/manifest" xmlns:uap="http://schemas.microsoft.com/appx/manifest/uap/windows10" xmlns:uap3="http://schemas.microsoft.com/appx/manifest/uap/windows10/3" xmlns:rescap="http://schemas.microsoft.com/appx/manifest/foundation/windows10/restrictedcapabilities" IgnorableNamespaces="uap mp uap3">
3-
<!--Note: package version and assembly version must be kept in sync-->
4-
<Identity Name="Microsoft.WinUI3ControlsGallery" Publisher="CN=Microsoft Corporation, O=Microsoft Corporation, L=Redmond, S=Washington, C=US" Version="2.7.0.0" />
5-
<mp:PhoneIdentity PhoneProductId="863667e0-667a-4bb4-ac52-c59656c7333a" PhonePublisherId="00000000-0000-0000-0000-000000000000" />
6-
<Properties>
7-
<DisplayName>WinUI 3 Gallery</DisplayName>
8-
<PublisherDisplayName>Microsoft Corporation</PublisherDisplayName>
9-
<Logo>Assets\Tiles\StoreLogo.png</Logo>
10-
<uap:SupportedUsers>multiple</uap:SupportedUsers>
11-
</Properties>
12-
<Dependencies>
13-
<TargetDeviceFamily Name="Windows.Desktop" MinVersion="10.0.17763.0" MaxVersionTested="10.0.19041.0" />
14-
</Dependencies>
15-
<Resources>
16-
<Resource Language="x-generate" />
17-
</Resources>
18-
<Applications>
19-
<Application Id="App" Executable="$targetnametoken$.exe" EntryPoint="$targetentrypoint$">
20-
<uap:VisualElements DisplayName="WinUI 3 Gallery" Square150x150Logo="Assets\Tiles\MedTile.png" Square44x44Logo="Assets\Tiles\AppList.png" Description="WinUI 3 Gallery" BackgroundColor="transparent">
21-
<uap:DefaultTile Square310x310Logo="Assets\Tiles\LargeTile.png" Wide310x150Logo="Assets\Tiles\WideTile.png" Square71x71Logo="Assets\Tiles\SmallTile.png">
22-
<uap:ShowNameOnTiles>
23-
<uap:ShowOn Tile="square150x150Logo" />
24-
<uap:ShowOn Tile="wide310x150Logo" />
25-
<uap:ShowOn Tile="square310x310Logo" />
26-
</uap:ShowNameOnTiles>
27-
</uap:DefaultTile>
28-
<uap:SplashScreen Image="Assets\Tiles\SplashScreen.png" />
29-
</uap:VisualElements>
30-
<Extensions>
31-
<uap3:Extension Category="windows.appUriHandler">
32-
<uap3:AppUriHandler>
33-
<uap3:Host Name="winuigallery.com" />
34-
<uap3:Host Name="xamlcontrolsgallery.com" />
35-
</uap3:AppUriHandler>
36-
</uap3:Extension>
37-
<uap:Extension Category="windows.protocol">
38-
<uap:Protocol Name="winui3gallery">
39-
<uap:DisplayName>WinUI 3 Gallery</uap:DisplayName>
40-
</uap:Protocol>
41-
</uap:Extension>
42-
</Extensions>
43-
</Application>
44-
</Applications>
45-
<Capabilities>
46-
<rescap:Capability Name="runFullTrust" />
47-
</Capabilities>
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<Package xmlns="http://schemas.microsoft.com/appx/manifest/foundation/windows10" xmlns:mp="http://schemas.microsoft.com/appx/2014/phone/manifest" xmlns:uap="http://schemas.microsoft.com/appx/manifest/uap/windows10" xmlns:uap3="http://schemas.microsoft.com/appx/manifest/uap/windows10/3" xmlns:rescap="http://schemas.microsoft.com/appx/manifest/foundation/windows10/restrictedcapabilities" IgnorableNamespaces="uap mp uap3">
3+
<!--Note: package version and assembly version must be kept in sync-->
4+
<Identity Name="Microsoft.WinUI3ControlsGallery" Publisher="CN=Microsoft Corporation, O=Microsoft Corporation, L=Redmond, S=Washington, C=US" Version="2.7.0.0" />
5+
<mp:PhoneIdentity PhoneProductId="863667e0-667a-4bb4-ac52-c59656c7333a" PhonePublisherId="00000000-0000-0000-0000-000000000000" />
6+
<Properties>
7+
<DisplayName>WinUI 3 Gallery</DisplayName>
8+
<PublisherDisplayName>Microsoft Corporation</PublisherDisplayName>
9+
<Logo>Assets\Tiles\StoreLogo.png</Logo>
10+
<uap:SupportedUsers>multiple</uap:SupportedUsers>
11+
</Properties>
12+
<Dependencies>
13+
<TargetDeviceFamily Name="Windows.Desktop" MinVersion="10.0.17763.0" MaxVersionTested="10.0.19041.0" />
14+
</Dependencies>
15+
<Resources>
16+
<Resource Language="x-generate" />
17+
</Resources>
18+
<Applications>
19+
<Application Id="App" Executable="$targetnametoken$.exe" EntryPoint="$targetentrypoint$">
20+
<uap:VisualElements DisplayName="WinUI 3 Gallery" Square150x150Logo="Assets\Tiles\MedTile.png" Square44x44Logo="Assets\Tiles\AppList.png" Description="WinUI 3 Gallery" BackgroundColor="transparent">
21+
<uap:DefaultTile Square310x310Logo="Assets\Tiles\LargeTile.png" Wide310x150Logo="Assets\Tiles\WideTile.png" Square71x71Logo="Assets\Tiles\SmallTile.png">
22+
<uap:ShowNameOnTiles>
23+
<uap:ShowOn Tile="square150x150Logo" />
24+
<uap:ShowOn Tile="wide310x150Logo" />
25+
<uap:ShowOn Tile="square310x310Logo" />
26+
</uap:ShowNameOnTiles>
27+
</uap:DefaultTile>
28+
<uap:SplashScreen Image="Assets\Tiles\SplashScreen.png" />
29+
</uap:VisualElements>
30+
<Extensions>
31+
<uap3:Extension Category="windows.appUriHandler">
32+
<uap3:AppUriHandler>
33+
<uap3:Host Name="winuigallery.com" />
34+
<uap3:Host Name="xamlcontrolsgallery.com" />
35+
</uap3:AppUriHandler>
36+
</uap3:Extension>
37+
<uap:Extension Category="windows.protocol">
38+
<uap:Protocol Name="winui3gallery">
39+
<uap:DisplayName>WinUI 3 Gallery</uap:DisplayName>
40+
</uap:Protocol>
41+
</uap:Extension>
42+
</Extensions>
43+
</Application>
44+
</Applications>
45+
<Capabilities>
46+
<rescap:Capability Name="runFullTrust" />
47+
</Capabilities>
4848
</Package>

‎WinUIGallery/Samples/ControlPages/Fundamentals/BindingPage.xaml‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
66
xmlns:controls="using:WinUIGallery.Controls"
77
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
8+
xmlns:local="using:WinUIGallery.ControlPages"
89
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
910
mc:Ignorable="d">
1011

@@ -207,5 +208,59 @@ public YourPage()
207208
</x:String>
208209
</controls:ControlExample.CSharp>
209210
</controls:ControlExample>
211+
212+
<controls:ControlExample
213+
HeaderText="Binding a collection with data templates"
214+
XamlSource="Binding\BindingSample6_xaml.txt"
215+
CSharpSource="Binding\BindingSample6_csharp.txt">
216+
<controls:ControlExample.Example>
217+
<Grid ColumnSpacing="16" MinHeight="250">
218+
<Grid.ColumnDefinitions>
219+
<ColumnDefinition Width="200" />
220+
<ColumnDefinition Width="*" />
221+
</Grid.ColumnDefinitions>
222+
223+
<ListView
224+
x:Name="ListDetailListView"
225+
Grid.Column="0"
226+
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
227+
BorderThickness="1"
228+
CornerRadius="4"
229+
ItemsSource="{x:Bind Items}"
230+
SelectedIndex="0"
231+
SelectionMode="Single">
232+
<ListView.ItemTemplate>
233+
<DataTemplate x:DataType="local:ListDetailItem">
234+
<StackPanel Padding="4" Spacing="2">
235+
<TextBlock FontWeight="SemiBold" Text="{x:Bind Title}" />
236+
<TextBlock
237+
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
238+
Style="{ThemeResource CaptionTextBlockStyle}"
239+
Text="{x:Bind DateCreatedFormatted}" />
240+
</StackPanel>
241+
</DataTemplate>
242+
</ListView.ItemTemplate>
243+
</ListView>
244+
245+
<StackPanel
246+
Grid.Column="1"
247+
Padding="16"
248+
Spacing="8"
249+
DataContext="{x:Bind ListDetailListView.SelectedItem, Mode=OneWay}">
250+
<TextBlock
251+
FontSize="20"
252+
FontWeight="SemiBold"
253+
Text="{Binding Title}" />
254+
<TextBlock
255+
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
256+
Style="{ThemeResource CaptionTextBlockStyle}"
257+
Text="{Binding DateCreatedFormatted}" />
258+
<TextBlock
259+
TextWrapping="Wrap"
260+
Text="{Binding Text}" />
261+
</StackPanel>
262+
</Grid>
263+
</controls:ControlExample.Example>
264+
</controls:ControlExample>
210265
</StackPanel>
211266
</Page>

‎WinUIGallery/Samples/ControlPages/Fundamentals/BindingPage.xaml.cs‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33

44
using Microsoft.UI.Xaml.Controls;
55
using System;
6+
using System.Collections.Generic;
67
using System.ComponentModel;
78

89
namespace WinUIGallery.ControlPages;
@@ -13,6 +14,8 @@ public sealed partial class BindingPage : Page
1314

1415
public ExampleViewModel ViewModel { get; set; }
1516

17+
public List<ListDetailItem> Items { get; set; }
18+
1619
public BindingPage()
1720
{
1821
this.InitializeComponent();
@@ -24,6 +27,38 @@ public BindingPage()
2427
NullString = string.Empty,
2528
};
2629
DataContext = ViewModel;
30+
31+
Items = new List<ListDetailItem>
32+
{
33+
new ListDetailItem
34+
{
35+
Id = 0,
36+
Title = "Item 1",
37+
Text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id facilisis lectus. Cras nec convallis ante, quis pulvinar tellus.",
38+
DateCreated = new DateTime(2025, 6, 15, 9, 30, 0)
39+
},
40+
new ListDetailItem
41+
{
42+
Id = 1,
43+
Title = "Item 2",
44+
Text = "Quisque accumsan pretium ligula in faucibus. Mauris sollicitudin augue vitae lorem cursus condimentum quis ac mauris.",
45+
DateCreated = new DateTime(2025, 7, 22, 14, 15, 0)
46+
},
47+
new ListDetailItem
48+
{
49+
Id = 2,
50+
Title = "Item 3",
51+
Text = "Ut consequat magna luctus justo egestas vehicula. Integer pharetra risus libero, et posuere justo mattis et.",
52+
DateCreated = new DateTime(2025, 8, 3, 11, 0, 0)
53+
},
54+
new ListDetailItem
55+
{
56+
Id = 3,
57+
Title = "Item 4",
58+
Text = "Duis facilisis, quam ut laoreet commodo, elit ex aliquet massa, non varius tellus lectus et nunc.",
59+
DateCreated = new DateTime(2025, 9, 10, 16, 45, 0)
60+
}
61+
};
2762
}
2863

2964
public string FormatDate(DateTimeOffset? date)
@@ -91,3 +126,12 @@ protected void OnPropertyChanged(string propertyName)
91126
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
92127
}
93128
}
129+
130+
public class ListDetailItem
131+
{
132+
public int Id { get; set; }
133+
public string Title { get; set; } = string.Empty;
134+
public string Text { get; set; } = string.Empty;
135+
public DateTime DateCreated { get; set; }
136+
public string DateCreatedFormatted => DateCreated.ToString("MMM d, yyyy h:mm tt");
137+
}

‎WinUIGallery/Samples/Data/ControlInfoData.json‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3117,13 +3117,21 @@
31173117
"UniqueId": "Clipboard",
31183118
"Title": "Clipboard",
31193119
"ApiNamespace": "Windows.ApplicationModel.DataTransfer",
3120-
"Subtitle": "Copy and paste to and from the system Clipboard.",
3120+
"Subtitle": "Copy and paste text, images, and files to and from the system Clipboard.",
31213121
"ImagePath": "ms-appx:///Assets/ControlImages/Clipboard.png",
3122-
"Description": "Copy and paste to and from the system Clipboard.",
3122+
"Description": "Use the Clipboard API to copy and paste text, images, and files. Configure clipboard history and roaming options, monitor content changes, and inspect available formats.",
31233123
"Docs": [
31243124
{
31253125
"Title": "Clipboard - API",
31263126
"Uri": "https://learn.microsoft.com/uwp/api/windows.applicationmodel.datatransfer.clipboard"
3127+
},
3128+
{
3129+
"Title": "ClipboardContentOptions - API",
3130+
"Uri": "https://learn.microsoft.com/uwp/api/windows.applicationmodel.datatransfer.clipboardcontentoptions"
3131+
},
3132+
{
3133+
"Title": "Copy and paste - Guide",
3134+
"Uri": "https://learn.microsoft.com/windows/apps/develop/communication/copy-and-paste"
31273135
}
31283136
]
31293137
},

‎WinUIGallery/Samples/SampleCode/Binding/BindingSample6_csharp.txt‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
public class ListDetailItem
2+
{
3+
public int Id { get; set; }
4+
public string Title { get; set; }
5+
public string Text { get; set; }
6+
public DateTime DateCreated { get; set; }
7+
public string DateCreatedFormatted => DateCreated.ToString("MMM d, yyyy h:mm tt");
8+
}
9+
10+
// In your page class:
11+
public List<ListDetailItem> Items { get; set; }
12+
13+
public MyPage()
14+
{
15+
this.InitializeComponent();
16+
17+
Items = new List<ListDetailItem>
18+
{
19+
new ListDetailItem
20+
{
21+
Id = 0,
22+
Title = "Item 1",
23+
Text = "Lorem ipsum dolor sit amet...",
24+
DateCreated = new DateTime(2025, 6, 15, 9, 30, 0)
25+
},
26+
// Add more items...
27+
};
28+
}

0 commit comments

Comments
 (0)