Styling button in MVVM

Question

I am writing a small WPF application using MVVM pattern.

I set some style resources for buttons into my main window and I would like them to apply to the buttons into the views. The problem is that some of the buttons are having a style with trigger. So I would like to inherit this style from the generic one

here is my main window code:

 <Window.Resources>
    <DataTemplate DataType="{x:Type vm:HomeViewModel}">
        <views:HomeView/>
    </DataTemplate>
    <DataTemplate DataType="{x:Type vm:DetailReportViewModel}">
        <views:DetailReportView/>
    </DataTemplate>
    <DataTemplate DataType="{x:Type vm:TransferViewModel}">
        <views:TransferView/>
    </DataTemplate>
    <Style TargetType="{x:Type Button}">
        <Setter Property="Margin" Value="5"/>
        <Setter Property="MinWidth" Value="30"/>
        <Setter Property="Foreground" Value="Red"/>

    </Style>
    <Style TargetType="{x:Type ComboBox}">
        <Setter Property="Margin" Value="5"/>
    </Style>
   </Window.Resources>

here is the button XAML into my view/usercontrol

<Button Content="Delete" Command="{Binding DeleteReportCommand}">
            <Button.Style>
                <Style TargetType="{x:Type Button}">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding Mode}">
                            <DataTrigger.Value>
                                <vm:Mode>Add</vm:Mode>
                            </DataTrigger.Value>
                            <Setter Property="Visibility" Value="Collapsed"/>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding Mode}">
                            <DataTrigger.Value>
                                <vm:Mode>Edit</vm:Mode>
                            </DataTrigger.Value>
                            <Setter Property="Visibility" Value="Visible"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Button.Style>
        </Button>

I tried to used BasedOn="{StaticResource {x:Type Button} to inherit but it doesn't seems to work (see img)

I tried with a key name but static resource won't find the key name as it's not on the same view. And BasedOn is not accepting Dynamic resource. Anything I am missing?

Thank you

Answer 1

You can put all the custom styles in a separate resource dictionary file and you can add it in usercontrol.resources.

Refer this: http://www.codeproject.com/Articles/35346/Using-a-Resource-Dictionary-in-WPF

Or you can put all those in app.xaml (Application.Resources).

Refer this: http://msdn.microsoft.com/en-us/library/system.windows.resourcedictionary.aspx