We help IT Professionals succeed at work.

Howto Update Silverlight RowStyle

Medium Priority
835 Views
Last Modified: 2013-11-12
Hi Experts

Could you please help me with this problem:

I have a datagrid and I want to update the row style for hover/select color

I have a ResourceDictionary with the following information:

<vsm:VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To=".4"/>
                                        <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="(Fill).Color" To="Green"/>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="NormalSelected">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="0.8"/>
                                        <!--<ColorAnimation Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="(Fill).Color" To="#FF205050"/>-->
                                        <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="(Fill).Color" To="DarkBlue"/>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="MouseOverSelected">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To=".4"/>
                                        <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="(Fill).Color" To="DarkBlue"/>
                                    </Storyboard>
                                </vsm:VisualState>

Open in new window



Now I want to change this dynamically thats why I have this lines

var style = dgQuote.RowStyle;
style...MouseOver = Some Color
dgQuote.RowStyle = style;

Open in new window



My question is now that I have the style, How can I update the Style Color for Hover/Select?

Thanks

Comment
Watch Question

CERTIFIED EXPERT
Most Valuable Expert 2012
Top Expert 2008

Commented:
In WPF, there are style triggers, but Silverlight is a little different.  There is the VisualStateManager, that manages states and transitions for controls.

VisualStateManager Class
http://msdn.microsoft.com/en-us/library/system.windows.visualstatemanager%28v=vs.95%29.aspx

The following example creates a simple ControlTemplate for a Button that contains one Grid. The example sets the VisualStateManager.VisualStateGroups property on the Grid. The VisualStateManager.VisualStateGroups contains one VisualStateGroup, called CommonStates, which defines the MouseOver and Normal VisualState objects. When the user puts the mouse over the Button, the Grid changes from green to red over one half second. When the user moves the mouse away from the button, the Grid immediately changes back to green.
<ControlTemplate TargetType="Button">
  <Grid >
    <VisualStateManager.VisualStateGroups>
      <VisualStateGroup x:Name="CommonStates">

        <VisualStateGroup.Transitions>

          <!--Take one half second to trasition to the MouseOver state.-->
          <VisualTransition To="MouseOver" 
                              GeneratedDuration="0:0:0.5"/>
        </VisualStateGroup.Transitions>

        <VisualState x:Name="Normal" />

        <!--Change the SolidColorBrush, ButtonBrush, to red when the
            mouse is over the button.-->
        <VisualState x:Name="MouseOver">
          <Storyboard>
            <ColorAnimation Storyboard.TargetName="ButtonBrush" 
                            Storyboard.TargetProperty="Color" To="Red" />
          </Storyboard>
        </VisualState>
      </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Grid.Background>
      <SolidColorBrush x:Name="ButtonBrush" Color="Green"/>
    </Grid.Background>
  </Grid>
</ControlTemplate>

Open in new window

Author

Commented:
Hi TheLearnedOne

I understand how to do it in xaml but what about doing it in code. I was thinking about loading the resource dictionary as xml and the in memory change the values.

Your example help me but how can I do it in code instead of xaml. For example the line Storyboard.TargetProperty="Color" To="Red" is the one that I need to change from To="Red" to something like To="Value Returned from Database".

Thanks for your comments
CERTIFIED EXPERT
Most Valuable Expert 2012
Top Expert 2008

Commented:
Sometimes I think better in XAML, than code, and this is one of those cases.  I would love to hear your thinking about why you need to code this functionality in code-behind, rather than in XAML.  I will have to think about how to approach this in code-behind.  Since this is an abandoned question, and I am not "the" SL expert, it may take me a little time, but I am willing to help you find a solution.

Author

Commented:
TheLearnedOne:

Sure, look the user wants the application to be totally configurable. I create 4 resource dictionaries with different layouts.

I have this code for loading then dynamically

    public void SetThemeDark()
    {
      SetTheme("/Styles/ResDict_1.xaml");
    }
    public void SetThemeLight()
    {
      SetTheme("/Styles/ResDict_2.xaml");
    }
    public void SetThemeGray()
    {
      SetTheme("/Styles/ResDict_3.xaml");
    }

Open in new window


    private void SetTheme(string url)
    {
      ResourceDictionary resDict = new ResourceDictionary();
      resDict.Source = new Uri(url, UriKind.Relative);
      SetThemOnMainPage(resDict);  
    }

Open in new window


Then the user come back to me and ask that they want to have hover/selected and another features to be totally dynamic.

Thats why I start thinking about having this resource dictionary in code instead of xaml because will be easier for me just to retrieves the values from DataBase and then assign them in the right places.

Thanks again for your comments

CERTIFIED EXPERT
Most Valuable Expert 2012
Top Expert 2008

Commented:
What does "SetThemOnMainPage" do?
Technical Architect
Commented:

Author

Commented:
Exactly what I was looking for Excellent

Thank you very much.

Author

Commented:
Thanks the link help me a lot

Author

Commented:
Here's a sample. Let's say you have this Rectangle defined in XAML:
<Rectangle x:Name="rect" MouseEnter="rect_MouseEnter" MouseLeave="rect_MouseLeave" Fill="Blue"/>

Open in new window



To create visual states, you write something like this (note the above notes):
VisualStateGroup group = new VisualStateGroup();
group.SetValue(FrameworkElement.NameProperty, "group1");

VisualState state1 = new VisualState();
state1.SetValue(FrameworkElement.NameProperty, "state1");

Storyboard sb1 = new Storyboard();
ColorAnimation animation1 = new ColorAnimation();

animation1.SetValue(Storyboard.TargetNameProperty, "rect");
animation1.SetValue(Storyboard.TargetPropertyProperty, new PropertyPath("(Shape.Fill).(SolidColorBrush.Color)"));

animation1.To = Colors.Red;
sb1.Children.Add(animation1);

state1.Storyboard = sb1;

group.States.Add(state1);

VisualState state2 = new VisualState();
state2.SetValue(FrameworkElement.NameProperty, "state2");

Storyboard sb2 = new Storyboard();
ColorAnimation animation2 = new ColorAnimation();

animation2.SetValue(Storyboard.TargetNameProperty, "rect");
animation2.SetValue(Storyboard.TargetPropertyProperty, new PropertyPath("(Shape.Fill).(SolidColorBrush.Color)"));

animation2.To = Colors.Blue;
sb2.Children.Add(animation2);

state2.Storyboard = sb2;

group.States.Add(state2);

VisualStateManager.GetVisualStateGroups(this.LayoutRoot).Add(group);

 

To go to the states, simply call VisualStateManager.GoToState:

private void rect_MouseEnter(object sender, MouseEventArgs e)
{

VisualStateManager.GoToState(this, "state1", true);
}

private void rect_MouseLeave(object sender, MouseEventArgs e)
{

VisualStateManager.GoToState(this, "state2", true);
}

Open in new window

Explore More ContentExplore courses, solutions, and other research materials related to this topic.