Question

我正在使用Silverlight 4.0，我有一个简单的网格，其中显示了一些与用户相关的详细信息，如姓名，电话号码。地址等最初文本框处于只读模式。当用户单击“更新信息”链接（在同一网格中）时，文本框将变为可编辑状态。现在我正在尝试从“只读”模式到“可编辑”模式的简单过渡效果。

这是xaml代码

 <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>

并在按钮点击事件中

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

如何在这种情况下实现过渡效果？

Answer 1

我对TransitioningContentControl并不熟悉，但我认为要使该控件生效，您需要切换Content本身，而不仅仅是Control内的属性。要实现所需的转换，您可以为文本框创建自定义（或修改现有）ControlTemplate，并在其中添加名为“ReadOnly”和VisualState的自定义Storyboard以获得所需效果。或者，您可以创建两个不同的Grid控件，一个带有ReadOnly接口，另一个带有Editable接口，在您的代码中，只需在它们之间切换。

以下链接提供了有关如何使用TransitioningContentControl：http://firstfloorsoftware.com/blog/animated-page-navigation-in-sl3/

的工作示例

Silverlight：使用TransitioningContentControl将网格从只读设置为编辑模式

1 个答案: