在 WP8 中创建自定义按钮控件答案

【问题标题】：Create an custom button control in WP8在 WP8 中创建自定义按钮控件
【发布时间】：2014-09-08 02:49:44
【问题描述】：

...

好的，谢谢 Scott Nimrod，我找到了一个方法：创建一个新项目，添加一个新的用户控件，构建到 dll 并添加对我的应用项目的引用

这是我的代码，如果有人需要:)

在我的应用程序的 xaml 页面中（点击事件有效，但 2 图片“sourceNormal”和“sourcePressed”不可见）

<local:ButtonImage Width="40" Height="40"
                         Click="ButtonImage_Click"
                         SourceNormal="/download_home.png"                             
                         SourcePressed="/download_nowplaying.png"/>

用户控件 XAML

<UserControl x:Class="MyCustomControl.ButtonImage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="480" d:DesignWidth="480"

DataContext="{Binding RelativeSource={RelativeSource Self}}"         
xmlns:ntd="clr-namespace:MyCustomControl">

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Button x:Name="Button_Image" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Button.Template>
            <ControlTemplate TargetType="Button">
                <Grid Background="Transparent">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ImageNormal">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ImagePressed">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Collapsed</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="MouseOver"/>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ImageNormal">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Collapsed</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ImagePressed">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Image x:Name="ImageNormal" VerticalAlignment="Center" HorizontalAlignment="Center" Source="{Binding SourceNormal}" Stretch="Uniform"/>
                    <Image x:Name="ImagePressed" VerticalAlignment="Center" HorizontalAlignment="Center" Source="{Binding SourcePressed}" Stretch="Uniform"/>                        
                </Grid> 
            </ControlTemplate>
        </Button.Template>
    </Button>

</Grid>

UserControl 后面的代码：

namespace MyCustomControl
{
public partial class ButtonImage : UserControl
{
    public ButtonImage()
    {
        InitializeComponent();            
        Button_Image.Click += ButtonImage_Click;
    }

    public ImageSource SourceNormal
    {
        get { return (ImageSource)GetValue(SourceNormalProperty);}
        set { SetValue(SourceNormalProperty, value); }
    }        
    public ImageSource SourcePressed
    {
        get { return (ImageSource)GetValue(SourcePressedProperty); }
        set { SetValue(SourcePressedProperty, value); }
    }

    public event EventHandler Click;
    void ButtonImage_Click(object sender, RoutedEventArgs e)
    {
        var eventHandler = this.Click;
        if (eventHandler != null)
        {
            eventHandler(this, e);
        }
    }



    /////////////////////// SourceNormal /////////////////////////////////////////////////////

    //----------------------------------------------------------------------------------------
    public static readonly DependencyProperty SourceNormalProperty = DependencyProperty.RegisterAttached(
        "SourceNormal",
        typeof(ImageSource),
        typeof(ButtonImage),
        new PropertyMetadata(null)
    );

    public static ImageSource GetSourceNormal(UIElement element)
    {
        if (element == null)
        {
            new ArgumentNullException("element");
        }
        return (ImageSource)element.GetValue(SourceNormalProperty);
    }

    public static void SetSourceNormal(UIElement element, ImageSource value)
    {
        if (element == null)
        {
            new ArgumentNullException("element");
        }

        element.SetValue(SourceNormalProperty, value);
    }
    //----------------------------------------------------------------------------------------

    /////////////////////// SourcePressed ////////////////////////////////////////////////////

    //----------------------------------------------------------------------------------------
    public static readonly DependencyProperty SourcePressedProperty = DependencyProperty.RegisterAttached(
        "SourcePressed",
        typeof(ImageSource),
        typeof(ButtonImage),
        new PropertyMetadata(null)
    );

    public static ImageSource GetSourcePressed(UIElement element)
    {
        if (element == null)
        {
            new ArgumentNullException("element");
        }
        return (ImageSource)element.GetValue(SourcePressedProperty);
    }

    public static void SetSourcePressed(UIElement element, ImageSource value)
    {
        if (element == null)
        {
            new ArgumentNullException("element");
        }

        element.SetValue(SourcePressedProperty, value);
    }
}

}

【问题讨论】：

我不认为这是一个很好的选择。我假设图像很小，因此可以将其转换为 base64 字符串。您可以将 base64 字符串转换为位图图像并使其成为 DependencyProperty 的默认值
哦，我不是这个意思 :) 我的意思是我想知道我是否可以制作一个新的“按钮”，我可以在我的其他应用程序中使用它，或者像 WP 工具包这样的包中的某种控件或coding4fun 工具包

标签： c# xaml windows-phone-8

【解决方案1】：

答案是肯定的。

Telerik 用他们的 RadControls 做到这一点。

只需创建一个单独的项目并添加 WPF 依赖于 UI 的主要引用。这也是实现 Prism 模块时的一种模式。

在您的其他项目中，只需添加对定义您的样式的 dll 的引用。

【讨论】：