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

Question

I want to change the style of the button on the basis of if else condition when first the wpf application is getting loaded. On application loaded using if, there will be one style of button and in else part, there will be another. How to achieve this using Datatriggers or else using MVVM pattern.

Kindly Suggest?

Thanks

Solution 1

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

The following is from the application resources xaml file. I use it to decide which view to use for the ProjectViewModel based on 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 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);
    }

}

}

Solution 2

You can use Style.Setters to set default value. For other determined conditions use Style.Triggers. This works like 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>

Solution 3

Alternatively, if you want to use DataTriggers, you 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 must expose the boolean property NormalButtonMode. In this example I only set the Content property of the button, but you can list any number of Setters inside the DataTrigger. You can also put this Style in a resource dictionary and just link it for each button using StaticResource. Just make sure you expose the NormalButtonMode (or whatever) property on each and every ViewModel - maybe put it in a base class.

Comments

[Tarun]

Thanks for the reply. I want to change the style means I want to change the image on loading the application using if else condition. xaml like: <button style="" command="some"/>. Thanks

[psulek]

This is what i search for. Thanks!