bucker
12/5/2018 - 2:53 AM

Custom View in UWP: ControlTemplate

How to: Create custom view in UWP -> ControlTemplate

1. In Solution Explorer, go to "Add New Item" and select "Templated Control"
2. There will be a file Themes/Generic.xaml, which contains the style of your new control templated
3. To set the custom view property, use the `TemplateBinding` in xaml, and define the `DependencyProperty` in your C#


XAML:

```
    <Style TargetType="local:TagView">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:TagView">
                    <Border
                        Background="LightGray"
                        CornerRadius="3"
                        Padding="4"
                        Margin="4,0">
                        <TextBlock FontSize="12" Text="{TemplateBinding TagName}" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
```

C#:

```
    public sealed class TagView : Control
    {
        #region Dependency Property Registrations

        public static readonly DependencyProperty TagNameProperty =
            DependencyProperty.Register("TagName", typeof(string), typeof(TagView), new PropertyMetadata(string.Empty));

        #endregion

        public TagView()
        {
            this.DefaultStyleKey = typeof(TagView);
        }

        #region Properties

        public string TagName
        {
            get => (string)GetValue(TagNameProperty);
            set => SetValue(TagNameProperty, value);
        }

        #endregion
    }

```