- AdamJonsson
- Posts: 10
- Joined:
Set triggers for changing color of Icon in button
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:
The button is created like this:
The style 'IconStyle_default' is just there to determine the default colors for the icon.
My current ButtonTemplate looks like this:
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?
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:
Code: Select all
<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>
Code: Select all
<Button>
<Control Template="{StaticResource home_ic}" Style="{StaticResource IconStyle_default}" Foreground="#FFFFFFFF" Background="#00FFFFFF"/>
</Button>
My current ButtonTemplate looks like this:
Code: Select all
<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>
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?
-
sfernandez
Site Admin
- Posts: 2984
- Joined:
Re: Set triggers for changing color of Icon in button
If the Button template is only for those icons, you can define it like this:
And then use it like this:
You can adapt the triggers and colors used as you like.
Code: Select all
<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>
Code: Select all
<Button Style="{StaticResource icon_button_style}" Content="{StaticResource home_ic}" Width="64" Height="64"/>
- AdamJonsson
- Posts: 10
- Joined:
Re: Set triggers for changing color of Icon in button
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:
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.
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:
I actually stripped the button I've made of some code to make it easier to read.If the Button template is only for those icons, you can define it like this:
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.
-
sfernandez
Site Admin
- Posts: 2984
- Joined:
Re: Set triggers for changing color of Icon in button
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.
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.
Who is online
Users browsing this forum: No registered users and 88 guests