Synchronize two button's styles in wpf

Question

I have two buttons in my DataGrid's Row.

1. Edit --- symbol : pencil, Save ---- symbol : floppy
2. Delete --- symbol : big cross, Cancel --- symbol : small cross

Case 1. I clicked the Edit Button, At this time 2 things should happen.....

1. Edit Button should be replaced with save button. I mean the symbol should change to floppy.
2. Delete button should be replaced with cancel button.

Case 2. I click the save button:

1. Save Button should be replaced with Edit button.
2. Cancel Button should be replaced with Delete button.

Case 3. When I click cancel button:

1. Save Button should be replaced with Edit Button.
2. Cancel button should be replaced with Delete Button.

Case 4. When I click delete button:

1. No style changes.........

I have successfully implemented the first point of case 1. Here is the XAML:

<Style TargetType="{x:Type Button}" x:Key="EditSaveButton">
    <Setter Property="Margin" Value="3" />
    <Setter Property="Focusable" Value="False" />
    <Setter Property="Width" Value="32" />
    <Setter Property="Height" Value="32" />
    <Setter Property="Background" Value="{StaticResource NoramlEditButtonBorderBrush}" />
    <Setter Property="Content" Value="{StaticResource EditButtonPathData}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Name="Border" Background="{StaticResource NoramlEditButtonBorderBrush}" Padding="5,2" SnapsToDevicePixels="true" CornerRadius="3">
                    <Border.Effect>
                        <DropShadowEffect ShadowDepth="{StaticResource NoramlEditButtonShadowDepth}" 
                                          Color="{StaticResource NoramlEditButtonShadowColor}"
                                          BlurRadius="{StaticResource NoramlEditButtonBlurRadius}" />
                    </Border.Effect>
                    <Path x:Name="buttonSymbol" Data="{TemplateBinding Content}" Stretch="Uniform" Fill="#FFFFFFFF" Height="24" Width="24" RenderTransformOrigin="0.5,0.5">
                        <Path.RenderTransform>
                            <TransformGroup>
                                <TransformGroup.Children>
                                    <RotateTransform Angle="0" />
                                    <ScaleTransform ScaleX="1" ScaleY="1" />
                                </TransformGroup.Children>
                            </TransformGroup>
                        </Path.RenderTransform>
                    </Path>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="Border" Property="Background" Value="{Binding Background,RelativeSource={RelativeSource TemplatedParent}}" />
                        <Setter TargetName="Border" Property="Effect">
                            <Setter.Value>
                                <DropShadowEffect ShadowDepth="0" 
                                                  Color="{Binding Background.Brush,RelativeSource={RelativeSource TemplatedParent}}"
                                                  BlurRadius="10" />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter TargetName="Border" Property="Background" Value="{StaticResource PressedEditButtonBorderBrush}" />
                        <Setter TargetName="Border" Property="Effect">
                            <Setter.Value>
                                <DropShadowEffect ShadowDepth="{StaticResource PressedEditButtonShadowDepth}" 
                                                  Color="{StaticResource PressedEditButtonShadowColor}" 
                                                  BlurRadius="{StaticResource PressedEditButtonBlurRadius}" />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledEditButtonBorderBrush}" />
                        <Setter TargetName="Border" Property="Effect">
                            <Setter.Value>
                                <DropShadowEffect ShadowDepth="{StaticResource DisabledEditButtonShadowDepth}" 
                                                  Color="{StaticResource DisabledEditButtonShadowColor}" 
                                                  BlurRadius="{StaticResource DisabledEditButtonBlurRadius}" />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <DataTrigger Binding="{Binding IsEditing,RelativeSource={RelativeSource AncestorType=DataGridRow}}" Value="true">
            <Setter Property="Content" Value="{StaticResource SaveButtonPathData}" />
            <Setter Property="Background" Value="{StaticResource NoramlSaveButtonBorderBrush}" />
        </DataTrigger>
    </Style.Triggers>
</Style>

If somebody gives me the answer to the second point of case 1, then I will try to accomplish other cases my-self.

Thanks.............

Answer 1

I think the way you are approaching this is adding extra complication to it. Instead of two buttons you actually want four buttons, but only two are visible at any time.

I would have a Boolean value IsInEdit and use it to bind the visibility of the buttons (visbility converter for edit/delete, inverted visibility converter for save/cancel)

On save or cancel IsInEdit = false and on edit IsInEdit = true