Forums | NoesisGUI

Posted: **08 Jul 2019, 15:45**

Hi!
I'm new to XAML. Not a programmer, but artist/designer.

I need help with XAML-coding of button-template. It's a template which is used to display a button with a transparent background and a icon.
I want to be able to set triggers for the buttons so that the icon changes color when button is pressed.

The icon derives from a resource dictionary and is defined as a ControlTemplate like this:

<ResourceDictionary>
    <ControlTemplate x:Key="home_ic" TargetType="{x:Type Control}">
        <Viewbox>
            <Canvas Width="90" Height="90">
                <Path Fill="{TemplateBinding Background}" Data="F1 M 90.000,90.000 L 0.000,90.000 L 0.000,0.000 L 90.000,0.000 L 90.000,90.000 Z"/>
                <Path Fill="{TemplateBinding Foreground}" Data="F1 M 71.000,39.461 L 71.000,70.674 L 52.800,70.674 L 52.800,49.874 L 37.200,49.874 L 37.200,70.674 L 19.000,70.674 L 19.000,39.474 L 45.000,18.674 L 71.000,39.461 Z"/>
            </Canvas>
        </Viewbox>
    </ControlTemplate>
    </ResourceDictionary>

The button is created like this:

<Button>
  <Control Template="{StaticResource home_ic}" Style="{StaticResource IconStyle_default}" Foreground="#FFFFFFFF" Background="#00FFFFFF"/>
</Button>

The style 'IconStyle_default' is just there to determine the default colors for the icon.

My current ButtonTemplate looks like this:

<ControlTemplate x:Key="ImageButtonStyle" TargetType="{x:Type Button}">
        <Grid x:Name="grid">
            <Viewbox x:Name="Icon_viewbox" Width="Auto" Height="Auto">
                <ContentPresenter x:Name="contentPresenter"/>
            </Viewbox>
        </Grid>
</ControlTemplate>

How do I write a Button template that let's me set different states for the colors of the icon?

The ControlObect for the icon itself is not part of the ButtonTemplate. My best guess it that I need to connect the Properties for the Icon ControlObject Foreground and Background-color with the ContentPresenter. Is this possible to achieve?

Posted: **08 Jul 2019, 18:35**

If the Button template is only for those icons, you can define it like this:

<ControlTemplate x:Key="icon_button_template" TargetType="{x:Type Button}">
    <Control Template="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}"
        Background="{TemplateBinding Background}"
        Foreground="{TemplateBinding Foreground}"/>
</ControlTemplate>
<Style x:Key="icon_button_style" TargetType="{x:Type Button}">
    <Setter Property="Background" Value="Silver"/>
    <Setter Property="Foreground" Value="Red"/>
    <Setter Property="Template" Value="{StaticResource icon_button_template}"/>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Foreground" Value="Brown"/>
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
            <Setter Property="Foreground" Value="Crimson"/>
        </Trigger>
    </Style.Triggers>
</Style>

And then use it like this:

<Button Style="{StaticResource icon_button_style}" Content="{StaticResource home_ic}" Width="64" Height="64"/>

You can adapt the triggers and colors used as you like.

Posted: **09 Jul 2019, 13:52**

Thanks Sergio! Not just for helping me with this particular question, but for pointing out the difference between using a Style or a ControlTemplate. By reading
you suggestion I was reminded that Values set in a template can only be replaced by replacing the entire template. Values in a style can be replaced by setting the value explicitly when using the control. I realize that understanding when to use which one, or in a combination (referencing the ControlTemplate in a Style) is key to good "Templating".

Gonna play around with this some more and see what comes out.

I have one question. Your first sentence:

If the Button template is only for those icons, you can define it like this:

I actually stripped the button I've made of some code to make it easier to read.
In my original button I also included a transparent Ellipse which I triggered some animations on when pressed. Kinda like the "Inksplash" effect on Android buttons if you know what I mean.
Does your solution allow to have other objects included in the ControlTemplate or is mainly for a button with solely the icon.

Posted: **09 Jul 2019, 14:37**

In my example I just defined the minimal elements required to show the icon, but you can add any other elements you want: borders, images,, triggers, animations...

What I meant by using this template only for icons is that the template design expects a ControlTemplate in the Button.Content property, so it is a bit tied to representing those icon templates.

Forums | NoesisGUI

Set triggers for changing color of Icon in button

Set triggers for changing color of Icon in button

Re: Set triggers for changing color of Icon in button

Re: Set triggers for changing color of Icon in button

Re: Set triggers for changing color of Icon in button