jc_lvngstn
Topic Author
Posts: 34
Joined: 23 Sep 2013, 03:03

Changing image colors

20 Jan 2014, 21:59

I'd like my icons to highlight/glow on mouseover or on selection. I know you are working on shader effects, I was just wondering if you might know of any alternatives before then. My icons are all atlased, and the only approach I know of right now is to create a duplicate black and white atlas, and show the colored icons on mouseover.
Any thoughts on this?
 
User avatar
ai_enabled
Posts: 221
Joined: 18 Jul 2013, 05:28
Contact:

Re: Changing image colors

21 Jan 2014, 05:32

Fast solution: you can add rectangle overlay with light semi-transparent white color brush and show it when the mouse is over icon.
AtomicTorch Studio Pte. Ltd. http://atomictorch.com
 
User avatar
sfernandez
Site Admin
Posts: 1920
Joined: 22 Dec 2011, 19:20

Re: Changing image colors

21 Jan 2014, 10:42

Writing down what ai_enabled suggested:
<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid.Resources>
        <ControlTemplate x:Key="BtnGlowTemplate" TargetType="Button">
            <Grid>
                <Border Background="{TemplateBinding Background}"
                    BorderBrush="Black" BorderThickness="1" CornerRadius="2"/>
                <Border Background="#00FFFFFF" CornerRadius="2" x:Name="Glow"/>
                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10,5"/>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="Glow" Property="Background" Value="#60FFFFFF"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Grid.Resources>
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button Content="A" Background="Red" Foreground="White"
            Template="{StaticResource BtnGlowTemplate}" Margin="2"/>
        <Button Content="B" Background="Green" Foreground="White"
           Template="{StaticResource BtnGlowTemplate}" Margin="2"/>
        <Button Content="C" Background="Blue" Foreground="White"
           Template="{StaticResource BtnGlowTemplate}" Margin="2"/>
    </StackPanel>
</Grid>
In this example the Background of the buttons are simple colors, but you can set an ImageBrush resource coming from your icon atlas.
 
jc_lvngstn
Topic Author
Posts: 34
Joined: 23 Sep 2013, 03:03

Re: Changing image colors

22 Jan 2014, 02:22

This just might do the trick, thanks guys!

Who is online

Users browsing this forum: Google [Bot] and 1 guest