切换按钮中的 wpf 图像不显示答案

【问题标题】：wpf image in toggle button doesn't show切换按钮中的 wpf 图像不显示
【发布时间】：2021-01-05 18:54:25
【问题描述】：

我正在尝试制作一个切换按钮样式，允许切换按钮在选中/取消选中时显示 2 个不同的图像。在设计预览中，我可以在切换按钮中看到图像，但在运行时图像根本不显示。我一直在使用资源作为构建操作并复制到输出目录，但它没有帮助。代码如下：

    <Window.Resources>
        <Image Source="Images/pencil.png" x:Key="PencilImage"></Image>
        <Image Source="Images/eraser.png" x:Key="EraserImage"></Image>

        <Style TargetType="{x:Type ToggleButton}"
         x:Key="ImageButton">
            <Setter Property="Background" Value="Transparent"></Setter>
            <Setter Property="Content"
            Value="{DynamicResource PencilImage}" />
            <Style.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="Content" Value="{DynamicResource EraserImage}"/>
                </Trigger>
                <Trigger Property="IsChecked" Value="False">
                    <Setter Property="Content" Value="{DynamicResource PencilImage}"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>

...

                <Border Grid.Row="7" Grid.Column="1" Grid.ColumnSpan="2" Height="25" Width="25">
                    <ToggleButton Style="{StaticResource ImageButton}" Height="25" Width="25"/>
                </Border>

【问题讨论】：

当 Build Action 为 Resource 时，不需要复制到输出目录。图像文件是否包含在名为 Images 的项目文件夹中？你为什么使用动态资源？试试 StaticResource 是否有效。
问题不可重现，即样式按预期工作。
静态资源也不起作用
我们不能告诉你更多。如前所述，您在此处显示的内容很有效。
还有其他可能导致此错误的原因吗？

标签： .net wpf xaml

【解决方案1】：

我还检查了您的示例源代码是否正常工作。

但是如何检查我在下面附加的 GitHub 示例？更适合WPF风格！

目前情况下不要使用 DynamicResource。

DynamicResource 应该在资源本身发生变化的情况下使用。但是目前的情况是资源正在从A替换到B，所以使用DynamicResource本身不会报错，但是是不正确的使用。只需使用 StaticResource。

还不错。

<Image Source="Images/pencil.png" x:Key="PencilImage"></Image>
<Image Source="Images/eraser.png" x:Key="EraserImage"></Image>

很好。

<Image Source="/ImageResourceExam;component/Images/pencil.png" x:Key="PencilImage"/>
<Image Source="/ImageResourceExam;component/Images/eraser.png" x:Key="EraserImage"/>

如果你的项目结构划分为类库结构，则需要指定Assembly。所以我更喜欢无条件指定程序集信息的资源命名规则。

更好。

<Geometry x:Key="G.PENCIL">M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z</Geometry>
<Geometry x:Key="G.ERASER">M16.24,3.56L21.19,8.5C21.97,9.29 21.97,10.55 21.19,11.34L12,20.53C10.44,22.09 7.91,22.09 6.34,20.53L2.81,17C2.03,16.21 2.03,14.95 2.81,14.16L13.41,3.56C14.2,2.78 15.46,2.78 16.24,3.56M4.22,15.58L7.76,19.11C8.54,19.9 9.8,19.9 10.59,19.11L14.12,15.58L9.17,10.63L4.22,15.58Z</Geometry>

如果可以的话，最好使用路径而不是图标。

您可以在这里轻松找到路径。
https://materialdesignicons.com

最后，使用 ControlTemplate

<Geometry x:Key="G.PENCIL">M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z</Geometry>
<Geometry x:Key="G.ERASER">M16.24,3.56L21.19,8.5C21.97,9.29 21.97,10.55 21.19,11.34L12,20.53C10.44,22.09 7.91,22.09 6.34,20.53L2.81,17C2.03,16.21 2.03,14.95 2.81,14.16L13.41,3.56C14.2,2.78 15.46,2.78 16.24,3.56M4.22,15.58L7.76,19.11C8.54,19.9 9.8,19.9 10.59,19.11L14.12,15.58L9.17,10.63L4.22,15.58Z</Geometry>
  
<Style TargetType="{x:Type ToggleButton}" x:Key="ImageButton">
    <Setter Property="Background" Value="Transparent"></Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Border Background="{TemplateBinding Background}">
                    <Viewbox>
                        <Path x:Name="path" Width="24" Height="24" Data="{StaticResource G.PENCIL}" Fill="#555555"/>
                    </Viewbox>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Cursor" Value="Hand"/>
                    </Trigger>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter TargetName="path" Property="Data" Value="{StaticResource G.ERASER}"/>
                        <Setter TargetName="path" Property="Fill" Value="Red"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我为你把源代码放到了GitHub上。
https://github.com/ncoresoftsource/stackoverflowsample/tree/main/src/answers/using-imageresource-app

【讨论】：