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?

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.

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.

22 Jan 2014, 02:22

This just might do the trick, thanks guys!

Changing image colors Topic is solved

Changing image colors

Re: Changing image colors

Re: Changing image colors

Re: Changing image colors

Who is online