DataTrigger to change TextBlock text on ToggleButton click-CodePudding

I am trying to change the text of a TextBlock when clicking on the ToggleButton the TextBlock is located in. The TextBlock is located within a StackPanel, together with an image, and the StackPanel is located within the DataTemplate of the ToggleButton.

I am trying to accomplish this using a property called EditState within the ViewModel. The EditState property changes to "True" successfully when clicking the ToggleButton, so the issue is not within the ViewModel.

There is no error showing, the text of the TextBlock just won't change. Here is the XAML code I have at the moment:

<ToggleButton x:Name="btnEdit" Grid.ColumnSpan="1" Command="{Binding EditCommand}" 
                          IsEnabled="{Binding CanEdit}" MinWidth="168">
                <ToggleButton.Style>
                    <Style TargetType="{x:Type ToggleButton}">
                        <Setter Property="ContentTemplate">
                            <Setter.Value>
                                <DataTemplate DataType="{x:Type ToggleButton}">
                                    <StackPanel Orientation="Horizontal">
                                        <Image Source="/Resources/IconEdit.jpg" Height="20">
                                            <Image.Style>
                                                <Style TargetType="Image">
                                                    <Style.Triggers>
                                                        <Trigger Property="IsEnabled" Value="False">
                                                            <Setter Property="Opacity" Value="0.2" />
                                                        </Trigger>
                                                    </Style.Triggers>
                                                </Style>
                                            </Image.Style>
                                        </Image>
                                        <TextBlock x:Name="tbkEdit" Text="Enable Editing" Margin="5" />
                                    </StackPanel>
                                    <DataTemplate.Triggers>
                                        <DataTrigger Binding="{Binding EditState}" Value="True">
                                            <Setter TargetName="tbkEdit" Property="Text" 
                                               Value="Cancel Editing"/>
                                        </DataTrigger>
                                    </DataTemplate.Triggers>
                                </DataTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </ToggleButton.Style>
            </ToggleButton>

I am looking for a solution consistent with MVVM. This is my first time using WPF and developing a project using MVVM. If someone could correct my mistake or point me in the right direction I would greatly appreciate it.

CodePudding user response：

"a solution consistent with MVVM" is a misconception when you are styling a control. This is only a view element and should not depend on any view model. MVVM is not relevant here.

The TextBlock in the ContentTemplate should show the ToggleButton's Content property by Text="{Binding}", and the Content property should be set by a Style Setter and changed by a Style Trigger on the ToggleButton's IsChecked property.

Also note that DataType="{x:Type ToggleButton}" on the ContentTemplate is pointless and incorrect. DataType is meant for automatic usage of DataTemplate resources, which does not happen here. And it is supposed to match the type of the Content, which is not the type of the control.

<ToggleButton ...>
    <ToggleButton.Style>
        <Style TargetType="ToggleButton">
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Image ...>
                                ...
                            </Image>
                            <TextBlock Text="{Binding}" Margin="5"/>
                        </StackPanel>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Content" Value="Enable Editing"/>
            <Style.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="Content" Value="Cancel Editing"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </ToggleButton.Style>
</ToggleButton>