Question

I’m having a WPF Prism 4 MVVM application. ViewItemControl is used as Navigation Control to change views using Prism Regions and Views.

<Style x:Key="ViewItemControlStyle" BasedOn="{StaticResource {x:Type Button}}" TargetType="{x:Type Controls:ViewItemControl}">
    <Setter Property="MinWidth" Value="110" />
    <Setter Property="Height" Value="60" />
    <Setter Property="Background" Value="{StaticResource ButtonBackgroundBrush}" />
    <Setter Property="Margin" Value="1" />
    <Setter Property="OverridesDefaultStyle" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Controls:ViewItemControl}">

                    <ContentPresenter x:Name="PART_Content" 
                                      VerticalAlignment="Center" HorizontalAlignment="Center"
                                      Style="{DynamicResource DefaultButtonText}" />
               <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="true">

                    </Trigger>
                    <Trigger Property="IsPressed" Value="true">

                    </Trigger>
                    <Trigger Property="IsSelected" Value="true">

                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">

                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Now I implemented a ImageButton Custom Control with Normal, Hover and Selected Triggers to change Image Source.

<ControlTemplate x:Key="ImageButtonTemplate" TargetType="{x:Type Controls:ImageButton}">
    <Grid x:Name="Grid">
        <Image Name="ButtonImage" 
            Source="{Binding NormalImage, RelativeSource={RelativeSource TemplatedParent}}" 
            Height="{Binding ImageSize, RelativeSource={RelativeSource TemplatedParent}}" 
            Width="{Binding ImageSize, RelativeSource={RelativeSource TemplatedParent}}"
            ToolTip="{TemplateBinding ToolTip}"/>
        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" 
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True" />

    </Grid>

    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="true">
            <Setter TargetName="ButtonImage" Property="Source" Value="{Binding HoverImage, RelativeSource={RelativeSource TemplatedParent}}" />
        </Trigger>
        <Trigger Property="IsChecked" Value="true">
            <Setter TargetName="ButtonImage" Property="Source" Value="{Binding SelectedImage, RelativeSource={RelativeSource TemplatedParent}}" />
        </Trigger>
        <Trigger Property="IsEnabled" Value="false">
            <Setter TargetName="ButtonImage" Property="Source" Value="{Binding DisabledImage, RelativeSource={RelativeSource TemplatedParent}}" />
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

I want to define a ViewItemControl to be used as Navigation with Image Button Control in it. I want to bind Isselected Trigger of both the controls to achieve both change of Image Source and Change View. I need some help in overriding this behavior.

Answer 1

In an MVVM application, this behavior should be done through a binding to your view model, rather than through XAML directly.

For example, in an application I’m working on, I have a View that has to “modes”: “Overview” mode and “Details” mode. My ToggleButton has a binding like:

<ToggleButton IsSelected="{Binding Path=DetailsModeSelected, Mode=TwoWay}" ... />

When the toggle button is selected, the binding sets the property DetailsModeSelected to true, which in my view model changes some other properties, which the view then picks up through IPropertyChangeNotification.

Let your ViewModel do this work, and the particular control (or the view) is irrelevant.