R – How to replace the click event with a mouseover in a Silverlight 2.0 Combobox

silverlight-2.0

I have a combo box that in Silverlight 2.0 that I want it to open when a user mouses over the toggle button and then close when they mouse away. The default behavior is a click.

Here is my style code (sorry it is so long):

<Style x:Key="HelpComboBoxStyle" TargetType="ComboBox">
<Setter Property="Padding" Value="0,0,0,0"/>
<Setter Property="Background" Value="#FF1F3B53"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="TabNavigation" Value="Once"/>
<Setter Property="BorderBrush" Value="#104F9B"/>

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="ComboBox">
            <Grid>
                <Grid.Resources>
                    <Style TargetType="ToggleButton" x:Name="comboToggleStyle">
                        <Setter Property="BorderBrush" Value="#104F9B"/>
                        <Setter Property="BorderThickness" Value="1"/>
                        <Setter Property="Padding" Value="3"/>
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="ToggleButton">
                                    <Grid>
                                        <vsm:VisualStateManager.VisualStateGroups>
                                            <vsm:VisualStateGroup x:Name="CommonStates">
                                                <vsm:VisualStateGroup.Transitions>
                                                    <vsm:VisualTransition GeneratedDuration="00:00:00.1" To="MouseOver"/>
                                                    <vsm:VisualTransition GeneratedDuration="00:00:00.1" To="Pressed"/>
                                                </vsm:VisualStateGroup.Transitions>
                                                <vsm:VisualState x:Name="Normal"/>
                                                <vsm:VisualState x:Name="MouseOver">
                                                    <Storyboard>
                                                        <ObjectAnimationUsingKeyFrames Duration="00:00:00" Storyboard.TargetName="PopupBorder" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                            <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                                <DiscreteObjectKeyFrame.Value>
                                                                    <Visibility>Visible</Visibility>
                                                                </DiscreteObjectKeyFrame.Value>
                                                            </DiscreteObjectKeyFrame>
                                                        </ObjectAnimationUsingKeyFrames>
                                                    </Storyboard>
                                                </vsm:VisualState>
                                                <vsm:VisualState x:Name="Pressed">
                                                    <Storyboard>
                                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundOverlay2" Storyboard.TargetProperty="Opacity">
                                                            <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                                        </DoubleAnimationUsingKeyFrames>
                                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Highlight" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                            <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                                        </DoubleAnimationUsingKeyFrames>
                                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                            <SplineColorKeyFrame KeyTime="0" Value="#E5FFFFFF"/>
                                                        </ColorAnimationUsingKeyFrames>
                                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
                                                            <SplineColorKeyFrame KeyTime="0" Value="#BCFFFFFF"/>
                                                        </ColorAnimationUsingKeyFrames>
                                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
                                                            <SplineColorKeyFrame KeyTime="0" Value="#6BFFFFFF"/>
                                                        </ColorAnimationUsingKeyFrames>
                                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
                                                            <SplineColorKeyFrame KeyTime="0" Value="#F2FFFFFF"/>
                                                        </ColorAnimationUsingKeyFrames>
                                                    </Storyboard>
                                                </vsm:VisualState>
                                                <vsm:VisualState x:Name="Disabled">
                                                    <Storyboard>
                                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                            <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                                        </DoubleAnimationUsingKeyFrames>
                                                    </Storyboard>
                                                </vsm:VisualState>
                                            </vsm:VisualStateGroup>
                                            <vsm:VisualStateGroup x:Name="CheckStates"/>

                                            <vsm:VisualStateGroup x:Name="FocusStates"/>

                                        </vsm:VisualStateManager.VisualStateGroups>
                                        <Rectangle x:Name="Background" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}" />
                                        <Rectangle x:Name="BackgroundOverlay" Opacity="0" Fill="#FF448DCA" Stroke="#00000000" StrokeThickness="{TemplateBinding BorderThickness}" />
                                        <Rectangle x:Name="BackgroundOverlay2" Opacity="0" Fill="#FF448DCA" Stroke="#00000000" StrokeThickness="{TemplateBinding BorderThickness}" />
                                        <Rectangle Margin="{TemplateBinding BorderThickness}" x:Name="BackgroundGradient" Stroke="#FFFFFFFF" StrokeThickness="2" >
                                            <Rectangle.Fill>
                                                <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
                                                    <GradientStop Color="#FFFFFFFF" Offset="0"/>
                                                    <GradientStop Color="#F9FFFFFF" Offset="0.375"/>
                                                    <GradientStop Color="#E5FFFFFF" Offset="0.625"/>
                                                    <GradientStop Color="#C6FFFFFF" Offset="1"/>
                                                </LinearGradientBrush>
                                            </Rectangle.Fill>
                                        </Rectangle>
                                        <Rectangle x:Name="BackgroundOverlay3" Opacity="0" Fill="#FF448DCA" Stroke="#00000000" StrokeThickness="{TemplateBinding BorderThickness}"/>
                                        <Rectangle Margin="{TemplateBinding BorderThickness}" x:Name="BackgroundGradient2" Opacity="0" Stroke="#FFFFFFFF" StrokeThickness="2" >
                                            <Rectangle.Fill>
                                                <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
                                                    <GradientStop Color="#FFFFFFFF" Offset="0"/>
                                                    <GradientStop Color="#F9FFFFFF" Offset="0.375"/>
                                                    <GradientStop Color="#E5FFFFFF" Offset="0.625"/>
                                                    <GradientStop Color="#C6FFFFFF" Offset="1"/>
                                                </LinearGradientBrush>
                                            </Rectangle.Fill>
                                        </Rectangle>
                                        <Rectangle Margin="{TemplateBinding BorderThickness}" x:Name="Highlight" IsHitTestVisible="false" Opacity="0" Stroke="#FF45D6FA" StrokeThickness="2" />
                                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" x:Name="contentPresenter" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                                        <Rectangle x:Name="DisabledVisualElement" IsHitTestVisible="false" Opacity="0" Fill="#A5FFFFFF" />
                                        <Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Visibility="Collapsed" Stroke="#FF45D6FA" StrokeThickness="2" />
                                    </Grid>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </Grid.Resources>
                <vsm:VisualStateManager.VisualStateGroups>
                    <vsm:VisualStateGroup x:Name="CommonStates">
                        <vsm:VisualStateGroup.Transitions>
                            <vsm:VisualTransition GeneratedDuration="00:00:00.1"/>
                            <vsm:VisualTransition From="MouseOver" GeneratedDuration="00:00:00.1000000" To="Normal"/>
                        </vsm:VisualStateGroup.Transitions>
                        <vsm:VisualState x:Name="Normal"/>
                        <vsm:VisualState x:Name="MouseOver"/>
                        <vsm:VisualState x:Name="Disabled">
                            <Storyboard>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="(UIElement.Opacity)">
                                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </vsm:VisualState>
                    </vsm:VisualStateGroup>
                    <vsm:VisualStateGroup x:Name="FocusStates">
                        <vsm:VisualState x:Name="Focused">
                            <Storyboard>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="(UIElement.Opacity)">
                                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </vsm:VisualState>
                        <vsm:VisualState x:Name="Unfocused"/>
                        <vsm:VisualState x:Name="FocusedDropDown">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="00:00:00" Storyboard.TargetName="PopupBorder" Storyboard.TargetProperty="(UIElement.Visibility)">
                                    <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Visible</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </vsm:VisualState>
                    </vsm:VisualStateGroup>
                </vsm:VisualStateManager.VisualStateGroups>
                <Border x:Name="ContentPresenterBorder">
                    <Grid>                              
                        <ToggleButton HorizontalAlignment="Stretch" Margin="0" x:Name="DropDownToggle"   Background="white" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" HorizontalContentAlignment="Right">
                            <Path Height="8" HorizontalAlignment="Center" Margin="0,0,0,0" x:Name="BtnArrow" Width="10" Stretch="Uniform" Data="F1 M 301.14,-189.041L 311.57,-189.041L 306.355,-182.942L 301.14,-189.041 Z ">
                                <Path.Fill>
                                    <SolidColorBrush Color="#104F9B" x:Name="BtnArrowColor"/>
                                </Path.Fill>
                            </Path>
                        </ToggleButton>
                        <ContentPresenter Visibility="Collapsed" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" x:Name="ContentPresenter" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">

                        </ContentPresenter>
                    </Grid>
                </Border>
                <Rectangle x:Name="DisabledVisualElement" IsHitTestVisible="false" Opacity="0" Fill="#A5FFFFFF" RadiusX="3" RadiusY="3"/>
                <Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Opacity="0" Stroke="#FF45D6FA" StrokeThickness="1" RadiusX="3" RadiusY="3"/>
                <Popup x:Name="Popup">
                    <Popup.RenderTransform>
                        <TranslateTransform X="-125" />
                    </Popup.RenderTransform>
                    <Border Height="Auto" HorizontalAlignment="Stretch" x:Name="PopupBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3">
                        <Border.Background>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="#FFFFFFFF" Offset="0"/>
                                <GradientStop Color="#FFFEFEFE" Offset="1"/>
                            </LinearGradientBrush>
                        </Border.Background>
                        <ScrollViewer x:Name="ScrollViewer" BorderThickness="0" Padding="1">
                            <ItemsPresenter/>
                        </ScrollViewer>
                    </Border>
                </Popup>
            </Grid>
        </ControlTemplate>
    </Setter.Value>
</Setter>

Best Answer

I'm going to have to answer my own question here. I was focues on the xaml that I didn't think to just add a MouseEnter event handler on the combox box control.