Question

我基本上尝试创建一个带有图像背景和边框的按钮，如果它是悬停，单击或默认状态，则会根据颜色更改颜色。我将使用其中几种类型的按钮，并且我希望定义一个可以重用和更改ImageSource的ControlTemplate。这是我到目前为止所拥有的，但由于某种原因，TemplateBinding似乎不起作用。按钮没有设置背景图像。

模板：

    <ControlTemplate x:Name="SkillIconTemplate" TargetType="Button">
        <Border CornerRadius="10" BorderThickness="2" Margin="5">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualStateGroup.Transitions>
                        <VisualTransition To="MouseOver" GeneratedDuration="0:0:0.1"/>
                        <VisualTransition To="Pressed" GeneratedDuration="0:0:0.1"/>
                    </VisualStateGroup.Transitions>
                    <VisualState x:Name="Normal" />
                    <VisualState x:Name="MouseOver">
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetName="BorderBrush" 
                                                    Storyboard.TargetProperty="Color" 
                                                    To="Yellow" />
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Pressed">
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetName="BorderBrush" 
                                                    Storyboard.TargetProperty="Color"
                                                    To="Black"/>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Border.BorderBrush>
                <SolidColorBrush x:Name="BorderBrush" Color="White"/>
            </Border.BorderBrush>
            <Border.Background>
                <ImageBrush ImageSource="{TemplateBinding local:SkillIcon.IconImageSource}"/>
            </Border.Background>
        </Border>
    </ControlTemplate>

按钮：

    <Button x:Name="skillIcon0" Width="75" Height="75" ClickMode="Press" local:SkillIcon.IconImageSource="ms-appx:/data/images/icons/skill_icon_0.png" Template="{StaticResource SkillIconTemplate}"/>
    <Button x:Name="skillIcon1" Width="75" Height="75" ClickMode="Press" local:SkillIcon.IconImageSource="ms-appx:/data/images/icons/skill_icon_1.png" Template="{StaticResource SkillIconTemplate}"/>
    …

物业代码：

public abstract class SkillIcon : DependencyObject
{
    public static readonly DependencyProperty IconImageSourceProperty = DependencyProperty.RegisterAttached(
        "IconImageSource", 
        typeof(ImageSource), 
        typeof(SkillIcon),
        new PropertyMetadata(GetIconImage(0))
        );

    public static ImageSource GetIconImageSource(DependencyObject obj)
    {
        return (ImageSource)obj.GetValue(IconImageSourceProperty);
    }

    public static void SetIconImageSource(DependencyObject obj, ImageSource value)
    {
        obj.SetValue(IconImageSourceProperty, value);
    }

    /// <summary>
    /// Gets the image source for the button
    /// </summary>
    public static ImageSource GetIconImage(int index)
    {
        Uri source = new Uri(string.Format("ms-appx:/data/images/icons/skill_icon_{0}.png", index), UriKind.RelativeOrAbsolute);
        return new BitmapImage() { UriSource = source };
    }
}

代码中的用法：

        SkillIcon.SetIconImageSource(skillIcon0, SkillIcon.GetIconImage(0));

Answer 1

我最终将Button的背景绑定到边框的背景：

    <ControlTemplate x:Name="SkillIconTemplate" TargetType="Button">
        <Border CornerRadius="10" BorderThickness="2" Margin="5" Background="{TemplateBinding Background}">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualStateGroup.Transitions>
                        <VisualTransition To="MouseOver" GeneratedDuration="0:0:0.05"/>
                        <VisualTransition To="Pressed" GeneratedDuration="0:0:0.05"/>
                    </VisualStateGroup.Transitions>
                    <VisualState x:Name="Normal" />
                    <VisualState x:Name="MouseOver">
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetName="BorderBrush" 
                                                    Storyboard.TargetProperty="Color" 
                                                    To="Yellow" />
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Pressed">
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetName="BorderBrush" 
                                                    Storyboard.TargetProperty="Color"
                                                    To="Black"/>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Border.BorderBrush>
                <SolidColorBrush x:Name="BorderBrush" Color="White"/>
            </Border.BorderBrush>
        </Border>
    </ControlTemplate>

使用附加属性创建ControlTemplate

1 个答案: