Change background with XAML only? : The Official Microsoft Silverlight.NET Forums

decius

Member

26 Points

Reply

Change background with XAML only?

Aug 14, 2009 03:11 PM | LINK

I've googled around and skimmed the forums, but can't seem to find anything related to this specifically, but I assume it's possible because of the rich databinding features of XAML. (I'm still a newb to SL and XAML and loving it so far [except for some of the useless XAML parsing exceptions I get when debugging sometimes!!!])

To keep it simple, let's just say that I want to change the background of a Grid (or any other control) on mouse over, but only using XAML. I've learned about StoryBoards, but the only way I've seen to invoke them to begin is to call the programattically in codebehind on a handled event. Is there a better way?

Thanks

FuryDiamond

All-Star

23869 Points

4072 Posts

Reply

Re: Change background with XAML only?

Aug 14, 2009 03:31 PM | LINK

Storyboards is one way to go another. Another way is to add VisualStates but that requires more code as well.

Here's the SB approach

XAML:

    <UserControl.Resources>
        <Storyboard x:Name="MouseOver">
            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="grid" Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)">
                <EasingColorKeyFrame KeyTime="00:00:00" Value="#FFD69C9C"/>
                <EasingColorKeyFrame KeyTime="00:00:01" Value="#FFADB2CE"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Name="MouseOut">
            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="grid" Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)">
                <EasingColorKeyFrame KeyTime="00:00:00" Value="#FFADB2CE"/>
                <EasingColorKeyFrame KeyTime="00:00:01" Value="#FFD69C9C"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>

    <Grid>
        <Grid x:Name="grid" Background="#FFD69C9C" Margin="0" 
              VerticalAlignment="Center" HorizontalAlignment="Center" Width="200" Height="200"        
              MouseEnter="grid_MouseEnter" MouseLeave="grid_MouseLeave" />
    </Grid>

C#:

        private void grid_MouseEnter(object sender, MouseEventArgs e)
        {
            (this.Resources["MouseOver"] as Storyboard).Begin();
        }

        private void grid_MouseLeave(object sender, MouseEventArgs e)
        {
            (this.Resources["MouseOut"] as Storyboard).Begin();
        }

Please "Mark as Answer" if this post answered your question. :)

Silverlight 5 3D Tutorials: http://silverlight.bayprince.com
Blog: http://blog.bayprince.com
Twitter: http://twitter.com/bayprince

decius

Member

26 Points

66 Posts

Reply

Re: Change background with XAML only?

Aug 14, 2009 04:44 PM | LINK

Thanks for your help, but if you read my post, I'm looking for a XAML only approach, without codebehind.

Does anyone know if this is possible?

sladapter

All-Star

43607 Points

7907 Posts

Reply

Re: Change background with XAML only?

Aug 14, 2009 05:43 PM | LINK

Yes, you can do it by define a control template for a control. In that Control Template you define the behavior for each Visual state. For Buttons and many other controls (I don't think Grid has those visual state), they have MouseOver, Pressed visual state. Use Blend you can find out what visual state those controls have. If you know how to write custom controls, you can code your control to have certain visual state so later you can define the behavior of that visual state in XAML.

Following is a Navigation Button's template. You can see without any code you already have mouse over event to change the look of that button:

<Grid x:Name="LayoutRoot">
        <Grid.Resources>
            <ControlTemplate TargetType="Button" x:Key="NavButton">
                <Grid Cursor="{TemplateBinding Cursor}" Background="{TemplateBinding Background}">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="rectangle1" Storyboard.TargetProperty="(UIElement.Opacity)">
                                        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.7"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="rectangle1" Storyboard.TargetProperty="(UIElement.Opacity)">
                                        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="DisabledOverlay" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="DisabledOverlay" Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)">
                                        <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                            <DiscreteObjectKeyFrame.Value>
                                                <HorizontalAlignment>Center</HorizontalAlignment>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="stackPanel" Storyboard.TargetProperty="(UIElement.Opacity)">
                                        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused"/>
                            <VisualState x:Name="Unfocused"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <TextBlock HorizontalAlignment="Left" Margin="{TemplateBinding Padding}" x:Name="DisabledOverlay" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Visibility="Collapsed" Canvas.ZIndex="1" Foreground="#FFAAAAAA" Text="{TemplateBinding Content}"/>
                    <StackPanel Height="Auto" VerticalAlignment="Top" HorizontalAlignment="Center" x:Name="stackPanel">
                        <ContentPresenter x:Name="contentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="0,0,0,0" HorizontalAlignment="Center"/>
                        <Rectangle Height="3" Width="Auto" Fill="{StaticResource HighLightColor}" Stroke="{x:Null}" Visibility="Visible" x:Name="rectangle1" Opacity="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0,0,0,0"/>
                        <Rectangle Height="3" Width="Auto" Fill="{StaticResource HighLightColor}" Stroke="{x:Null}" Visibility="Visible" x:Name="rectangle2" Opacity="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0,-2,0,0"/>
                    </StackPanel>
                </Grid>
            </ControlTemplate>
        </Grid.Resources>

Sally Xu
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

Change background with XAML only? RSS

3 replies

decius

Change background with XAML only?

FuryDiamond

Re: Change background with XAML only?

decius

Re: Change background with XAML only?

sladapter

Re: Change background with XAML only?

More...

Site

MSDN

Feedback

Change background with XAML only? RSS

3 replies

decius

Change background with XAML only?

FuryDiamond

Re: Change background with XAML only?

decius

Re: Change background with XAML only?

sladapter

Re: Change background with XAML only?

More...

Site

MSDN

Feedback

Follow Us