Standard visual states doesn't work for custom control

[alexdi220]

Describe the bug
Hi,
I have a custom control that inherits from Control. My control has a style with the standard VisualState x:Name="Disabled" and it doesn't work when IsEnabled=False (you can see a red border instead of black)

Steps to reproduce the bug
MainWindow.xaml

<Window
    x:Class="IssueSample.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:IssueSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
        <StackPanel.Resources>
            <SolidColorBrush x:Key="DisabledBackground" Color="Black"/>
            <Style x:Key="style" TargetType="local:CustomControl">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="local:CustomControl">
                            <Grid>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="root" 
                                                                           Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource DisabledBackground}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Border Width="100" Height="100" x:Name="root" Background="Red"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </StackPanel.Resources>
        <local:CustomControl IsEnabled="False" Style="{StaticResource style}"/>
    </StackPanel>
</Window>

MainWindow.xaml.cs

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;

namespace IssueSample {
    public sealed partial class MainWindow : Window {
        public MainWindow() {
            this.InitializeComponent();
        }
    }
    public class CustomControl : Control { }
}

Expected behavior
The state should work and CustomControl will be black

Screenshots

Version Info

NuGet package version:
[Microsoft.WinUI 3.0.0-preview2.200713.0]

Windows app type:

UWP	Win32
	Yes

Windows 10 version	Saw the problem?
Insider Build (xxxxx)
May 2020 Update (19041)	Yes
November 2019 Update (18363)
May 2019 Update (18362)
October 2018 Update (17763)
April 2018 Update (17134)
Fall Creators Update (16299)
Creators Update (15063)

Device form factor	Saw the problem?
Desktop	Yes
Xbox
Surface Hub
IoT

Additional context

IssueSample.zip

[Felix-Dev]

@alexdi220 This is expected. See this discussion. You will have to listen to the property change and go the disabled visual state yourself.

[alexdi220]

It would be nice to have the Disabled state out of box. It looks strange when control has property but has no state. Another reason is a bug and I can't change the visual state of my control

[ranjeshj]

Agree with @alexdi220 this is by design. This allows deriving controls to handle it any way they want to.

[mdtauk]

Agree with @alexdi220 this is by design. This allows deriving controls to handle it any way they want to.

@ranjeshj Could the SDK Templated Control template, include some commented out boilerplate code to switch to a Disabled state, or to explain the rationale for not handling it by default?

[ranjeshj]

Agree with @alexdi220 this is by design. This allows deriving controls to handle it any way they want to.

@ranjeshj Could the SDK Templated Control template, include some commented out boilerplate code to switch to a Disabled state, or to explain the rationale for not handling it by default?

I think it is a good idea to add this to the visual studio template. @mdtauk can you open a new issue for that ? We can send that to the tools team.