Silverlight VisualStateManager: Change Textbox background color

11-12-2008 3:19 PM |

Hi there,

 I'm trying to change the background color of the textbox when the IsReadOnly = true is set.  I'm trying to accomplish this using visual state manager in a style in App.xaml, as follows:

<Style x:Key="Field_TextBoxStyle" TargetType="TextBox">
            <Setter Property="FontFamily" Value="Arial"/>
            <Setter Property="FontSize" Value="12"/>
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <vsm:VisualStateManager.VisualStateGroups>
                            <vsm:VisualStateGroup x:Name="CommonStates">
                                <vsm:VisualState x:Name="Normal"/>
                                <vsm:VisualState x:Name="MouseOver"/>
                                <vsm:VisualState x:Name="Disabled"/>
                                <vsm:VisualState x:Name="ReadOnly">
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetProperty="Foreground"
                                                Duration="0" To="DimGray"/>
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                        </vsm:VisualStateManager.VisualStateGroups>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

 The page fails to load with this piece of code.  (I get a blank screen and "Error on Page" on the status bar in the browser.)  I don't want to change the look of the default textbox, I just want to change the color based on the state.  What am I doing wrong?

 Thanks,

Michelle

Re: Silverlight VisualStateManager: Change Textbox background color

11-12-2008 3:35 PM |

I would check two things

1. is there is a VisualState named ReadOnly in the TextBox

2. if DimGray is color with converter

Re: Silverlight VisualStateManager: Change Textbox background color

11-12-2008 4:02 PM |

Hi lee_sl, 

1.  yes, there is, I tried "ReadOnly" and "Readonly", both doesn't work.

http://msdn.microsoft.com/en-us/library/cc645061(VS.95).aspx

2. Not sure what you mean.  DimGray is a preset color.

http://msdn.microsoft.com/en-us/library/system.windows.media.brushes.aspx

Thanks,

Michelle

Re: Silverlight VisualStateManager: Change Textbox background color

11-12-2008 7:45 PM |

Looks like your ControlTemplate is missing the TargetType property. If you add that does it solve your issue?

Re: Silverlight VisualStateManager: Change Textbox background color

11-14-2008 1:24 PM |

Nope, still crashes. :(

Re: Silverlight VisualStateManager: Change Textbox background color

12-10-2008 11:00 AM |

Hi, did you find a solution to this? I need to do the same thing but it is failing because I'm not setting StoryBoard.TargetName. In TextBox there isn't an element to reference her, I really want to set it to 'this' but this doesn't work. Thanks

Re: Re: Silverlight VisualStateManager: Change Textbox background color

12-10-2008 12:26 PM |

the following style seems to work for Background not Foreground

  <Style x:Key="st1" TargetType="TextBox">
            <Setter Property="BorderThickness"
                    Value="1" />
            <Setter Property="Background"
                    Value="#FFFFFFFF" />
            <Setter Property="Foreground"
                    Value="#FF000000" />
            <Setter Property="Padding"
                    Value="2" />
            <Setter Property="BorderBrush">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1"
                                         StartPoint="0.5,0">
                        <GradientStop Color="#FFA3AEB9"
                                      Offset="0" />
                        <GradientStop Color="#FF8399A9"
                                      Offset="0.375" />
                        <GradientStop Color="#FF718597"
                                      Offset="0.375" />
                        <GradientStop Color="#FF617584"
                                      Offset="1" />
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TextBox">
                        <Grid x:Name="RootElement">
                            <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="ReadOnly" />
                                        <vsm:VisualTransition GeneratedDuration="00:00:00.1"
                                                              To="Disabled" />
                                    </vsm:VisualStateGroup.Transitions>
                                    <vsm:VisualState x:Name="Normal" />
                                    <vsm:VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="MouseOverColor"
                                                            Storyboard.TargetProperty="Color"
                                                            To="#FF99C1E2"
                                                            Duration="0" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="DisabledVisualElement"
                                                             Storyboard.TargetProperty="Opacity"
                                                             To=".7"
                                                             Duration="0" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="ReadOnly">
                                        <Storyboard>
                                            <!--<DoubleAnimation Storyboard.TargetName="ReadOnlyVisualElement"
                                                             Storyboard.TargetProperty="Opacity"
                                                             To="1"
                                                             Duration="0" />-->
                                            <ColorAnimation Storyboard.TargetProperty="Color" Storyboard.TargetName="BGColor"
                                                            Duration="2"
                                                            To="blue" />
                                            <ColorAnimation Storyboard.TargetProperty="Color"
                                                            Storyboard.TargetName="FGColor"
                                                            Duration="2"
                                                            To="white" />

                                        </Storyboard>
                                    </vsm:VisualState>
                                </vsm:VisualStateGroup>
                                <vsm:VisualStateGroup x:Name="FocusStates">
                                    <vsm:VisualState x:Name="Focused">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="FocusVisualElement"
                                                             Storyboard.TargetProperty="Opacity"
                                                             To="1"
                                                             Duration="0" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="Unfocused">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="FocusVisualElement"
                                                             Storyboard.TargetProperty="Opacity"
                                                             To="0"
                                                             Duration="0" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                </vsm:VisualStateGroup>
                            </vsm:VisualStateManager.VisualStateGroups>

                            <Border x:Name="Border"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    CornerRadius="1"
                                    Opacity="1"
                                    Background="{TemplateBinding Background}"
                                    BorderBrush="{TemplateBinding BorderBrush}">
                                <Grid>
                                    <Border x:Name="ReadOnlyVisualElement"
                                            Background="#72F7F7F7"
                                            Opacity="0" />
                                    <Border BorderThickness="1">
                                        <Border.BorderBrush>
                                            <SolidColorBrush x:Name="MouseOverColor"
                                                             Color="Transparent" />
                                        </Border.BorderBrush>
                                        <ScrollViewer x:Name="ContentElement"
                                                      Padding="{TemplateBinding Padding}"
                                                      BorderThickness="0"
                                                      IsTabStop="False">
                                            <ScrollViewer.Background>
                                                <SolidColorBrush x:Name="BGColor" Color="White"></SolidColorBrush>
                                            </ScrollViewer.Background>
                                            <ScrollViewer.Foreground>
                                                <SolidColorBrush x:Name="FGColor"
                                                                 Color="Black"></SolidColorBrush>
                                            </ScrollViewer.Foreground>
                                        </ScrollViewer>
                                    </Border>
                                </Grid>
                            </Border>
                            <Border x:Name="DisabledVisualElement"
                                    Background="#A5F7F7F7"
                                    BorderBrush="#A5F7F7F7"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    Opacity="0"
                                    IsHitTestVisible="False" />
                            <Border x:Name="FocusVisualElement"
                                    BorderBrush="#FF45D6FA"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    Margin="1"
                                    CornerRadius="1"
                                    Opacity="0"
                                    IsHitTestVisible="False" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>