DataTrigger 在 ToggleButton 单击时更改 TextBlock 文本

Question

我试图在单击 TextBlock 所在的 ToggleButton 时更改 TextBlock 的文本。TextBlock 与图像一起位于 StackPanel 中，StackPanel 位于 ToggleButton 的 DataTemplate 中.

我正在尝试使用 ViewModel 中名为 EditState 的属性来完成此操作。单击 ToggleButton 时，EditState 属性成功更改为“True”，因此问题不在 ViewModel 中。

没有错误显示，TextBlock 的文本不会改变。这是我目前的 XAML 代码：

<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>

我正在寻找与 MVVM 一致的解决方案。这是我第一次使用 WPF 并使用 MVVM 开发项目。如果有人能纠正我的错误或指出正确的方向，我将不胜感激。

Answer 1

"符合 MVVM 的解决方案" 是您在设置控件样式时的一种误解。这只是一个视图元素，不应依赖于任何视图模型。 MVVM 与此处无关。

ContentTemplate 中的 TextBlock 应通过 Text="{Binding}" 显示 ToggleButton 的 Content 属性，内容属性应由样式 Setter 设置并由 ToggleButton 的 IsChecked 属性.

上的样式触发器更改

另请注意，ContentTemplate 上的 DataType="{x:Type ToggleButton}" 毫无意义且不正确。 DataType 用于自动使用 DataTemplate 资源，此处不会发生这种情况。并且它应该匹配内容的类型，而不是控件的类型。

<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>

DataTrigger 在 ToggleButton 单击时更改 TextBlock 文本

DataTrigger to change TextBlock text on ToggleButton click

c#

wpf

xaml

datatrigger

mvvm