WPF Adding a custom property in a control

Question

Ok i have a WPF application in which i have a resource dictionary. In the dictionary i have a new style for a Button that looks like this :

    <Style x:Key="MenuButtonStyle" TargetType="Button">
      <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">

                <Grid>
                    <Image x:Name="Imager" RenderOptions.BitmapScalingMode="HighQuality" Width="{TemplateBinding Width}"  Height="{TemplateBinding Height}" Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Tag}" VerticalAlignment="Center" HorizontalAlignment="Center" Stretch="UniformToFill"/>
                </Grid>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter TargetName="Imager" Property="Width" Value="24" />
                        <Setter TargetName="Imager" Property="Height" Value="24" />
                    </Trigger>
                    <Trigger Property="IsPressed" Value="true">
                        <Setter TargetName="Imager" Property="Width" Value="16" />
                        <Setter TargetName="Imager" Property="Height" Value="16" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

And use this stye in my XAML like this :

<Button x:Name="Home" Style="{DynamicResource MenuButtonStyle}" Width="20" Height="20" Tag="\Images\Home.png"/>
<Button x:Name="Settings" Style="{DynamicResource MenuButtonStyle}" Width="20" Height="20" Tag="\Images\Settings.png"/>

Now what i want to do is, Create a new property in the Button style named OverWidth and OverHeight in order to use it like this :

<Trigger Property="IsMouseOver" Value="true">
   <Setter TargetName="Imager" Property="Width" Value= OVERWIDTH/>
   <Setter TargetName="Imager" Property="Height" Value= OVERHEIGHT/>
</Trigger>

And in XAML :

<Button x:Name="Home" Style="{DynamicResource MenuButtonStyle}" Width="20" Height="20" Tag="\Images\Home.png" OVERWIDTH = "24"/>

I dont even know if this is possible. I dont want to use Binding SomeIntengerfrom C# code. Thanks in advance.

Answer 1

You can use the attached properties:

public class Extensions
{
    public static readonly DependencyProperty OverWidthProperty =
        DependencyProperty.RegisterAttached("OverWidth", typeof(double), typeof(Extensions), new PropertyMetadata(default(double)));

    public static void SetOverWidth(UIElement element, double value)
    {
        element.SetValue(OverWidthProperty, value);
    }

    public static double GetOverWidth(UIElement element)
    {
        return (double)element.GetValue(OverWidthProperty);
    }
}

Xaml:

xmlns:extensions="clr-namespace:NAMESPACE FOR Extensions class"

<Trigger Property="IsMouseOver" Value="true">
    <Setter Property="MinWidth" Value="{Binding Path=(extensions:Extensions.OverWidth), RelativeSource={RelativeSource Self}}"/>
</Trigger>

<Button extensions:Extensions.OverWidth="100" Width="10"/>

Answer 2

I used the Tag property, which works very well. I can write anything on Tag

For example (AXML) on a Button:

<Button x:Name="Btn80" Click="eventoClick" Tag="80">Casillero 80</Button>}

I can use a string field to add lists or values int, date, etc to then interpret and convert the string into anything.

**I used this solution, due to the need to add an ID field to a button.