0

In a WPF project, I am trying to create a template for a button in resource dictionary that I will use through all my project that looks like the Photoshop template below with the option to change the Button icon (padlock in this case).

Photoshop Template

I saw these two questions

Both use custom control which works fine, but I don't want to do it using a custom control.

Also I found a solution using tag for the ImageSource, but in case I want to add a lot of properties, tag doesn't work

What I want to do is add a costume dependency property to the button control so I can do something like this:

 <Button ImageSource="????" OuterBorderBrush="?????" 
      InnerBorderBrush="????" Height="50" Width="150" 
      Content="LOGIN" FontSize="14" FontFamily="Trajan Pro 3"/>

This is the code that I wrote for the template:

<Style TargetType="{x:Type Button}">
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="BorderBrush" Value="#FFC8D6E5"/>
    <Setter Property="Background" Value="#FF5397C7"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Padding" Value="1"/>

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate  TargetType="{x:Type Button}">
                <Border x:Name="OuterBorder" CornerRadius="5"
                        BorderBrush="{TemplateBinding BorderBrush}" 
                        BorderThickness="{TemplateBinding BorderThickness}" 
                        Background="{TemplateBinding Background}" Padding="2" >
                    <Border x:Name="iNNERBorder" CornerRadius="5"
                        BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}" Padding="2" >
                        <Grid >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="2*"/>
                            </Grid.ColumnDefinitions>
                            <ContentPresenter Grid.Column="1" HorizontalAlignment="Center"
                                          VerticalAlignment="Center"/>
                            <Image x:Name="ButtonIcon" Width="20" Height="20" Margin="2" Grid.Column="0" 
                                   Source="/ControlsTemplate;component/Recources/Png/OPEN PADLOCK.png" ></Image>
                        </Grid>
                    </Border>

                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsKeyboardFocused" Value="true">

                    </Trigger>
                    <Trigger Property="ToggleButton.IsChecked" Value="true">

                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="#ADADAD"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Adamak18
  • 1
  • 3
  • You should create new component by deriving `Button`. There is also `Behaviors` and `Attached Dependency Properties` but in this case i would suggest the component part. – Eldar Dec 18 '19 at 18:30
  • @Eldar, can you give me a link on how to do it, or show me an example please – Adamak18 Dec 18 '19 at 19:17
  • It's **CUSTOM** _ not "costum" ..... – marc_s Dec 18 '19 at 19:24
  • Check this [answer](https://stackoverflow.com/a/13276319/12354911) – Eldar Dec 18 '19 at 19:26
  • @Adamak18, you can find some possible aproaches [in this QA post](https://stackoverflow.com/q/40657840/1506454) – ASh Dec 19 '19 at 08:56
  • @Eldar, both your topic and ahs's gave me an idea on how to do this. The solution I'm looking for is attached properties, obviously, right? Well I'm a beginner and I've done a lot of research these two days and finally got my first code to work, now I'm experimenting with the attached properties in many ways so I can get the results I want. – Adamak18 Dec 20 '19 at 11:03

0 Answers0