Trigger a VisualState when the value of a bool property changes to true (and ignore when changes to false)

922 views Asked by At

I'm working on a text editor whose UI will have two states: narrow and wide.

Narrow is primarily intended to be used for window sizes below < 720px, and wide when above. However, in addition, if there is only one file open, I want the narrow UI state to be used regardless of the window size (i.e. even if it's >= 720 px).

I've a bool property that keeps record on whether there is more than one file open or not:

    private bool _moreThan1FileOpen = false;
    public bool MoreThan1FileOpen
    {
        get { return _moreThan1FileOpen; }
        set
        {
            _moreThan1FileOpen = value;
        }
    }

But I've not had any success linking a VisualState trigger to be linked to this property's value i.e. if true, go to this state, and if false, move to the next VisualState.

Any guidance on how I can achieve this via VisualState.StateTriggers will be much appreciated.

--

As adviced by dotMorten, I've changed the property setter to raise the PropertyChanged event and also to an int Property:

private bool _numFilesOpen = 0;
public bool NumFilesOpen
{
    get { return _numFilesOpen; }
    set
    {
        _numFilesOpen = value;
        RaisePropertyChanged("NumFilesOpen");
    }
}

Ideally, I'd have it working with 2 states:

        <VisualState x:Name="WideState">
            <VisualState.StateTriggers>
                <triggers:CompositeStateTrigger Operator="And">
                    <triggers:CompareStateTrigger Value="{Binding NumFilesOpen}" CompareTo="1" Comparison="GreaterThan" />
                    <triggers:CompareStateTrigger Value="{Binding WindowWidth}" CompareTo="719" Comparison="GreaterThan" />
</VisualState.StateTriggers>

        <VisualState x:Name="NarrowState">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="0" />
            </VisualState.StateTriggers>

However, the composite state trigger doesn't seem to be working, and so I ended up with 3 states:

        <VisualState x:Name="NarrowStatee">
            <VisualState.StateTriggers>
                <triggers:CompareStateTrigger Value="{Binding NumFilesOpen}" CompareTo="2" Comparison="LessThan" />
            </VisualState.StateTriggers>

        <VisualState x:Name="WideState">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="720" />
            </VisualState.StateTriggers>

    <VisualState x:Name="NarrowState">
        <VisualState.StateTriggers>
            <AdaptiveTrigger MinWindowWidth="0" />
        </VisualState.StateTriggers>
1

There are 1 answers

2
dotMorten On

Your setter should raise the PropertyChanged event for that property, or the state trigger would not know it should re-bind.

ie Implement INotifyPropertyChanged on your interface, then in the setter call PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(MoreThan1FileOpen)));