VisualStateManager with custom content

[Martin Bozsó]

Added visual state to the sfButton like:

<Setter Property="VisualStateManager.VisualStateGroups">

    <Setter.Value>

        <VisualStateGroupList>

            <VisualStateGroup x:Name="CommonStates">

                <VisualState x:Name="Normal">

                    <VisualState.Setters>

                        <Setter Property="Opacity" Value="1" />

                        <Setter Property="BackgroundColor" Value="#d5427d" />

                    </VisualState.Setters>

                </VisualState>

                <VisualState x:Name="Pressed">

                    <VisualState.Setters>

                        <Setter Property="TextColor" Value="#f8f8f8" />

                        <Setter Property="BackgroundColor" Value="#a83565" />

                    </VisualState.Setters>

                </VisualState>

                <VisualState x:Name="Disabled">

                    <VisualState.Setters>

                        <Setter Property="Opacity" Value="0.3" />

                        <Setter Property="BackgroundColor" Value="#f49ab3" />

                    </VisualState.Setters>

                </VisualState>

            </VisualStateGroup>

        </VisualStateGroupList>

    </Setter.Value>

</Setter>

but when I want to use custom content with datatemplate:

            <sfButtons:SfButton

                BackgroundColor="#d5427d"

                Command="{Binding Test}"

                CornerRadius="10"

                MaximumWidthRequest="300"

                Style="{StaticResource SfButtonStyle}">

                <DataTemplate>

                    <Grid>

                        <ActivityIndicator

                            HorizontalOptions="Center"

                            IsRunning="{Binding TestLoad}"

                            VerticalOptions="Center" />

                        <Label

                            FontSize="20"

                            HorizontalOptions="Center"

                            Text="{translate:Translate Text}"

                            TextColor="White"

                            VerticalOptions="Center">

                          

                        </Label>

                    </Grid>

                </DataTemplate>

            </sfButtons:SfButton>

then its background changes back to the default also the visual state not working anymore

[Kamalesh Periyasamy]

Hi Martin Bozsó,

 

Thank you for reaching out to us. We’ve reviewed the behavior you described and identified that the issue is related to the BackgroundColor property. In .NET MAUI, BackgroundColor is of type Color, while the Background property accepts a Brush.

 

To ensure better compatibility with visual states and custom content, we recommend using the Background property instead of BackgroundColor. The Background property offers greater flexibility and works seamlessly with brushes and visual states.

 

For your reference, we’ve prepared a sample with the necessary code changes, which we’ve attached below. Please try this solution and let us know if you encounter any further issues.

 

Regards,

Kamalesh P

Attachment: ButtonSample_8d495e71.zip