WPF custom control two styles in button

Question

i created custom button. I would like defined style in control, but this style it dont use because i used style in used this control. This is my code:

<Button x:Class="Spd.Client.Controls.IconButton"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:Spd.Client.Controls"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Button.Style>
        <Style TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Button}}"> 
            DONT WORKED
            <Style.Triggers>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="ToolTip" Value="{Binding TooltipMessage}" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
    <StackPanel Orientation="Horizontal">
        <Rectangle Width="12" Height="12" Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}">
            <Rectangle.OpacityMask>
                <VisualBrush Stretch="Fill" Visual="{Binding Path=Icon,RelativeSource={RelativeSource AncestorType={x:Type local:IconButton}}}" />
            </Rectangle.OpacityMask>
        </Rectangle>
        <TextBlock Text="{Binding Path=Message,RelativeSource={RelativeSource AncestorType={x:Type local:IconButton}}}" FontSize="10" Margin="2 0 0 0"/>
    </StackPanel>
</Button>

Usage:

<controls:IconButton Message="Click me!" 
  Icon="{StaticResource appbar_user}" Style="{StaticResource SuccessButton}"      
  TooltipMessage="This is tooltip for disabled button" IsEnabled="False"/>

Used it only Style={StaticResource SuccessButton} and dont use it style in button for set tooltip. What is correct solution? Thanks

Answer 1

Here is my suggestion:

Xaml:

<UserControl x:Class="CustomButtonSOSHelpAttempt.IconButton"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:customButtonSosHelpAttempt="clr-namespace:CustomButtonSOSHelpAttempt">
<Button>
    <Button.Style>
        <Style BasedOn="{StaticResource {x:Type Button}}"
               TargetType="{x:Type Button}">
            <Style.Triggers>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="ToolTip" Value="{Binding Path=ToolTipMessage, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type customButtonSosHelpAttempt:IconButton}}}" />
                    <Setter Property="ToolTipService.ShowOnDisabled" Value="True" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
    <StackPanel Orientation="Horizontal">
        <Rectangle Width="12"
                   Height="12"
                   Fill="{Binding Path=Foreground,
                                  RelativeSource={RelativeSource FindAncestor,
                                                                 AncestorType={x:Type customButtonSosHelpAttempt:IconButton}}}">
            <Rectangle.OpacityMask>
                <VisualBrush Stretch="Fill"
                             Visual="{Binding Path=Icon,
                                              RelativeSource={RelativeSource AncestorType={x:Type customButtonSosHelpAttempt:IconButton}}}" />
            </Rectangle.OpacityMask>
        </Rectangle>
        <TextBlock Margin="2 0 0 0"
                   FontSize="10"
                   Text="{Binding Path=Message,
                                  RelativeSource={RelativeSource AncestorType={x:Type customButtonSosHelpAttempt:IconButton}}}" />
    </StackPanel>
</Button></UserControl>

XAML's code behind:

public partial class IconButton
{
    public static readonly DependencyProperty MessageProperty = DependencyProperty.Register("Message", typeof(string), typeof(IconButton), new PropertyMetadata(default(string)));
    public static readonly DependencyProperty IconProperty = DependencyProperty.Register("Icon", typeof(object), typeof(IconButton), new PropertyMetadata(default(object)));
    public static readonly DependencyProperty ToolTipMessageProperty = DependencyProperty.Register("ToolTipMessage", typeof(object), typeof(IconButton), new PropertyMetadata(default(object)));

    public IconButton()
    {
        InitializeComponent();
    }

    public string Message
    {
        get { return (string) GetValue(MessageProperty); }
        set { SetValue(MessageProperty, value); }
    }

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

    public object ToolTipMessage
    {
        get { return (object) GetValue(ToolTipMessageProperty); }
        set { SetValue(ToolTipMessageProperty, value); }
    }
}

Usage in Window class:

<Window x:Class="CustomButtonSOSHelpAttempt.MainWindow"
    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:local="clr-namespace:CustomButtonSOSHelpAttempt"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:system="clr-namespace:System;assembly=mscorlib"
    Title="MainWindow"
    Width="525"
    Height="350"
    mc:Ignorable="d">
<Window.Resources>
    <Image x:Key="AppbarUser"
           Source="Res/appbar_user.png" />
</Window.Resources>
<Grid>
    <local:IconButton Width="100"
                      Height="100"
                      Foreground="#FF00FF00"
                      Icon="{StaticResource AppbarUser}"
                      IsEnabled="False"
                      Message="click me!!!"
                      ToolTipMessage="Tool tip message!!!" />
</Grid></Window>

This solution has worked for me, but first of all try to change YOUR style solution in the next way:

<Button.Style>
        <Style BasedOn="{StaticResource {x:Type Button}}"
               TargetType="{x:Type Button}">
            <Style.Triggers>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="ToolTip" Value="{Binding Path=ToolTipMessage, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type customButtonSosHelpAttempt:IconButton}}}" />
                    <Setter Property="ToolTipService.ShowOnDisabled" Value="True" />
                </Trigger>
            </Style.Triggers>
        </Style>
</Button.Style>

I couldn't do that because, I don't have your code behind. That's all, let me know in case you need more explanations.

Best Regards.