WPF单击时更改按钮上的xaml图标

Question

我正在尝试创建锁定和解锁文本框的按钮

我做了一堆阅读，在这个网站上找到了问题：WPF Change button background image when clicked

我接受了答案并想出了这个。

<Button Grid.Row="0" Command="{Binding ChangePnumTextState}" CommandParameter="{Binding ElementName=ButtonCanvas, Path=Source}">
    <Canvas Name="ButtonCanvas">
         <Canvas.Style>
              <Style TargetType="{x:Type Canvas}">
                   <Style.Triggers>
                        <DataTrigger Binding="{ Binding IsPNumLocked}" Value="True">
                            <Setter Property="Source" Value="{StaticResource appbar_lock}" />
                        </DataTrigger>
                        <DataTrigger Binding="{ Binding IsPNumLocked}" Value="False">
                            <Setter Property="Source" Value="{StaticResource appbar_unlock}" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
          </Canvas.Style>
     </Canvas>
</Button>

我已将这批图标http://modernuiicons.com/ 导入到 xaml 文件中，当我需要时会绘制该文件

我环顾四周，找不到任何使用 SVG 而不是图像的示例

编辑

好的，有人指出 SVG 不适用于 wpf，我可能只是混淆了名称，这是我在资源库中用于获取图标的代码示例

<Canvas x:Key="appbar_3d_obj" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
    <Path Width="40" Height="40" Canvas.Left="18" Canvas.Top="18" Stretch="Fill" Fill="{DynamicResource BlackBrush}" Data="F1 M 18,21.7037L 43.9259,18L 58,25.4074L 58,54.2963L 32.8148,58L 18,49.1111L 18,21.7037 Z "/>
</Canvas>

我得到的错误是视觉工作室在 Setters 和 states 中强调了属性

“成员‘源’无法识别或不可访问”

Answer 1

您现在遇到的 XAML 存在一些问题。

正如其他人所指出的，WPF 画布上没有 Source 属性。如果您要做的只是制作您已经定义的按钮内容画布，则可以使用相同的技术将 Button 的 Content 属性绑定到 App.xaml 中定义的 Canvases（或任何可能的位置） )

您可能遇到的另一个问题是数据触发器中的绑定。我还没有测试过，但我认为你不会在你期望的用户控件（或任何包含按钮）的样式中拥有相同的数据上下文看起来数据上下文不是问题，我想我正在考虑模板问题

另外，我不确定您的 ChangePnumTextState 命令在做什么，但是您在画布中作为参数发送是否有原因？如果您的命令只是更改 IsPnumLocked 上的布尔值，您应该能够处理 XAML 中的所有内容并保持关注点分离。

这里有一个简单的更改，可以使按钮的内容成为您定义的 Canvas：

<Button Command="{Binding ChangePnumTextState}">
        <Button.Style>
            <Style TargetType="{x:Type Button}">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsPNumLocked}" Value="True">
                        <Setter Property="Content" Value="{StaticResource appbar_lock}"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding IsPNumLocked}" Value="False">
                        <Setter Property="Content" Value="{StaticResource appbar_unlock}"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
    </Button>

请注意，我们不是尝试设置画布的来源，而是将按钮的内容设置为您已经定义的画布。

绑定上的 RelativeSource 也应该负责数据上下文的解析（尽管您需要确保您搜索的相对源具有您所追求的数据上下文）

编辑： 另一种方法是根据布尔值（我假设 IsPNumLocked 是）为您的画布路径制作转换器。然后，您可以将画布作为按钮内容的子项，并且还可以更轻松地包含其他内容。

示例转换器：

    public class IsPnumLockedToCanvasPathConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        bool val = (bool)value;
        return val 
            ? "F1 M 22.17,36.4216L 25.3369,36.4216L 25.3369,31.6711C 25.3369,24.6745 31.0087,19.0027 38.0053,19.0027C 45.0019,19.0027 50.6737,24.6745 50.6737,31.6711L 50.6737,36.4216L 53.841,36.4216L 53.8411,57.008L 22.17,57.008L 22.17,36.4216 Z M 45.9231,31.6711C 45.9231,27.2982 42.3782,23.7533 38.0053,23.7533C 33.6324,23.7533 30.0875,27.2982 30.0875,31.6711L 30.0875,36.4216L 45.923,36.4216L 45.9231,31.6711 Z "
            : "F1 M 22.1698,36.4215L 25.3366,36.4215L 25.3367,31.6711C 25.3367,24.6745 31.0085,19.0027 38.0051,19.0027C 45.0017,19.0027 50.6735,24.6745 50.6735,31.6711L 45.9228,31.6711C 45.9228,27.2982 42.3779,23.7533 38.0051,23.7533C 33.6322,23.7533 30.0873,27.2982 30.0873,31.6711L 30.0873,36.4216L 53.8408,36.4215L 53.8409,57.008L 22.1698,57.008L 22.1698,36.4215 Z ";
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

你的按钮可以这样设置：

<Button Command="{Binding ChangePnumTextState}">
        <Button.Resources>
            <converters:IsPnumLockedToCanvasPathConverter x:Key="IsPnumLockedToCanvasPathConverter"/>
        </Button.Resources>
        <StackPanel Orientation="Vertical">
            <Canvas Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
                <Path Width="40" Height="40" Canvas.Left="18" Canvas.Top="18" Stretch="Fill" Fill="{DynamicResource BlackBrush}" Data="{Binding IsPNumLocked, Converter={StaticResource IsPnumLockedToCanvasPathConverter}}"></Path>
            </Canvas>
            <TextBlock Text="Other Content"/>
        </StackPanel>

    </Button>

Answer 2

您正在尝试在 Canvas 对象上设置 Source 属性。该控件没有Source 属性。

Source 属性通常与Image 控件一起使用。

但是，由于您使用的是 Canvas，因此您只需将两个 Path 对象叠加到 Canvas 中即可。为每个 Path 命名，然后使用您的 DataTriggers 更改每个 Path 对象的可见性。

类似：

<Button Grid.Row="0" Command="{Binding ChangePnumTextState}" CommandParameter="{Binding ElementName=ButtonCanvas, Path=Source}">
<Canvas Name="ButtonCanvas">
     <Path Name="appbar_lock" Data="...your data here..."/>
     <Path Name="appbar_unlock" Data="...your data here..."/>
     <Canvas.Style>
          <Style TargetType="{x:Type Canvas}">
               <Style.Triggers>
                    <DataTrigger Binding="{Binding IsPNumLocked}" Value="True">
                        <Setter TargetName="appbar_lock" Property="Visibility" Value="Visible" />
                        <Setter TargetName="appbar_unlock" Property="Visibility" Value="Hidden" />
                    </DataTrigger>
                    <DataTrigger Binding="{Binding IsPNumLocked}" Value="False">
                        <Setter TargetName="appbar_lock" Property="Visibility" Value="Hidden" />
                        <Setter TargetName="appbar_unlock" Property="Visibility" Value="Visible" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
      </Canvas.Style>
 </Canvas>
</Button>