custom button control WPF

Question

Hi, i want to make a custom button using wpf. The button will be used to control a mediaplayer. the type(play, stop, pause,...) of the button is specified using an enum

namespace vgtunesWPF
{
public class MediaButton : Button
{
    [Browsable(true)]
    public Button_Type ButtonType
    {
        get { return (Button_Type)GetValue(ButtonTypeProperty); }
        set { SetValue(ButtonTypeProperty, value); }
    }

    public static readonly DependencyProperty ButtonTypeProperty = DependencyProperty.Register("ButtonType", typeof(Button_Type), typeof(MediaButton), new FrameworkPropertyMetadata(Button_Type.stop, FrameworkPropertyMetadataOptions.AffectsRender, ImageSourceChanged));
    static MediaButton()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(MediaButton), new FrameworkPropertyMetadata(typeof(MediaButton)));
    }
    private static void ImageSourceChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
    {
        Application.GetResourceStream(new Uri("pack://application:,,," + (string) e.NewValue));
    }
}
public enum Button_Type
{
    play = 0,
    pause = 1,
    stop = 2,
    forward = 3,
    backward = 4
}
public class ButtonTypeConverter : IValueConverter
{
    public object Convert(object value, Type TargetType, object Parameter, System.Globalization.CultureInfo culture)
    {
        if (value != null)
        {
            Button_Type type = (Button_Type)value;
            switch (type)
            {
                case Button_Type.play:
                    return new BitmapImage(new Uri("/vgtunesWPF;component/Images/Play.png",UriKind.Relative));
                case Button_Type.stop:
                    return new BitmapImage(new Uri("/vgtunesWPF;component/Images/Stop.png",UriKind.Relative));
                default:
                    break;
            }
        }
        return null;
    }
    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return null;
    }
}

In order to convert buttontype to the right image i created a converter. then the XAML:

<Style TargetType="{x:Type local:MediaButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:MediaButton}">
                <Canvas Width="30" Height="30">
                    <Canvas.Resources>
                        <local:ButtonTypeConverter x:Key="Converter"/>
                    </Canvas.Resources>
                    <Image Name="Normal" Source="{Binding Source={StaticResource Converter}, Converter={StaticResource Converter},Path=}" />
                    <Image Name="Disabled" Visibility="Hidden" Source="/vgtunesWPF;component/Images/PlayDisabled.png"/>
                </Canvas>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="Normal" Property="Visibility" Value="Visible"/>
                        <Setter TargetName="Normal" Property="Effect">
                            <Setter.Value>
                                <DropShadowEffect Color="AliceBlue" ShadowDepth="0" BlurRadius="15" />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="Normal" Property="Visibility" Value="Hidden"/>
                        <Setter TargetName="Disabled" Property="Visibility" Value="Visible"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The problem here is that i want to bind ButtonType to the normal image, but i can't figure out how. I can't get ButtonType accessible in the xaml

Answer 1

Hi,

maybe you try to bind to your dependency property "ButtonType".

<Image Name="Normal" Source="{Binding ButtonType, Converter={StaticResource Converter}"/>

Answer 2

Ok solved it. Apparently i had to add Relative source

<Image Name="Normal" Source="{Binding Converter={StaticResource Converter}, Path=ButtonType, RelativeSource={RelativeSource TemplatedParent}}" />