UWP Bindings in VisualState Setters

Question

Is it actually possible to use bindings with the Setters Value property in VisualState, because when I try to use x:Bind the initial view of the page is not using the bindings and with Binding the page does not use them ever or do I need to do something additional?

For example if I use the layout below and I start the app with a width between 400 - 800 the PassInput Passwordbox will not have a placeholder. When I resize the window to more than 800 and then back it will finally have the placeholder.

Example:

<Page
    x:Class="UWP.Learning.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    x:Name="Page">
    <RelativePanel Background="White">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="WindowSizeStates">
                <VisualState x:Name="SmallState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="400" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="PassInput.PlaceholderText" Value="{x:Bind MyPlaceHolder, Mode=OneWay}" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="WideState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="800" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="PassInput.PlaceholderText" Value="{x:Null}" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <TextBlock
            Name="PassLabel"
             RelativePanel.AlignTopWithPanel="True"
             RelativePanel.AlignLeftWithPanel="True"
             RelativePanel.AlignRightWithPanel="True"
             Text="Pass input label"
             HorizontalAlignment="Center" />
        <PasswordBox
             Name="PassInput"
             RelativePanel.AlignLeftWithPanel="True"
             RelativePanel.AlignRightWithPanel="True"
             RelativePanel.Below="PassLabel"
             VerticalAlignment="Center"
             Margin="20,0" />
    </RelativePanel>
</Page>

Code behind:

namespace UWP.Learning
{
    using Windows.UI.Xaml.Controls;

    public sealed partial class MainPage : Page
    {
        public MainPage() { this.InitializeComponent(); }
        public string MyPlaceHolder => "FOOBAR";
    }
}

Answer 1

Looks like a bug to me. An easy workaround is to have a one-time check within the Loaded event.

Loaded += (s, e) =>
{
    switch (ActualWidth)
    {
        case var w when (w >= 400 && w < 800):
            VisualStateManager.GoToState(this, "SmallState", false);
            break;
        case var w when (w >= 800):
            VisualStateManager.GoToState(this, "WideState", false);
            break;
    }
};