diff --git a/.gitbook/assets/IDataTemplateExample.png b/.gitbook/assets/IDataTemplateExample.png
deleted file mode 100644
index 855e870..0000000
Binary files a/.gitbook/assets/IDataTemplateExample.png and /dev/null differ
diff --git a/docs/templates/implement-IDataTemplate.md b/docs/templates/implement-IDataTemplate.md
index 502fcf1..75398b4 100644
--- a/docs/templates/implement-IDataTemplate.md
+++ b/docs/templates/implement-IDataTemplate.md
@@ -6,6 +6,8 @@ To use this interface you must implement the following two members in your class
- `public bool Match(object data) { ... }` you need to check in this method if the provided data matches your `IDataTemplate` or not. You need to return true if the data matches, otherwise false.
- `public IControl Build(object param) { ... }` In this method you need to build and return the control which represents your data.
+## Samples
+
### Basic Example
Below is a very basic sample implementation of the `IDataTemplate`-interface:
@@ -44,117 +46,6 @@ You can now use the class `MyDataTemplate` in your view like this:
```
-### Advanced Example
+### Advanced Samples
-Sometimes you may want to display a different Control for different states of your `ViewModel`. Let's assume you have a Property which is an `enum` called `ShapeType`, defined like this:
-
-```csharp
-public enum ShapeType
-{
- RedCircle,
- RedSquare,
- BlueCircle,
- BlueSquare
-}
-```
-
-We use this `enum` in our `ViewModel` as a property:
-
-```csharp
-// In our sample we use ReactiveUI but you don't need to do it.
-
-private ShapeType _ShapeType;
-
-///
-/// Gets or sets the shape type to display
-///
-public ShapeType ShapeType
-{
- get { return _ShapeType; }
- set { this.RaiseAndSetIfChanged(ref _ShapeType, value); }
-}
-```
-
-In our view we want to show a red circle if the user selects `ShapeType.RedCircle` and we want to show a blue square if the user selects `ShapeType.BlueSquare`. To achieve this will create a class called `ShapesTemplateSelector`, where have a `Dictionary` which stores the shape representations we want to look up.
-
-```csharp
-// remember to import the needed namespace
-// using Avalonia.Controls.Templates;
-
-public class ShapesTemplateSelector : IDataTemplate
-{
- // This Dictionary should store our shapes. We mark this as [Content], so we can directly add elements to it later.
- [Content]
- public Dictionary AvailableTemplates { get; } = new Dictionary();
-
- // Build the DataTemplate here
- public IControl Build(object param)
- {
- var key = param.ToString(); // Our Keys in the dictionary are strings, so we call .ToString() to get the key to look up
- if(key is null) // If the key is null, we throw an ArgumentNullException
- {
- throw new ArgumentNullException(nameof(param));
- }
- return AvailableTemplates[key].Build(param); // finally we look up the provided key and let the System build the DataTemplate for us
- }
-
- // Check if we can accept the provided data
- public bool Match(object data)
- {
- // Our Keys in the dictionary are strings, so we call .ToString() to get the key to look up
- var key = data.ToString();
-
- return data is ShapesEnum // the provided data needs to be our enum type
- && !string.IsNullOrEmpty(key) // and the key must not be null or empty
- && AvailableTemplates.ContainsKey(key); // and the key must be found in our Dictionary
- }
-}
-```
-
-Now we will setup the `ShapesTemplateSelector` in the `DataTemplates`-section of our `App.axaml`:
-
-```markup
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-Now we can will create a `ComboBox` which the user can use to select a `ShapeType`:
-
-```markup
-
-
-
-
-
-
-
-
- RedCircle
- BlueCircle
- RedSquare
- BlueSquare
-
-
-```
-
-Our final result looks like this:
-
-
\ No newline at end of file
+[Implementing IDataTemplate](https://github.com/AvaloniaUI/Avalonia.Samples/tree/main/src/Avalonia.Samples/DataTemplates/IDataTemplateSample)
\ No newline at end of file