unoplatform / uno.xaml-controls-gallery

This app demonstrates the controls available in the Fluent Design System and Xaml.

XAML Controls Gallery port for Uno Platform

This repository is a port of the Xaml Controls Gallery running on the Uno-based apps on Windows, iOS, Android and WebAssembly. You can checkout the WASM target of the gallery live on this address.

XAML Controls Gallery

Shows all of the XAML controls in an interactive format. This app is the interactive companion to the Fluent Design Guidelines and shows the usage of both UWP Xaml APIs and Windows UI Toolkit APIs.

This sample shows how to:

• Specify XAML controls in markup: Each control page shows the markup used to create each example.
• Use the Microsoft.UI.Xaml (WinUI) Library: The app includes the latest WinUI NuGet package and shows how to use the Windows UI Toolkit controls like NavigationView, SwipeControl, and more.
• Basic layout: This sample will show all of the possible layout options for your app and allow you to interact with the panels to show how to achieve any layout you are looking for.
• Adaptive UI: In addition to showing how each control responds to different form factors, the app itself is responsive and shows various methods for achieving adaptive UI.
• Version adaptive code: This sample shows how to write version adaptive code so that the app can run on previous versions of Windows while also using the latest capabilities on the most recent verison of Windows.

Note The Xaml Controls Gallery requires Visual Studio 2017 to build and Windows 10 to execute. To obtain information about Windows 10 development, go to the Windows Dev Center

To obtain information about Microsoft Visual Studio and the tools for developing Windows apps, go to Visual Studio

To contact the authors, please reach out to [email protected]

Related topics

XAML app UI, start to finish

Each control page in the application has links to the relevant MSDN documentation for that control.

Install a prebuilt version of this sample.

Windows UI Library (WinUI)

Related samples

RSS reader sample
Lunch Scheduler app sample
Customers Orders Database sample
Universal Windows Platform (UWP) Samples

uno.xaml-controls-gallery's Issues

[WASM][PersonPicture] Initials have arrows before and after

Describe the bug

Arrows are displayed before and after the initials

Steps to reproduce the bug

1. Go to https://xamlcontrolsgallery.platform.uno/
2. Click on Media
3. Click on PersonPicture
4. Click on Initials
5. Notice the arrows before and after the initials

Expected behavior

Actual behavior

Version Info

Gallery version (found on Settings page):

0.1.0-uno.1+246

Windows 10 version:

• Insider Build (xxxxx)
• October 2018 Update (17763)
• April 2018 Update (17134)
• Fall Creators Update (16299)
• Creators Update (15063)
• Anniversary Update (14393)
• 1909 Build 18363.836

Device form factor:

• Desktop
• Mobile
• Xbox
• Surface Hub
• IoT

Additional context

Issue is not present in Canary ( https://xcgcanary.z27.web.core.windows.net/)

[WASM][Canary][GridView] No Content is displayed in GridView

Describe the bug

No Content is displayed in GridView

Steps to reproduce the bug

Steps to reproduce the behavior:

1. Go to https://xcgcanary.z27.web.core.windows.net/
2. Click on Collections
3. Click on GridView
4. Notice no content is displayed in GridView

Expected behavior

Content should be displayed in GridView

Actual behavior

No Content is displayed in GridView

Screenshots

Expected Results:

Current Results:

Version Info

0.1.0-canaries-dev.1+242

Gallery version (found on Settings page):

Windows 10 version:

• Insider Build (xxxxx)
• October 2018 Update (17763)
• April 2018 Update (17134)
• Fall Creators Update (16299)
• Creators Update (15063)
• Anniversary Update (14393)
• 1909 Build 18363.836

Device form factor:

• Desktop
• Mobile
• Xbox
• Surface Hub
• IoT

Additional context

[WASM][Canvas] Sample can go off screen

Describe the bug

Sample can go off screen

Steps to reproduce the bug

1. Go to https://xamlcontrolsgallery.platform.uno/
2. Click on Layout
3. Click on Canvas
4. Move vertical slider down to the bottom end
5. Move top horizontal slider all the way to the left end
6. Notice that the red square goes out of bounds and is no longer visible

Screenshots

Version Info

Gallery version (found on Settings page):

0.1.0-uno.1+246

Windows 10 version:

• Insider Build (xxxxx)
• October 2018 Update (17763)
• April 2018 Update (17134)
• Fall Creators Update (16299)
• Creators Update (15063)
• Anniversary Update (14393)
• 1909 Build 18363.836

Device form factor:

• Desktop
• Mobile
• Xbox
• Surface Hub
• IoT

Additional context

Unable to run Android

Describe the bug
When trying to run the Android head, I get an exception saying "Root frame not found".

Steps to reproduce the bug
Just trying to debug the app on Android Emulator.
An exception is thrown saying "Root frame not found":

Expected behavior
App should be able to launch on Android.

Actual behavior
App crashes during launch.

Screenshots

Version Info
Gallery version (found on Settings page):
1.1.1.0

Device form factor:

• Desktop
• Mobile - Android
• Xbox
• Surface Hub
• IoT

[WASM][Canary][ToggleSwitch] ToggleSwitch corners are not rounded when switch is on

Describe the bug

ToggleSwitch corners are not rounded when switch is on

Steps to reproduce the bug

1. Go to https://xcgcanary.z27.web.core.windows.net/
2. Click Basic Input
3. Click ToggleSwitch
4. Notice that the Working toggle switch corners are not rounded

Expected behavior

toggle switch corners should be rounded

Actual behavior

toggle switch corners are not rounded

Screenshots

Expected

Current

Version Info

Gallery version (found on Settings page):

Windows 10 version:

• Insider Build (xxxxx)
• October 2018 Update (17763)
• April 2018 Update (17134)
• Fall Creators Update (16299)
• Creators Update (15063)
• Anniversary Update (14393)
• 1909 Build 18363.836

Device form factor:

• Desktop
• Mobile
• Xbox
• Surface Hub
• IoT

Additional context

[WASM][Style-Compat] Burger menu hover over state extends passed border

Describe the bug

Burger menu hover over state extends passed border

Steps to reproduce the bug

1. Build from Style-Compat branch
2. Launch on WASM
3. Collapse burger menu
4. Hover over burger menu
5. Notice that hover over state extends passed the border

Expected behavior

Hover over state extends passed the border

Actual behavior

Hover over state should not extend passed the border

Screenshots

Version Info

Gallery version (found on Settings page):

Windows 10 version:

• Insider Build (xxxxx)
• October 2018 Update (17763)
• April 2018 Update (17134)
• Fall Creators Update (16299)
• Creators Update (15063)
• Anniversary Update (14393)
• 1909 Build 18363.836

Device form factor:

• Desktop
• Mobile
• Xbox
• Surface Hub
• IoT

Additional context

[WASM][ProgressRing] No progress ring is displayed

Describe the bug

No progress ring is displayed

Steps to reproduce the bug

1. Go to https://xamlcontrolsgallery.platform.uno/
2. Click on Status and Info
3. Click on ProgreessRing
4. Notice no progress ring sample is displayed

Expected behavior

A sample progress ring should be displayed

Actual behavior

no progress ring sample is displayed

Screenshots

Version Info

Gallery version (found on Settings page):

0.1.0-uno.1+246

Windows 10 version:

• Insider Build (xxxxx)
• October 2018 Update (17763)
• April 2018 Update (17134)
• Fall Creators Update (16299)
• Creators Update (15063)
• Anniversary Update (14393)
• 1909 Build 18363.836

Device form factor:

• Desktop
• Mobile
• Xbox
• Surface Hub
• IoT

Additional context

Uno Compatibility

Phase 1

• NavigationView selection is somethings providing an incorrect selected item (generally the last)
• Sample text is not available
• Some Images in top NavigationView are incorrect
• FontIcon default size is incorrect
• GridView SelectionMode combobox is not appearing
• GridView item selection count is not working
• GridView ItemTemplate changes are not working
• ListView samples are not showing any content
• Custom button is incorrect
• Flyout positioning and background is incorrect
• GridView padding is not working properly (main list items are too large, wasm only)
• ComboBoxes don't show the popup
• AutoSuggestBox both samples are not displaying search content
• TextBlock glyph is trimmed in navigation view
• Settings is not showing About text
• Settings is not showing dependencies
• Settings is not showing the disclaimer

Phase 2

• ListView Image list stretches images (wasm)
• NavigationView layout cycle wasm issue
• ToggleSwitch on/off text is not present
• ProgressBar indeterminate is not available
• Default checkbox three option 2 is not checked
• Canvas Slider header is not showing up
• Canvas Z-Index is not working
• NavigationView DataBinding sample not working
• ScrollViewer re-test when ComboBox will work
• Motion Easing Functions is not working
• SplitView default size is incorrect
• Grid vertical slider value is inverted
• Vertical Slider is incorrect (invalid range?)

Phase 3

• Passwordbox custom character is not available
• EasingFunctions do not work
• RadioButton: Disabled scrollviewer should not show the slider
• ToggleButton "Disable toggle" is not placed properly
• TimePicker is partially implemented?
• SplitView left mode is not working
• WebView is not working
• GridView Item hover is not showing
• AppBarButton BitmapIcon is not working
• AppBarButton PathIcon is not working
• AppBarButton FontIcon size is incorrect
• AppBarSeparator ScrollViewer size is incorrect
• NavigationView Title (Sample Page 1) is not visible
• NavigationView Top samples need to be disabled (not supported yet)
• ProgressBar RepeatButton is not working
• ProgressRing is not working
• Image nine grid is not working

Main AutoCompleteBox results overlaid

Describe the bug
The AutoCompleteBox shows overlaid results in the WASM head.

Steps to reproduce the bug

1. Clone repo
2. Run wasm head
3. Type in a query in the search box

Expected behavior
Items stacked one after the other

Actual behavior
Items appear on top of each other

Screenshots

Version Info

Gallery version (found on Settings page): 1.1.1
Gallery version doesn't display in WASM (prob another bug)

Windows 10 version:

• Insider Build (xxxxx)
• October 2018 Update (17763.805)
• April 2018 Update (17134)
• Fall Creators Update (16299)
• Creators Update (15063)
• Anniversary Update (14393)

Device form factor:

• Desktop
• Mobile
• Xbox
• Surface Hub
• IoT

[WASM][Styles-Compat][SplitButton] AppUIBasics.ControlPages.SplitButtonPage failed

Describe the bug

AppUIBasics.ControlPages.SplitButtonPage failed

Steps to reproduce the bug

1. Build from Style-Compat branch
2. Launch on WASM
3. Click Basic Input
4. Click SplitButton
5. Notice that control sample does not load

Expected behavior

SplitButton Control sample should load

Actual behavior

SplitButton Control sample does not load

Screenshots

Version Info

Gallery version (found on Settings page):

Windows 10 version:

• Insider Build (xxxxx)
• October 2018 Update (17763)
• April 2018 Update (17134)
• Fall Creators Update (16299)
• Creators Update (15063)
• Anniversary Update (14393)
• 1909 Build 18363.836

Device form factor:

• Desktop
• Mobile
• Xbox
• Surface Hub
• IoT

Additional context

[WASM][Chrome][TextBox] Text in TextBox moves while entering new text

Describe the bug

Text moves while entering new text in TextBox

Steps to reproduce the bug

1. Go to https://xamlcontrolsgallery.platform.uno/
2. Click on Text
3. Click on TextBox
4. Enter text in Simple TextBox
5. Notice that text in TextBox moves while entering new text

Expected behavior

Text should not move while entering new text

Actual behavior

text in TextBox moves while entering new text

Version Info

Gallery version (found on Settings page):

0.1.0-uno.1+246

Windows 10 version:

• Insider Build (xxxxx)
• October 2018 Update (17763)
• April 2018 Update (17134)
• Fall Creators Update (16299)
• Creators Update (15063)
• Anniversary Update (14393)
• 1909 Build 18363.836

Device form factor:

• Desktop
• Mobile
• Xbox
• Surface Hub
• IoT

Additional context

Was not able to reproduce issue in Firefox, issue present in Google Chrome

[WASM][Firefox][PersonPicture] Line above initials is incorrect color

Describe the bug

Line above initials is incorrect color

Steps to reproduce the bug

1. Build from Styles-Compat branch and launch on WASM
2. Click on Media
3. Click on PersonPicture
4. Click on Initials
5. Notice that the line above initials is dark when it should be white

Expected behavior

Actual behavior

Version Info

Gallery version (found on Settings page):

Uno.UI 2.2.0-feature.styles-compat.205

Windows 10 version:

• Insider Build (xxxxx)
• October 2018 Update (17763)
• April 2018 Update (17134)
• Fall Creators Update (16299)
• Creators Update (15063)
• Anniversary Update (14393)
• 1909 Build 18363.836

Device form factor:

• Desktop
• Mobile
• Xbox
• Surface Hub
• IoT

Additional context

Update to latest Uno

[WASM] Colors do not change when switching between Light and Dark Theme

Describe the bug

Colors do not change when switching between Light and Dark Theme

Steps to reproduce the bug

Steps to reproduce the behavior:

1. Go to https://xamlcontrolsgallery.platform.uno/
2. Click on Settings in the bottom left corner
3. Select Light / Dark Theme
4. Notice that color theme does not change

Expected behavior

When Selecting Light / Dark theme the color should change

Actual behavior

When Selecting Light / Dark theme the color does not change

Screenshots

Version Info

Gallery version (found on Settings page):

0.1.0-uno.1+246

Windows 10 version:

• Insider Build (xxxxx)
• October 2018 Update (17763)
• April 2018 Update (17134)
• Fall Creators Update (16299)
• Creators Update (15063)
• Anniversary Update (14393)
• 1909 Build 18363.836

Device form factor:

• Desktop
• Mobile
• Xbox
• Surface Hub
• IoT

Additional context

[WASM][Canvas] Vertical slider button missing when slider is at the top

Describe the bug

Vertical slider button missing when slider is at the top

Steps to reproduce the bug

1. Go to https://xamlcontrolsgallery.platform.uno/
2. Click on Layout
3. Click on Canvas
4. Move vertical slider up to the top end
5. Notice that slider button is no longer visible

Expected behavior

Slider button should not exceed slider boundary

Actual behavior

Slider button exceeds slider boundary

Screenshots

Version Info

Gallery version (found on Settings page):

0.1.0-uno.1+246

Windows 10 version:

• Insider Build (xxxxx)
• October 2018 Update (17763)
• April 2018 Update (17134)
• Fall Creators Update (16299)
• Creators Update (15063)
• Anniversary Update (14393)
• 1909 Build 18363.836

Device form factor:

• Desktop
• Mobile
• Xbox
• Surface Hub
• IoT

Additional context

likely related to #68

[WASM][Slider] Vertical slider extends when sliding up past end range

Describe the bug

Vertical slider extends when sliding up past border

Steps to reproduce the bug

1. Go to https://xamlcontrolsgallery.platform.uno/
2. Click on Basic Input
3. Click on Slider

Expected behavior

Slider will stop when reaching end of range

Actual behavior

Slider extends when sliding passed end of range

Screenshots

Version Info

Gallery version (found on Settings page):

0.1.0-uno.1+246

Windows 10 version:

• Insider Build (xxxxx)
• October 2018 Update (17763)
• April 2018 Update (17134)
• Fall Creators Update (16299)
• Creators Update (15063)
• Anniversary Update (14393)
• 1909 Build 18363.836

Device form factor:

• Desktop
• Mobile
• Xbox
• Surface Hub
• IoT

Additional context

[WASM][Android][What's New] Header missing

Describe the bug

Header missing for What's New

Steps to reproduce the bug

Steps to reproduce the behavior:

1. Go to '...'https://xamlcontrolsgallery.platform.uno/
2. Click on "What's New" from the burger menu
3. Notice that "What's New" header is missing

Expected behavior

Actual behavior

Version Info

Gallery version (found on Settings page):

Windows 10 version:

• Insider Build (xxxxx)
• October 2018 Update (17763)
• April 2018 Update (17134)
• Fall Creators Update (16299)
• Creators Update (15063)
• Anniversary Update (14393)

Device form factor:

• Desktop
• Mobile
• Xbox
• Surface Hub
• IoT

Additional context

[Android/iOS] Burger menu icons not displayed correctly

Describe the bug
Burger menu icons not displayed correctly

Steps to reproduce the bug

1. Launch app on Android or iOS
2. Open the burger menu
3. Notice that the menu icons are not displayed correctly

Expected behavior

Actual behavior

Screenshots

Version Info

Gallery version (found on Settings page):

Windows 10 version:

• Insider Build (xxxxx)
• October 2018 Update (17763)
• April 2018 Update (17134)
• Fall Creators Update (16299)
• Creators Update (15063)
• Anniversary Update (14393)

Device form factor:

• Desktop
• Mobile
• Xbox
• Surface Hub
• IoT

Additional context

Side bar does not stick

When using in Chrome (75), hovering on left-bar items, or selecting ones, does not affect their apparrence. There should be a hovered/selected item style applied.

Version Info
Chrome version 75

Gallery version (found on Settings page):
0.1.0-uno.1+210.Branch.uno.Sha.0f6bc42e4debf3f8cc22edc156c9ab93f2670d4a

Device form factor:

• Desktop
• Mobile
• Xbox
• Surface Hub
• IoT
• Web

[WASM][PersonPicture] Missing image icon visible in Display Name or Initials

Describe the bug

Missing image icon visible in Display Name or Initials

Steps to reproduce the bug

1. Go to https://xamlcontrolsgallery.platform.uno/
2. Click on Media
3. Click on PersonPicture
4. Click on Initials

Expected behavior

Actual behavior

Version Info

Gallery version (found on Settings page):

0.1.0-uno.1+246

Windows 10 version:

• Insider Build (xxxxx)
• October 2018 Update (17763)
• April 2018 Update (17134)
• Fall Creators Update (16299)
• Creators Update (15063)
• Anniversary Update (14393)
• 1909 Build 18363.836

Device form factor:

• Desktop
• Mobile
• Xbox
• Surface Hub
• IoT

Additional context

Unable to reproduce when using styles-compat branch