Search code examples
wpftriggerseffectsetterglow

Dynamically added glow effects to UIElement using triggers


Im new to wpf, and looking for good tutorials to help understand triggers better but im not having much luck. So i thought I would seek some help here. Here is what im trying to do, i have a ScrollViewer that has a stack panel, in the code behind I browse a media folder and added MediaElements to the stackpanel using a foreach loop, what I want to do is when a user hovers over one of these, i want it to glow underneath it, I'm told triggers are the way to go, so here is what i have so far

foreach

                MediaElement newVideoPreview = new MediaElement(); 
                newVideoPreview.Width = 125;
                newVideoPreview.Stretch = Stretch.Uniform; 
                newVideoPreview.Margin = new Thickness(5, 5, 5, 5); 
                newVideoPreview.Volume = 0;

                Trigger trig = new Trigger();
                trig.Property = IsMouseOverProperty;
                trig.Value = true;
                Style style = new Style();
                style.TargetType = newVideoPreview.GetType();
                style.Triggers.Add(trig);
                Setter set  = new Setter();

                OuterGlowBitmapEffect glow = new OuterGlowBitmapEffect();
                glow.GlowColor = Color.FromRgb(0, 0, 205);
                glow.GlowSize = 10;
                set.Value = glow; // <- Crash house
                set.Property = EffectProperty;
                style.Setters.Add(set);
                newVideoPreview.Style = style;

as you can see, i get an invalid argument exception when i try to set the setter.value, im looking for suggestions on how to fix this or do it better, or better tutorials...Thanks for any help

p.s I am using VS2010 beta 2

Update Ive tried this too this dosent work....

<UserControl x:Class="WiiDSUKiosk.WiiFriendlyScrollViewer"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300">
<Grid>
    <Grid.Resources>
        <Style TargetType="{x:Type UIElement}">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter Property="BitmapEffect">
                        <Setter.Value>
                            <OuterGlowBitmapEffect GlowColor="Navy" GlowSize="10"/>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Grid.Resources>
    <ScrollViewer Name="wiiFriendlyScrollViewer" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Hidden"
                  MouseMove="wiiFriendlyScrollViewer_MouseMove" >

        <StackPanel Name="stackPanelContent" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Hidden">
        </StackPanel>
    </ScrollViewer>
</Grid>


Solution

  • this is a lot easier to do in xaml, trying to manipulate this stuff in code is a headache.

    there is some code in this unrelated article about items control generators that will add the glow when an item is selected in a list box. ( a little more than half way down )

    here is the ms example it uses triggers to glow anything that has focus. ( it is a lot easier to understand )