wpf - 使用混合的wpf自定义控件

Question

我正在尝试使用图像构建自定义ToggleIconButton= 带有图像的切换按钮。但是有些功能并Command没有真正起作用。

我创建了以下自定义类：

public class ToggleIconButton : ToggleButton
{
    static ToggleIconButton()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(ToggleIconButton), new FrameworkPropertyMetadata(typeof(ToggleIconButton)));
    }

    public static readonly DependencyProperty IconProperty =
        DependencyProperty.Register("Icon", typeof(string), typeof(ToggleIconButton), new PropertyMetadata(default(string)));

    public string Icon
    {
        get { return (string)GetValue(IconProperty); }
        set { SetValue(IconProperty, value); }
    }
}

并使用Blend，我创建了以下样式：

ResourceDictionary1.xaml

<SolidColorBrush x:Key="ToolBarButtonHoverBorder" Color="#3399FF"/>
<SolidColorBrush x:Key="ToolBarButtonChecked" Color="#E6F0FA"/>
<SolidColorBrush x:Key="ToolBarButtonHover" Color="#C2E0FF"/>
<SolidColorBrush x:Key="ToolBarButtonPressedBorder" Color="#3399FF"/>
<SolidColorBrush x:Key="ToolBarButtonPressed" Color="#99CCFF"/>
<Style x:Key="ToggleButtonStyle" TargetType="{x:Type ToggleButton}">
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="Padding" Value="2"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="HorizontalAlignment" Value="Center"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
                    <Image Width="22" Height="22" HorizontalAlignment="Center" VerticalAlignment="Center" Source="{Binding Icon, Mode=TwoWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type controls:ToggleIconButton}}}"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="true">
                        <Setter Property="BorderBrush" Value="{StaticResource ToolBarButtonHoverBorder}"/>
                        <Setter Property="Background" Value="{StaticResource ToolBarButtonChecked}"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter Property="BorderBrush" Value="{StaticResource ToolBarButtonHoverBorder}"/>
                        <Setter Property="Background" Value="{StaticResource ToolBarButtonHover}"/>
                    </Trigger>
                    <Trigger Property="IsKeyboardFocused" Value="true">
                        <Setter Property="BorderBrush" Value="{StaticResource ToolBarButtonHoverBorder}"/>
                        <Setter Property="Background" Value="{StaticResource ToolBarButtonHover}"/>
                    </Trigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsMouseOver" Value="true"/>
                            <Condition Property="IsChecked" Value="true"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="BorderBrush" Value="{StaticResource ToolBarButtonPressedBorder}"/>
                        <Setter Property="Background" Value="{StaticResource ToolBarButtonPressed}"/>
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsKeyboardFocused" Value="true"/>
                            <Condition Property="IsChecked" Value="true"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="BorderBrush" Value="{StaticResource ToolBarButtonPressedBorder}"/>
                        <Setter Property="Background" Value="{StaticResource ToolBarButtonPressed}"/>
                    </MultiTrigger>
                    <Trigger Property="IsPressed" Value="true">
                        <Setter Property="BorderBrush" Value="{StaticResource ToolBarButtonPressedBorder}"/>
                        <Setter Property="Background" Value="{StaticResource ToolBarButtonPressed}"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="ToggleIconButtonStyle" TargetType="{x:Type controls:ToggleIconButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type controls:ToggleIconButton}">
                <Grid>
                    <ToggleButton Content="ToggleButton" Style="{DynamicResource ToggleButtonStyle}"/>
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="Click!" Style="{DynamicResource ContentPresenterStyle}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<Style x:Key="ContentPresenterStyle" TargetType="{x:Type ContentPresenter}"/>

并应用自定义控件：

<ToolBar VerticalAlignment="Top">
    <Controls:ToggleIconButton 
        Content="ToggleIconButton" 
        Height="24" 
        Style="{DynamicResource ToggleIconButtonStyle}" 
        VerticalAlignment="Center" 
        Width="24"
        Icon="/Images/musicNote48.png"
        Command="{Binding AddCommand}"
        />

控件显示良好，带有图标，但未调用命令。如果我点击 ContentPresenter 内容，它是......我希望删除ContentPresenter带有“点击！”标签的内容。并仅使用图标...