[ACCEPTED]-How to change the style of a button based on if else using DataTriggers in wpf mvvm-mvvm

Accepted answer
Score: 17

You can use Style.Setters to set default value. For other 2 determined conditions use Style.Triggers. This works like 1 if else.

<TextBlock.Style>
    <Style TargetType="TextBlock">
        <Style.Triggers>
            <DataTrigger Binding="{Binding ElementName=EditorWindow, Path=Category}" Value="R">
                <Setter Property="Visibility" Value="Visible"/>
            </DataTrigger>
        </Style.Triggers>
        <Style.Setters>
            <Setter Property="Visibility" Value="Collapsed"/>
        </Style.Setters>
    </Style>
</TextBlock.Style>
Score: 3

Alternatively, if you want to use DataTriggers, you 10 can use the following:

        <Button Command="{Binding SomeButtonCommand}" Content="Click Me!">
        <Button.Style>
            <Style TargetType="{x:Type Button}">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Path=NormalButtonMode, Mode=OneWay}" Value="True">
                        <Setter Property="Content" Value="This Button is in Normal Mode" />
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Path=NormalButtonMode, Mode=OneWay}" Value="False">
                        <Setter Property="Content" Value="This Button is in the Other Mode" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
    </Button>

In this case the ViewModel 9 must expose the boolean property NormalButtonMode. In 8 this example I only set the Content property 7 of the button, but you can list any number 6 of Setters inside the DataTrigger. You can 5 also put this Style in a resource dictionary 4 and just link it for each button using StaticResource. Just 3 make sure you expose the NormalButtonMode 2 (or whatever) property on each and every 1 ViewModel - maybe put it in a base class.

Score: 2

You should look into Data Templates and 9 a Template Selector. Here is a hastily copy 8 pasted example from my own code, it's not 7 immediately applicable to buttons but I 6 think it should help you along your way.

The 5 following is from the application resources 4 xaml file. I use it to decide which view 3 to use for the ProjectViewModel based on 2 a variable in the ViewModel:

    <DataTemplate DataType="{x:Type viewmod:ProjectViewModel}">
    <DataTemplate.Resources>
        <DataTemplate x:Key="ProjectEditViewTemplate">
            <view:ProjectEditView/>
        </DataTemplate>
        <DataTemplate x:Key="ServiceSelectionViewTemplate">
            <view:ServiceSelectionView/>
        </DataTemplate>
    </DataTemplate.Resources>
    <ContentControl Content="{Binding}" ContentTemplateSelector="{StaticResource ProjectViewModelTemplateSelector}" />
</DataTemplate>

The ProjectViewModelTemplateSelector 1 is defined as follows:

    public class ProjectViewModelTemplateSelector : DataTemplateSelector
{
    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        FrameworkElement element = container as FrameworkElement;

        if (element != null && item != null && item is ViewModel.ProjectViewModel)
        {
            if ((item as ViewModel.ProjectViewModel).EditMode)
            {
                return element.FindResource("ProjectEditViewTemplate") as DataTemplate;
            }
            else
            {
                return element.FindResource("ServiceSelectionViewTemplate") as DataTemplate;
            }

        }
        else
            return base.SelectTemplate(item, container);
    }

}

}

More Related questions