Pages

Thursday, 9 February 2023

Xamarin.Forms Visual State Manager

Use the Visual State Manager to make changes to XAML elements based on visual states set from code.

Visual State Manager is a concept that was introduced in Xamarin Forms 3.0 which allows you to do visual changes according to a state. So basically according to a status change, you can change the properties of any UI control.

By default, it has 3 pre-defined states: Normal, Disabled, Focused. A good use case then is when using an entry, Why? Because the entry already supports these states by definition.

For example, if you want to change the color of an entry when it’s focused, you just have to add the VisualStateManager.VisualStateGroups property and change the style for each state.

<Entry Placeholder="Add">
            <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="White" />
                            </VisualState.Setters>
                        </VisualState>

                        <VisualState x:Name="Focused">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="LightGray" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
        </Entry>



No comments:

Post a Comment