Silverlight: Use TransitioningContentControl to animate a grid from read-only to edit mode

Question

Hi,

I am using Silverlight 4.0 and I have a simple grid in which some user related details are shown, like name, phone no. address, etc. Initially the textboxes are in read-only mode. Textboxes become editable when a user clicks on "Update Info" link (in the same grid). Now I am trying out a simple transition effect from "read-only" to "editable" mode..

here's the xaml code

 <layoutToolkit:TransitioningContentControl x:Name="tcc"
                                               Grid.Row="1"
                                               BorderThickness="1">
        <layoutToolkit:TransitioningContentControl.Content>
            <Grid x:Name="grd1" Background="White">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />

                </Grid.ColumnDefinitions>

                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>

                <TextBlock Text="Name" Grid.Row="0"  Grid.Column="0"/>

                <TextBox x:Name="txtName" Grid.Column="1" Grid.Row="0" IsReadOnly="True"></TextBox>

                <TextBlock Text="Email" Grid.Row="1"  Grid.Column="0"/>

                <TextBox x:Name="txtEmail" Grid.Column="1" Grid.Row="1" IsReadOnly="True"></TextBox>
                <Button x:Name="ChangeContent" Content="Updatee Info" Click="ChangeContent_Click" Grid.Column="1" Grid.Row="2"></Button>
            </Grid>
        </layoutToolkit:TransitioningContentControl.Content>
    </layoutToolkit:TransitioningContentControl>

and in the button click event

private void ChangeContent_Click(object sender, System.Windows.RoutedEventArgs e)
    {
        //tcc.Content = DateTime.Now.ToString();
       txtName.IsReadOnly = false;
       txtEmail.IsReadOnly = false;           
    }

How can I achieve a transition effect in this scenario?

Answer 1

Hi,

I am not much familiar with TransitioningContentControl, but I think for that control to work, you need to switch the Content itself and not just a property of a Control inside it. To achieve the needed transition, you can create a custom (or modify existing) ControlTemplate for the textbox with a custom VisualState named 'ReadOnly' and a Storyboard in it for the needed effect. Or you can create two different Grid controls, one with ReadOnly interface and one with Editable interface and in your code, just switch between them.

The following link has a working example on how to use TransitioningContentControl : http://firstfloorsoftware.com/blog/animated-page-navigation-in-sl3/