在 wpf 中同步两个按钮的样式

本文关键字:两个 按钮 样式 wpf 同步 | 更新日期: 2023-09-27 18:31:57

我的 DataGrid 行中有两个按钮。

  1. 编辑---符号:铅笔,保存----符号:软盘
  2. 删除---符号:大十字,取消---符号:小十字

案例 1.我点击了编辑按钮,此时应该发生 2 件事.....

  1. 编辑按钮应替换为保存按钮。我的意思是符号应该更改为软盘。
  2. 删除按钮应替换为取消按钮。

案例 2.我点击保存按钮:

  1. 保存按钮应替换为编辑按钮。
  2. "取消"按钮
  3. 应替换为"删除"按钮。

案例 3.当我点击取消按钮时:

    "
  1. 保存"按钮应替换为"编辑按钮"。
  2. "取消"按钮应替换为"删除按钮"。

案例 4.当我单击删除按钮时:

  1. 没有样式变化...

我已经成功地实现了案例1的第一点。下面是 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>

如果有人给了我案例1的第二点的答案,那么我会尝试自己完成其他案例。

谢谢。。。。。。。。。。。。。

在 wpf 中同步两个按钮的样式

我认为您处理这个问题的方式增加了额外的复杂性。您实际上想要四个按钮,而不是两个按钮,但任何时候都只能看到两个按钮。

我会有一个布尔值 IsInEdit 并使用它来绑定按钮的可见性(用于编辑/删除的可见性转换器,用于保存/取消的反转可见性转换器)

保存或取消IsInEdit = false以及编辑IsInEdit = true