I am wondering how do I dynamically change style for button.
What I expect is when I click first button the style should change to “ClickedButton” but for the second should be “DefaultButton”, respectively when second button is clicked. These styles are defined in styles.xaml file.
I am tring something like this:
View:
<ContentView.Resources>
<styleConverter:StyleConverter x:Key="StyleConverter"
DefaultStyle="{StaticResource DefaultButton}"
ClickedStyle="{StaticResource ClickedButton}"/>
</ContentView.Resources>
<Grid RowDefinitions="19, 2, 42">
<Label Grid.Row="0" Text="Alarm state" Margin="2, 0, 0, 0"/>
<BoxView Grid.Row="1" HeightRequest="4" WidthRequest="0"/>
<Border
WidthRequest="180"
Grid.Row="2" Style="{StaticResource DefaultBorder}">
<Grid
ColumnDefinitions="58, 58, 58"
x:DataType="viewModel:OverviewListVM"
>
<Border Style="{StaticResource LeftRoundedBorder}" >
<Button Padding="0" Text="All" HeightRequest="38"
Style="{Binding IsButtonAllClicked, Converter={StaticResource AlarmStateToStyleConverter}}"
Command="{Binding ButtonAllClickedCommand}">
</Button>
</Border>
<Border Style="{StaticResource RightRoundedBorder}" Grid.Column="2" >
<Button ImageSource="warning.png" VerticalOptions="Center" HorizontalOptions="Center"
Style="{Binding IsButtonWarnClicked, Converter={StaticResource AlarmStateToStyleConverter}}"
Command="{Binding ButtonWarnClickedCommand}"
>
</Button>
</Border>
</Grid>
</Border>
</Grid>
Converter:
public class StyleConverter : IValueConverter
{
public Style? DefaultStyle { get; set; }
public Style? ClickedStyle { get; set; }
public object? Convert(object? value, Type? targetType, object? parameter, CultureInfo? culture)
{
return (bool)value! ? ClickedStyle : DefaultStyle;
}
public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
ViewModel:
[ObservableProperty]
private bool isButtonWarnClicked = false;
[ObservableProperty]
private bool isButtonAllClicked = true;
[RelayCommand]
private void ButtonAllClicked()
{
ResetButtons();
IsButtonAllClicked = true;
}
[RelayCommand]
private void ButtonWarnClicked()
{
ResetButtons();
IsButtonWarnClicked = true;
}
private void ResetButtons()
{
IsButtonAllClicked = false;
IsButtonWarnClicked = false;
}
Only style for the first button is set (IsButtonAllClicked = true), when I click to warn button the relaycommand is triggering but style doesn’t change. How do I change style dynamically with MVVM pattern?