MADE-Apps · jamesmcroft · Feb 24, 2022 · Feb 23, 2022 · Feb 23, 2022 · Feb 24, 2022
@@ -1,7 +1,7 @@
 
 Microsoft Visual Studio Solution File, Format Version 12.00
-# Visual Studio Version 16
-VisualStudioVersion = 16.0.31624.102
+# Visual Studio Version 17
+VisualStudioVersion = 17.0.32126.317
 MinimumVisualStudioVersion = 10.0.40219.1
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "src", "src", "{01380FB8-F8A7-4416-AABA-5407574B7723}"
 EndProject
@@ -39,6 +39,8 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "MADE.UI.Styling", "src\MADE
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "MADE.UI.ViewManagement", "src\MADE.UI.ViewManagement\MADE.UI.ViewManagement.csproj", "{442D1E25-FFD1-405D-A1FC-40CAFCAD190C}"
 EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "MADE.UI.Controls.ChipBox", "src\MADE.UI.Controls.ChipBox\MADE.UI.Controls.ChipBox.csproj", "{D1A16208-5A34-4CC1-B175-01B5AC99E69E}"
+EndProject
 Global
 	GlobalSection(SharedMSBuildProjectFiles) = preSolution
 		samples\MADE.Samples\MADE.Samples.Shared\MADE.Samples.Shared.projitems*{04f1b32d-9056-43fc-b4c2-b8c5481bdacb}*SharedItemsImports = 4
@@ -799,6 +801,62 @@ Global
 		{442D1E25-FFD1-405D-A1FC-40CAFCAD190C}.Release|x64.Build.0 = Release|Any CPU
 		{442D1E25-FFD1-405D-A1FC-40CAFCAD190C}.Release|x86.ActiveCfg = Release|Any CPU
 		{442D1E25-FFD1-405D-A1FC-40CAFCAD190C}.Release|x86.Build.0 = Release|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Ad-Hoc|Any CPU.ActiveCfg = Debug|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Ad-Hoc|Any CPU.Build.0 = Debug|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Ad-Hoc|ARM.ActiveCfg = Debug|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Ad-Hoc|ARM.Build.0 = Debug|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Ad-Hoc|ARM64.ActiveCfg = Debug|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Ad-Hoc|ARM64.Build.0 = Debug|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Ad-Hoc|iPhone.ActiveCfg = Debug|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Ad-Hoc|iPhone.Build.0 = Debug|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Ad-Hoc|iPhoneSimulator.ActiveCfg = Debug|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Ad-Hoc|iPhoneSimulator.Build.0 = Debug|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Ad-Hoc|x64.ActiveCfg = Debug|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Ad-Hoc|x64.Build.0 = Debug|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Ad-Hoc|x86.ActiveCfg = Debug|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Ad-Hoc|x86.Build.0 = Debug|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.AppStore|Any CPU.ActiveCfg = Debug|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.AppStore|Any CPU.Build.0 = Debug|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.AppStore|ARM.ActiveCfg = Debug|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.AppStore|ARM.Build.0 = Debug|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.AppStore|ARM64.ActiveCfg = Debug|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.AppStore|ARM64.Build.0 = Debug|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.AppStore|iPhone.ActiveCfg = Debug|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.AppStore|iPhone.Build.0 = Debug|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.AppStore|iPhoneSimulator.ActiveCfg = Debug|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.AppStore|iPhoneSimulator.Build.0 = Debug|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.AppStore|x64.ActiveCfg = Debug|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.AppStore|x64.Build.0 = Debug|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.AppStore|x86.ActiveCfg = Debug|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.AppStore|x86.Build.0 = Debug|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Debug|ARM.ActiveCfg = Debug|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Debug|ARM.Build.0 = Debug|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Debug|ARM64.ActiveCfg = Debug|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Debug|ARM64.Build.0 = Debug|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Debug|iPhone.ActiveCfg = Debug|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Debug|iPhone.Build.0 = Debug|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Debug|iPhoneSimulator.ActiveCfg = Debug|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Debug|iPhoneSimulator.Build.0 = Debug|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Debug|x64.ActiveCfg = Debug|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Debug|x64.Build.0 = Debug|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Debug|x86.ActiveCfg = Debug|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Debug|x86.Build.0 = Debug|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Release|Any CPU.Build.0 = Release|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Release|ARM.ActiveCfg = Release|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Release|ARM.Build.0 = Release|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Release|ARM64.ActiveCfg = Release|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Release|ARM64.Build.0 = Release|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Release|iPhone.ActiveCfg = Release|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Release|iPhone.Build.0 = Release|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Release|iPhoneSimulator.ActiveCfg = Release|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Release|iPhoneSimulator.Build.0 = Release|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Release|x64.ActiveCfg = Release|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Release|x64.Build.0 = Release|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Release|x86.ActiveCfg = Release|Any CPU
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Release|x86.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
@@ -819,6 +877,7 @@ Global
 		{0CA60466-059C-42D3-9B68-6BBB75A75090} = {01380FB8-F8A7-4416-AABA-5407574B7723}
 		{F8D00106-0598-45E7-B92E-EF408249C02E} = {01380FB8-F8A7-4416-AABA-5407574B7723}
 		{442D1E25-FFD1-405D-A1FC-40CAFCAD190C} = {01380FB8-F8A7-4416-AABA-5407574B7723}
+		{D1A16208-5A34-4CC1-B175-01B5AC99E69E} = {01380FB8-F8A7-4416-AABA-5407574B7723}
 	EndGlobalSection
 	GlobalSection(ExtensibilityGlobals) = postSolution
 		SolutionGuid = {3921AD86-E6C0-4436-8880-2D9EDFAD6151}

@@ -24,6 +24,7 @@ As many developers know, projects like MADE Uno are built and maintained in spar
 | Package | Current | Preview | Downloads |
 | ------ | ------ | ------ | ------ |
 | UI | [![NuGet](https://img.shields.io/nuget/v/MADE.UI)](https://www.nuget.org/packages/MADE.UI/) | [![NuGet](https://img.shields.io/nuget/vpre/MADE.UI)](https://www.nuget.org/packages/MADE.UI/) | [![NuGet Downloads](https://img.shields.io/nuget/dt/MADE.UI.svg)](https://www.nuget.org/packages/MADE.UI) |
+| UI.Controls.ChipBox | [![NuGet](https://img.shields.io/nuget/v/MADE.UI.Controls.ChipBox)](https://www.nuget.org/packages/MADE.UI.Controls.ChipBox/) | [![NuGet](https://img.shields.io/nuget/vpre/MADE.UI.Controls.ChipBox)](https://www.nuget.org/packages/MADE.UI.Controls.ChipBox/) | [![NuGet Downloads](https://img.shields.io/nuget/dt/MADE.UI.Controls.ChipBox.svg)](https://www.nuget.org/packages/MADE.UI.Controls.ChipBox) |
 | UI.Controls.DropDownList | [![NuGet](https://img.shields.io/nuget/v/MADE.UI.Controls.DropDownList)](https://www.nuget.org/packages/MADE.UI.Controls.DropDownList/) | [![NuGet](https://img.shields.io/nuget/vpre/MADE.UI.Controls.DropDownList)](https://www.nuget.org/packages/MADE.UI.Controls.DropDownList/) | [![NuGet Downloads](https://img.shields.io/nuget/dt/MADE.UI.Controls.DropDownList.svg)](https://www.nuget.org/packages/MADE.UI.Controls.DropDownList) |
 | UI.Controls.FilePicker | [![NuGet](https://img.shields.io/nuget/v/MADE.UI.Controls.FilePicker)](https://www.nuget.org/packages/MADE.UI.Controls.FilePicker/) | [![NuGet](https://img.shields.io/nuget/vpre/MADE.UI.Controls.FilePicker)](https://www.nuget.org/packages/MADE.UI.Controls.FilePicker/) | [![NuGet Downloads](https://img.shields.io/nuget/dt/MADE.UI.Controls.FilePicker.svg)](https://www.nuget.org/packages/MADE.UI.Controls.FilePicker) |
 | UI.Controls.Validator | [![NuGet](https://img.shields.io/nuget/v/MADE.UI.Controls.Validator)](https://www.nuget.org/packages/MADE.UI.Controls.Validator/) | [![NuGet](https://img.shields.io/nuget/vpre/MADE.UI.Controls.Validator)](https://www.nuget.org/packages/MADE.UI.Controls.Validator/) | [![NuGet Downloads](https://img.shields.io/nuget/dt/MADE.UI.Controls.Validator.svg)](https://www.nuget.org/packages/MADE.UI.Controls.Validator) |

@@ -0,0 +1,132 @@
+---
+uid: package-ui-controls-chipbox
+title: Using the ChipBox control
+---
+
+# Using the ChipBox control
+
+The `MADE.UI.Controls.ChipBox` element is a custom-built UI element that works with [Uno's supported platforms](https://platform.uno/) that provides a multi value input for a text box with auto-suggest capabilities. Values added are displayed as removable chips.
+
+The control is a familiar custom input style control used in web applications.
+
+Shown below is the visuals for the control in its default state, with some chip values already added.
+
+<img src="../../images/ChipBox.png" alt="ChipBox with chip values selected" />
+
+## Example usage
+
+```xml
+<Page
+    x:Class="ChipBoxSample.MainPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="using:MADE.UI.Controls"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
+    mc:Ignorable="d">
+
+    <RelativePanel Padding="12">
+        <controls:ChipBox
+            x:Name="ChipBoxControl"
+            Margin="0,12,0,0"
+            Suggestions="{x:Bind ChipSuggestions}"
+            Chips="{x:Bind SelectedChips}"
+            TextChangeCommand="{x:Bind SuggestionTextChangeCommand}"
+            Header="ChipBox"
+            RelativePanel.AlignLeftWithPanel="True"
+            RelativePanel.AlignRightWithPanel="True"
+            RelativePanel.AlignTopWithPanel="True" />
+    </RelativePanel>
+</Page>
+```
+
+## Retrieving added chip values
+
+The control exposes the selected chips through the `Chips` list property.
+
+The type of objects contained in this collection will be `ChipItem` which contains the contents of the item as a generic `Object` type. This allows the `ChipBox` control to support any type of input value object.
+
+## Providing suggestions for chip values
+
+The `ChipBox` provides a `Suggestions` property that can be used to provide a list of objects that should be displayed to the user as suggestions.
+
+The control exposes a `TextChangeCommand` property and a `TextChanged` event that can be used to provide the ability to customize and provide relevant suggestions based on the text provided. This is not a baked in feature of the control itself. Here is an example of using this in action.
+
+```csharp
+private static readonly IList<string> Places = new List<string>
+{
+    "Austria",
+    "Belgium",
+    "Bulgaria",
+    "Croatia",
+    "Cyprus",
+    "Czechia",
+    "Denmark",
+    "Estonia",
+    "Finland",
+    "France",
+    "Germany",
+    "Greece",
+    "Hungary",
+    "Ireland",
+    "Italy",
+    "Latvia",
+    "Lithuania",
+    "Luxembourg",
+    "Malta",
+    "Netherlands",
+    "Poland",
+    "Portugal",
+    "Romania",
+    "Slovakia",
+    "Slovenia",
+    "Spain",
+    "Sweden"
+};
+
+public ICommand SuggestionTextChangeCommand => new RelayCommand<string>(this.OnSuggestionTextChanged);
+
+public ObservableCollection<string> ChipSuggestions { get; } = new(Places);
+
+private void OnSuggestionTextChanged(string obj)
+{
+    ChipSuggestions.MakeEqualTo(Places.Where(x => x.Contains(obj, StringComparison.CurrentCultureIgnoreCase)));
+}
+```
+
+It is up to the developer to implement the logic to provide suggestions. This is to ensure any flexibility in search and filtering is determined by the application rather than the control.
+
+## Customizing the ChipBox
+
+The control has many customization properties that are exposed to tailor the experience for your application.
+
+### HeaderTemplate
+
+The `Header` can be customized to include custom UI elements as well as a string resource.
+
+The `HeaderTemplate` is also available to provide a `DataTemplate` for you to define the rendered UI for the `Header`.
+
+### ChipContentTemplate
+
+The rendered UI elements for the chips use a MADE `Chip` content control. By default, the chips will be rendered displaying the string equivalent of the content provided to it. To customize the layout and display of the chip's content, apply a `DataTemplate` to the `ChipContentTemplate` property.
+
+### SuggestionsItemTemplate
+
+As suggestions could be a list of complex objects rather than a simple string, the control provides a `SuggestionsItemTemplate` property that can be used to provide a `DataTemplate` for the suggestions that are displayed to the user.
+
+### IsReadonly
+
+The `ChipBox` has the ability to be rendered in a readonly state. This is useful when you want to display the chips without any user interaction.
+
+When enabled, the auto-suggest text box will not be displayed to the user, and the ability to remove chips will be disabled.
+
+### AllowDuplicate
+
+By default, the `ChipBox` control allows duplicate values to be accepted. The `AllowDuplicate` property can be used to disable this behavior.
+
+### AllowFreeText
+
+The control supports the ability to allow free text input for chip values, as well as the option to only support selections from the suggestions list.
+
+The `AllowFreeText` property, enabled by default, can be used to control this behavior.
@@ -20,6 +20,7 @@ dotnet add package MADE.UI
 | Package | Version |
 | --- | --- |
 | MADE.UI | [![NuGet](https://img.shields.io/nuget/v/MADE.UI)](https://www.nuget.org/packages/MADE.UI/) |
+| MADE.UI.Controls.ChipBox | [![NuGet](https://img.shields.io/nuget/v/MADE.UI.Controls.ChipBox)](https://www.nuget.org/packages/MADE.UI.Controls.ChipBox/) |
 | MADE.UI.Controls.DropDownList | [![NuGet](https://img.shields.io/nuget/v/MADE.UI.Controls.DropDownList)](https://www.nuget.org/packages/MADE.UI.Controls.DropDownList/) |
 | MADE.UI.Controls.FilePicker | [![NuGet](https://img.shields.io/nuget/v/MADE.UI.Controls.FilePicker)](https://www.nuget.org/packages/MADE.UI.Controls.FilePicker/) |
 | MADE.UI.Controls.Validator | [![NuGet](https://img.shields.io/nuget/v/MADE.UI.Controls.Validator)](https://www.nuget.org/packages/MADE.UI.Controls.Validator/) |
@@ -42,6 +43,16 @@ Taking advantage of the Uno Platform, the UI packages provide extensible feature
 
 </span>
 
+#### UI.Controls.ChipBox
+
+The UI Controls ChipBox library contains a cross-platform UI element that provides a multi value input for a text box with auto-suggest capabilities. Values added are displayed as removable chips.
+
+<span class="button">
+
+[Discover UI.Controls.ChipBox](features/ui-controls-chipbox.md)
+
+</span>
+
 #### UI.Controls.DropDownList
 
 The UI Controls DropDownList library contains a Windows UI element that provides a selection user experience, allowing a user to select one or multiple items from a list.

@@ -8,6 +8,8 @@
           href: features/ui.md
         - name: Controls
           items:
+            - name: ChipBox
+              href: features/ui-controls-chipbox.md
             - name: DropDownList
               href: features/ui-controls-dropdownlist.md
             - name: FilePicker

@@ -78,10 +78,10 @@
       <Version>2.1.0-uno.32</Version>
     </PackageReference>
     <PackageReference Include="Uno.Microsoft.Toolkit.Uwp.UI.Controls.Primitives">
-      <Version>7.1.10</Version>
+      <Version>7.1.11</Version>
     </PackageReference>
-    <PackageReference Include="Uno.UI" Version="4.0.11" />
-    <PackageReference Include="Uno.UI.RemoteControl" Version="4.0.11" Condition="'$(Configuration)'=='Debug'" />
+    <PackageReference Include="Uno.UI" Version="4.0.13" />
+    <PackageReference Include="Uno.UI.RemoteControl" Version="4.0.13" Condition="'$(Configuration)'=='Debug'" />
     <PackageReference Include="Uno.UniversalImageLoader" Version="1.9.35" />
   </ItemGroup>
   <ItemGroup>
@@ -107,6 +107,10 @@
     <AndroidResource Include="Resources\values\Styles.xml" />
   </ItemGroup>
   <ItemGroup>
+    <ProjectReference Include="..\..\..\src\MADE.UI.Controls.ChipBox\MADE.UI.Controls.ChipBox.csproj">
+      <Project>{d1a16208-5a34-4cc1-b175-01b5ac99e69e}</Project>
+      <Name>MADE.UI.Controls.ChipBox</Name>
+    </ProjectReference>
     <ProjectReference Include="..\..\..\src\MADE.UI.Controls.FilePicker\MADE.UI.Controls.FilePicker.csproj">
       <Project>{774fd8d5-ccc1-4eed-aa14-f7069bfae5ce}</Project>
       <Name>MADE.UI.Controls.FilePicker</Name>

@@ -32,6 +32,10 @@ private static ICollection<SampleGroup> GetSampleGroups()
                 Name = "Controls",
                 Samples =
                 {
+                    new Sample(
+                        "ChipBox",
+                        typeof(ChipBoxPage),
+                        "/Features/Samples/Assets/ChipBox/ChipBox.png"),
                     new Sample(
                         "FilePicker",
                         typeof(FilePickerPage),

@@ -0,0 +1,44 @@
+private static readonly IList<string> Places = new List<string>
+{
+    "Austria",
+    "Belgium",
+    "Bulgaria",
+    "Croatia",
+    "Cyprus",
+    "Czechia",
+    "Denmark",
+    "Estonia",
+    "Finland",
+    "France",
+    "Germany",
+    "Greece",
+    "Hungary",
+    "Ireland",
+    "Italy",
+    "Latvia",
+    "Lithuania",
+    "Luxembourg",
+    "Malta",
+    "Netherlands",
+    "Poland",
+    "Portugal",
+    "Romania",
+    "Slovakia",
+    "Slovenia",
+    "Spain",
+    "Sweden"
+};
+
+public ICommand SuggestionTextChangeCommand => new RelayCommand<string>(this.OnSuggestionTextChanged);
+
+public ObservableCollection<ChipItem> SelectedChips { get; } = new()
+{
+    new ChipItem("United Kingdom")
+};
+
+public ObservableCollection<string> ChipSuggestions { get; } = new(Places);
+
+private void OnSuggestionTextChanged(string obj)
+{
+    ChipSuggestions.MakeEqualTo(Places.Where(x => x.Contains(obj, StringComparison.CurrentCultureIgnoreCase)));
+}
@@ -0,0 +1,20 @@
+<Page
+    x:Class="MADE.Samples.Features.Samples.Pages.ChipBoxPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:made="using:MADE.UI.Controls"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
+    mc:Ignorable="d">
+
+    <Grid>
+        <made:ChipBox
+            x:Name="ChipBoxControl"
+            Header="ChipBox"
+            Suggestions="{x:Bind ViewModel.ChipSuggestions}"
+            Chips="{x:Bind ViewModel.SelectedChips}"
+            TextChangeCommand="{x:Bind ViewModel.SuggestionTextChangeCommand}"/>
+    </Grid>
+</Page>