### Custom Syntax Highlighting Example
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/blob/main/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/MarkdownTextBlock/InitialContent.md
Demonstrates custom syntax highlighting by using a custom language identifier in a fenced code block.
```custom
```CUSTOM
This is very angry.
```
```
--------------------------------
### Two-Way Binding Example
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/blob/main/Microsoft.Toolkit.Uwp.SampleApp/ReadMe.md
This example demonstrates how to enable two-way binding for a property in the `.bind` template by adding an extra '@' symbol after the property definition. This allows changes in the UI to directly update the bound property.
```xml
```
--------------------------------
### Inline Code Example
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/blob/main/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/MarkdownTextBlock/InitialContent.md
Surround text with backticks (`) to render it as inline code. Formatting within backticks is ignored.
```markdown
Here is some `inline code with **formatting**`
```
--------------------------------
### Set XamlControlsResources in App.xaml
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/blob/main/Microsoft.Toolkit.Uwp.UI.Controls/ReadMe.txt
Add XamlControlsResources to your Application resources in App.xaml to enable WinUI controls. This is a basic setup.
```xaml
```
--------------------------------
### Indented Code Block
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/blob/main/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/MarkdownTextBlock/InitialContent.md
Preserve indentation and formatting by starting every line of code with four spaces.
```csharp
public void main(Strings argv[]){
System.out.println("Hello world!");
}
```
--------------------------------
### Load UI Element from XAML
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/wiki/Testing
Demonstrates setting up a UI element for testing by loading it from an XML string using XamlReader.Load within a VisualUITestBase context.
```csharp
var xamlString = "";
await SetTestContentAsync(XamlReader.Load(xamlString) as FrameworkElement);
// Assertions on the loaded element
```
--------------------------------
### Image with Size Specifications
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/blob/main/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/MarkdownTextBlock/InitialContent.md
Demonstrates how to specify image width, height, or both using Markdown syntax.
```Markdown
>
```
```Markdown
>
```
```Markdown
>
```
--------------------------------
### Basic samples.json Structure
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/blob/main/Microsoft.Toolkit.Uwp.SampleApp/ReadMe.md
Defines the basic structure for adding a sample page to the `samples.json` file, including properties like Name, Icon, and Samples.
```json
[
{
"Name": "Panel controls",
"Icon": "Icons/Layouts.png",
"Samples": [
{
"Name": "AdaptiveGridView",
"Type": "AdaptiveGridViewPage",
"About": "The AdaptiveGridView control allows to present information within a Grid View perfectly adjusting the total display available space. It reacts to changes in the layout as well as the content so it can adapt to different form factors automatically. The number and the width of items are calculated based on the screen resolution in order to fully leverage the available screen space. The property ItemsHeight define the items fixed height and the property DesiredWidth sets the minimum width for the elements to add a new column.",
"CodeUrl": "https://github.com/CommunityToolkit/WindowsCommunityToolkit/tree/main/Microsoft.Toolkit.Uwp.UI.Controls.Core/TextToolbar",
"XamlCodeFile": "AdaptiveGridViewCode.bind",
"DocumentationUrl": "https://raw.githubusercontent.com/CommunityToolkit/WindowsCommunityToolkit/main/docs/controls/AdaptiveGridView.md"
}
]
}
]
```
--------------------------------
### Sample Control Binding Template
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/blob/main/Microsoft.Toolkit.Uwp.SampleApp/ReadMe.md
This `.bind` file defines interactive properties for a TextBlock control. It uses a custom syntax to specify property types, default values, and options for user interaction within the sample app.
```xml
```
--------------------------------
### Basic samples.json Structure
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/wiki/Sample-Development
This is the basic structure for adding a new sample to the samples.json file. It includes essential properties like Name, Icon, Type, and CodeUrl.
```json
[
{
"Name": "Panel controls",
"Icon": "Icons/Layouts.png",
"Samples": [
{
"Name": "AdaptiveGridView",
"Type": "AdaptiveGridViewPage",
"About": "The AdaptiveGridView control allows to present information within a Grid View perfectly adjusting the total display available space. It reacts to changes in the layout as well as the content so it can adapt to different form factors automatically. The number and the width of items are calculated based on the screen resolution in order to fully leverage the available screen space. The property ItemsHeight define the items fixed height and the property DesiredWidth sets the minimum width for the elements to add a new column.",
"CodeUrl": "https://github.com/windows-toolkit/WindowsCommunityToolkit/tree/main/Microsoft.Toolkit.Uwp.UI.Controls/TextToolbar",
"XamlCodeFile": "AdaptiveGridViewCode.bind",
"DocumentationUrl": "https://raw.githubusercontent.com/windows-toolkit/WindowsCommunityToolkit/main/docs/controls/AdaptiveGridView.md"
}
]
}
]
```
--------------------------------
### Linked Image Syntax
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/blob/main/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/MarkdownTextBlock/InitialContent.md
Shows how to create an image that links to a specified URL.
```Markdown
>[](https://docs.microsoft.com/windows/uwpcommunitytoolkit/)
```
--------------------------------
### Clone Windows Community Toolkit Repo
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/wiki/Quick-Start
Use this command to clone the repository. Be mindful of Windows path length limitations when choosing a clone location.
```bash
git clone git@github.com:windows-toolkit/WindowsCommunityToolkit.git
```
--------------------------------
### Image with UriPrefix
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/blob/main/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/MarkdownTextBlock/InitialContent.md
Illustrates using the UriPrefix property to render local images.
```Markdown
>
```
--------------------------------
### Email Link Syntax
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/blob/main/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/MarkdownTextBlock/InitialContent.md
Demonstrates the syntax for creating masked email links and direct email links.
```Markdown
>[Email](`email@email.com`)
```
```Markdown
>`email@email.com`
```
--------------------------------
### Registering a New Command for Interactive Buttons
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/blob/main/Microsoft.Toolkit.Uwp.SampleApp/ReadMe.md
Register a new command with SampleController.Current to create interactive buttons in the main panel. This is used instead of direct button events in sample pages.
```csharp
protected override async void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
SampleController.Current.RegisterNewCommand("Image with placeholder", (sender, args) =>
{
AddImage(false, true);
});
// •••
}
```
--------------------------------
### Unordered List Syntax
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/blob/main/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/MarkdownTextBlock/InitialContent.md
Use plus (+), dash (-), or asterisk (*) followed by a space to create unordered list items. Line openers can be mixed.
```markdown
* Item 1
+ Item 2
- Item 3
```
--------------------------------
### Inline Image Syntax
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/blob/main/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/MarkdownTextBlock/InitialContent.md
Shows how to embed an inline image using Markdown syntax.
```Markdown
>
```
--------------------------------
### Ordered List Syntax
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/blob/main/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/MarkdownTextBlock/InitialContent.md
Use a number followed by a period (.) and a space to create ordered list items. The numbering will increment sequentially regardless of the numbers used.
```markdown
7. Item 1
2. Item 2
5. Item 3
```
--------------------------------
### Reference-based Linked Image
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/blob/main/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/MarkdownTextBlock/InitialContent.md
Demonstrates using reference-based links for images and their targets.
```Markdown
```
[![image][1]][2]
[1]:https://raw.githubusercontent.com/CommunityToolkit/WindowsCommunityToolkit/main/build/nuget.png
[2]:https://docs.microsoft.com/windows/uwpcommunitytoolkit/
```
```
--------------------------------
### Binding Syntax for Property Panel
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/wiki/Sample-Development
When a .bind file is used on the property page, the defined properties are automatically translated into {Binding} syntax. This enables the sample app to dynamically update control properties based on user input in the property panel.
```xaml
```
--------------------------------
### Inherit from VisualUITestBase for UI Realization
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/wiki/Testing
Inherit from VisualUITestBase for UWP tests needing full UI element realization, layout, or Visual Tree access. Mark methods with [TestMethod] and ensure they return async Task.
```csharp
public class MyVisualTest : VisualUITestBase {
[TestMethod]
public async Task MyVisualTestAsync() {
await App.DispatcherQueue.EnqueueAsync(async () => {
await SetTestContentAsync(...);
// Perform layout and assertions here
});
}
}
```
--------------------------------
### Restricting Sample Visibility with ApiCheck
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/blob/main/Microsoft.Toolkit.Uwp.SampleApp/ReadMe.md
Adds `ApiCheck` and `BadgeUpdateVersionRequired` keys to a sample's JSON definition to control its visibility based on the operating system version and display a message indicating the minimum required version.
```json
{
// •••
"About": "MySample needs 10.0.18362 or higher to work.",
"ApiCheck": "Windows.UI.Xaml.Controls.NavigationView",
"BadgeUpdateVersionRequired": "Fall Creators Update required",
// •••
}
```
--------------------------------
### Live Sample XAML Output
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/blob/main/Microsoft.Toolkit.Uwp.SampleApp/ReadMe.md
This XAML shows the final rendered output when the developer switches to the XAML tab. It displays the selected values from the interactive properties, providing a static representation of the control's configuration.
```xml
```
--------------------------------
### Define Interactive Properties in .bind File
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/wiki/Sample-Development
Use the @[Property Name:Type:DefaultValue:Options] syntax within XAML to define properties that can be interacted with in a sample app's property panel. This allows for instant visual feedback as values are changed.
```xaml
```
--------------------------------
### Test Multiple Scenarios with [DataRow]
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/wiki/Testing
Employ the [DataRow] attribute to execute the same test method with different sets of input data, simplifying the testing of various scenarios.
```csharp
[TestMethod]
[DataRow("input1", 1)]
[DataRow("input2", 2)]
public void TestWithMultipleDataRows(string input, int expectedValue) {
// Test logic using input and expectedValue
}
```
--------------------------------
### Markdown Headers
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/blob/main/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/MarkdownTextBlock/InitialContent.md
Headers can be created using a number of hashes (#) corresponding to the header level, or by using underlines of equals signs (=) for level 1 and dashes (-) for level 2.
```markdown
#Header 1
```
```markdown
##Header 2
```
```markdown
###Header 3
```
```markdown
####Header 4
```
```markdown
#####Header 5
```
```markdown
###### Header 6
```
```markdown
Header 2
-
```
```markdown
## Header 2 ##
```
--------------------------------
### Interactive Property Page Binding
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/blob/main/Microsoft.Toolkit.Uwp.SampleApp/ReadMe.md
This XAML demonstrates how the `.bind` template is translated for the property page UI. It uses `{Binding}` syntax to dynamically link UI elements to the interactive properties defined in the `.bind` file.
```xml
```
--------------------------------
### Applying a Style from Resources
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/blob/main/Microsoft.Toolkit.Uwp.SampleApp/ReadMe.md
If dynamically adding content, retrieve a style from control.Resources and apply it to a new element. This ensures consistency with user-modifiable bind XAML styles.
```csharp
if (resources?.ContainsKey("ThingStyle") == true)
{
newThing.Style = resources["ThingStyle"] as Style;
}
```
--------------------------------
### Test Expected Exceptions with [ExpectedException]
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/wiki/Testing
Use the [ExpectedException] attribute to easily test scenarios where a specific exception is expected to be thrown by the test method.
```csharp
[TestMethod]
[ExpectedException(typeof(ArgumentNullException))]
public void TestThrowsArgumentNullException() {
// Code that should throw ArgumentNullException
throw new ArgumentNullException();
}
```
--------------------------------
### Markdown Strikethrough
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/blob/main/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/MarkdownTextBlock/InitialContent.md
Surround text with double tildes (~~) to render it with a strikethrough.
```markdown
This sentence includes ~~strikethrough text~~.
```
--------------------------------
### Markdown Tables
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/blob/main/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/MarkdownTextBlock/InitialContent.md
Tables are created using pipes (|) to separate headers and data, with a special row of dashes and colons to define column justification.
```markdown
some|header|labels
:---|:--:|---:
Left-justified|center-justified|right-justified
a|b|c
d|e|f
```
--------------------------------
### Registering Event Listener for Template Controls
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/wiki/Sample-Development
Implement IXamlRendererListener to find named controls within a template and register event handlers. Always check for null before accessing controls.
```csharp
var markdownText = control.FindChildByName("MarkdownText") as MarkdownTextBlock;
if (markdownText != null)
{
markdownText.LinkClicked += MarkdownText_LinkClicked;
}
```
--------------------------------
### Mark UI Thread Test Method with [UITestMethod]
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/wiki/Testing
For UWP tests that require execution on the UI thread, use the [UITestMethod] attribute. Note that this does not fully realize a created UI element.
```csharp
[UITestMethod]
public async Task MyUITestMethod() {
// UI thread test logic here
}
```
--------------------------------
### Registering a LinkClicked Event Handler
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/blob/main/Microsoft.Toolkit.Uwp.SampleApp/ReadMe.md
Find a MarkdownTextBlock control and attach a LinkClicked event handler. Ensure to check for null before accessing the control.
```csharp
var markdownText = control.FindChild("MarkdownText") as MarkdownTextBlock;
if (markdownText != null)
{
markdownText.LinkClicked += MarkdownText_LinkClicked;
}
```
--------------------------------
### Markdown Subscript
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/blob/main/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/MarkdownTextBlock/InitialContent.md
Precede text with `` tags to render it as subscript.
```markdown
This sentence includes subscript.
```
--------------------------------
### Markdown Bold
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/blob/main/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/MarkdownTextBlock/InitialContent.md
Surround text with double asterisks (**) or double underscores (__) to render it in bold.
```markdown
This sentence includes **bold text**.
```
--------------------------------
### Restricting Samples with ApiCheck
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/wiki/Sample-Development
Use the ApiCheck key to ensure a sample is only displayed on OS versions that support the required API. BadgeUpdateVersionRequired can provide a user-facing message about the minimum version.
```json
{
//...
"About": "MySample needs 10.0.18362 or higher to work.",
"ApiCheck": "Windows.UI.Xaml.Controls.NavigationView",
"BadgeUpdateVersionRequired": "Fall Creators Update required",
//...
}
```
--------------------------------
### Merge Custom Resources with XamlControlsResources
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/blob/main/Microsoft.Toolkit.Uwp.UI.Controls/ReadMe.txt
Integrate custom application resources with XamlControlsResources by using MergedDictionaries. This allows for overriding default XamlControlsResources.
```xaml
```
--------------------------------
### Fenced Code Block with Language Identifier
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/blob/main/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/MarkdownTextBlock/InitialContent.md
Use three backticks (```) to create a fenced code block. Optionally, specify a language identifier after the opening backticks for syntax highlighting.
```csharp
```csharp
public static void Main(string[] args)
{
Console.WriteLine("Hello world!");
}
```
```
--------------------------------
### Mark Test Method with [TestMethod]
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/wiki/Testing
Use the [TestMethod] attribute to mark a standard unit test method. This is the primary attribute for tests in the Shared project type.
```csharp
[TestMethod]
public void MyTestMethod() {
// Test logic here
}
```
--------------------------------
### Markdown Bold and Italics
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/blob/main/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/MarkdownTextBlock/InitialContent.md
Surround text with triple asterisks (***) or triple underscores (___) to render it in both bold and italics.
```markdown
This sentence includes ***bold & italic text***.
```
--------------------------------
### Markdown Italics
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/blob/main/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/MarkdownTextBlock/InitialContent.md
Surround text with single asterisks (*) or single underscores (_) to render it in italics.
```markdown
This sentence includes *italic text*.
```
--------------------------------
### Markdown Superscript
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/blob/main/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/MarkdownTextBlock/InitialContent.md
Precede text with a caret (^) to render it as superscript. For multi-word superscripts, enclose the text in parentheses after the caret.
```markdown
This sentence includes super^script.
```
```markdown
This sentence^(has a superscript with multiple words)
```
--------------------------------
### Markdown Block Quotes
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/blob/main/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/MarkdownTextBlock/InitialContent.md
Use a right angle bracket (>) at the beginning of each line to create block quotes. Multiple angle brackets can be used for nested quotes.
```markdown
>Quote1
>Quote2.1
>>Quote2.Nest1.1
>>
>>Quote2.Nest1.2
>
>Quote2.3
>Quote3.1
>Quote3.2
>Quote4.1
>
>Quote4.2
>Quote5.1
Quote5.2
>Quote6
Plain text.
```
--------------------------------
### Markdown YAML Headers
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/blob/main/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/MarkdownTextBlock/InitialContent.md
YAML metadata is defined at the beginning of a document, enclosed by three horizontal lines. It must conform to the YAML specification.
```markdown
---
title: Windows Community Toolkit
date: 2018/10/17
---
```
--------------------------------
### Nested Lists
Source: https://github.com/communitytoolkit/windowscommunitytoolkit/blob/main/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/MarkdownTextBlock/InitialContent.md
Lists can be nested. For nested unordered lists, indent the items by four spaces or one tab.
```markdown
1. Ordered list item 1
2. * Bullet 1 in list item 2
* Bullet 2 in list item 2
3. List item 3
```