无法将图像显示为 WPF ToggleButton 的内容答案

【问题标题】：Cannot show image as content of WPF ToggleButton无法将图像显示为 WPF ToggleButton 的内容
【发布时间】：2016-08-07 05:04:48
【问题描述】：

我目前正在使用 VS 2015 和 WPF。几周前，我在我的项目的 App.xaml 中为 ToggleButton 定义了一个模板样式，以便用户可以看到按钮是否被选中。最初，切换按钮的内容是带有文本的 TextBlock。现在我想用图像替换那个文本块。此外，我在 App.xaml 中为图像定义了一些资源。

这是 App.xaml：

<Application x:Class="WPFDesignerPrototyp.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:WPFDesignerPrototyp"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <!-- Style for togglebuttons-->
        <Style x:Key="toggleButtonStyle" TargetType="{x:Type ToggleButton}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Border x:Name="outer"
                                BorderBrush="Black"
                                BorderThickness="1"
                                Margin="5,5,0,0"
                                Opacity=".9"
                                Background="Transparent">
                            <Border x:Name="inner"
                                      Margin="5"
                                      BorderThickness="0"
                                      Background="{Binding Background, RelativeSource={RelativeSource TemplatedParent}}">
                                <Grid x:Name="container">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="2*"/>
                                        <RowDefinition/>
                                    </Grid.RowDefinitions>
                                    <!--<TextBlock x:Name="display"
                                               Grid.Row="1"
                                               TextAlignment="Center"
                                               Text="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}"
                                               Margin="5,2,5,2"/>-->
                                    <Image x:Name="displayimage"
                                           Grid.Row="1"
                                           HorizontalAlignment="Center"
                                           Source="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}"
                                           Margin="5,2,5,2"/>
                                </Grid>
                            </Border>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="ToggleButton.IsChecked" Value="True">
                                <Setter TargetName="outer" Property="Background" Value="LightBlue"/>
                                <Setter TargetName="outer" Property="BorderBrush" Value="Transparent"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Image x:Key="imageHorizontalAlignmentLeft" Source="C:/Utilities/VS 2015 ImageLibrary/2015_VSIcon/AlignLeft/AlignLeft_16x.png"/>
        <Image x:Key="imageHorizontalAlignmentCenter" Source="C:/Utilities/VS 2015 ImageLibrary/2015_VSIcon/AlignStretchHorizontal/AlignStretchHorizontal_16x.png"/>
        <Image x:Key="imageHorizontalAlignmentRight" Source="C:/Utilities/VS 2015 ImageLibrary/2015_VSIcon/AlignRight/AlignRight_16x.png"/>
    </Application.Resources>
</Application>

然后 - 在我的 WPF 窗口中 - 我将新内容实现到我的一个切换按钮中。

<ToggleButton x:Name="setAlignLeft" Grid.Row="1" Grid.Column="1" Content="{StaticResource imageHorizontalAlignmentLeft}" Style="{StaticResource toggleButtonStyle}" Click="setAlignLeft_Click"/>

但不幸的是，什么也没发生。按钮的内容为空白。所以我用另一个切换按钮尝试了它，没有样式 toggleButtonStyle 并且它在那里工作。

我认为我的模板中一定有错误，但我不知道在哪里。

有人可以帮忙吗？

提前致谢，帕特里克

【问题讨论】：

标签： wpf xaml

【解决方案1】：

您需要与父级的Content.Source 绑定，因为Content 已经是Image。

   <Image x:Name="displayimage"
   Grid.Row="1"
   HorizontalAlignment="Center"
   Source="{Binding Content.Source, RelativeSource={RelativeSource TemplatedParent}}"
   Margin="5,2,5,2"/>

【讨论】：

谢谢尼廷！事情就是这样。