将标签动态更改为文本框的最佳实践

我有一个显示用户名的小WinRT XAML标签。现在当有人点击“编辑”按钮时，我想将其更改为文本框（可能带有光照动画）。将标签动态更改为文本框的最佳实践
最佳实现方法是什么？
下一步将是在某些情况下，标签显示被点击时变为文本框。
是否有使用样式的方法？
2013-02-03 Boas Enkler
你能不能显示一个文本框的时候，除了没有点击编辑，它有'IsReadOnly = FALSE'？ – svick
我不想总是有一个文本框。它看起来不像一个实验室（例如背景）。我的问题是如何交换标签和文本框。我的一个想法是在窗口上同时拥有两个控件，并且有一个不可见，但是我搜索的是更通用的方式，这样我就不必一直定义xaml中的两个控件。同时考虑它是否有一种方法可以简单地将文本框的外观变成标签并返回？ –
始终使用TextBox，但在未聚焦时更改模板。为此，您可以在Blend中打开XAML文件，右键单击TextBox并选择“Edit Template”/“Edit a Copy ...”。然后，“状态”选项卡将显示为模板定义的视觉状态，并且可以隐藏“正常”状态的背景和边框。
这是我刚煮好了一个样本：
<Page 
    x:Class="App103.MainPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:App103" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d"> 
    <Page.Resources> 
     <Style 
      x:Key="FlatTextBoxStyle" 
      TargetType="TextBox"> 
      <Setter 
       Property="MinWidth" 
       Value="{StaticResource TextControlThemeMinWidth}" /> 
      <Setter 
       Property="MinHeight" 
       Value="{StaticResource TextControlThemeMinHeight}" /> 
      <Setter 
       Property="Foreground" 
       Value="{StaticResource TextBoxForegroundThemeBrush}" /> 
      <Setter 
       Property="Background" 
       Value="{StaticResource TextBoxBackgroundThemeBrush}" /> 
      <Setter 
       Property="BorderBrush" 
       Value="{StaticResource TextBoxBorderThemeBrush}" /> 
      <Setter 
       Property="BorderThickness" 
       Value="{StaticResource TextControlBorderThemeThickness}" /> 
      <Setter 
       Property="FontFamily" 
       Value="{StaticResource ContentControlThemeFontFamily}" /> 
      <Setter 
       Property="FontSize" 
       Value="{StaticResource ControlContentThemeFontSize}" /> 
      <Setter 
       Property="ScrollViewer.HorizontalScrollBarVisibility" 
       Value="Hidden" /> 
      <Setter 
       Property="ScrollViewer.VerticalScrollBarVisibility" 
       Value="Hidden" /> 
      <Setter 
       Property="ScrollViewer.IsDeferredScrollingEnabled" 
       Value="False" /> 
      <Setter 
       Property="Padding" 
       Value="{StaticResource TextControlThemePadding}" /> 
      <Setter 
       Property="Margin" 
       Value="0,0,0,10" /> 
      <Setter 
       Property="TextWrapping" 
       Value="Wrap" /> 
      <Setter 
       Property="VerticalAlignment" 
       Value="Top" /> 
      <Setter 
       Property="Template"> 
       <Setter.Value> 
        <ControlTemplate 
         TargetType="TextBox"> 
         <Grid> 
          <Grid.Resources> 
           <Style 
            x:Name="DeleteButtonStyle" 
            TargetType="Button"> 
            <Setter 
             Property="Template"> 
             <Setter.Value> 
              <ControlTemplate 
               TargetType="Button"> 
               <Grid> 
                <VisualStateManager.VisualStateGroups> 
                 <VisualStateGroup 
                  x:Name="CommonStates"> 
                  <VisualState 
                   x:Name="Normal" /> 
                  <VisualState 
                   x:Name="PointerOver"> 
                   <Storyboard> 
                    <ObjectAnimationUsingKeyFrames 
                     Storyboard.TargetProperty="Background" 
                     Storyboard.TargetName="BackgroundElement"> 
                     <DiscreteObjectKeyFrame 
                      KeyTime="0" 
                      Value="{StaticResource TextBoxButtonPointerOverBackgroundThemeBrush}" /> 
                    </ObjectAnimationUsingKeyFrames> 
                    <ObjectAnimationUsingKeyFrames 
                     Storyboard.TargetProperty="BorderBrush" 
                     Storyboard.TargetName="BorderElement"> 
                     <DiscreteObjectKeyFrame 
                      KeyTime="0" 
                      Value="{StaticResource TextBoxButtonPointerOverBorderThemeBrush}" /> 
                    </ObjectAnimationUsingKeyFrames> 
                    <ObjectAnimationUsingKeyFrames 
                     Storyboard.TargetProperty="Foreground" 
                     Storyboard.TargetName="GlyphElement"> 
                     <DiscreteObjectKeyFrame 
                      KeyTime="0" 
                      Value="{StaticResource TextBoxButtonPointerOverForegroundThemeBrush}" /> 
                    </ObjectAnimationUsingKeyFrames> 
                   </Storyboard> 
                  </VisualState> 
                  <VisualState 
                   x:Name="Pressed"> 
                   <Storyboard> 
                    <ObjectAnimationUsingKeyFrames 
                     Storyboard.TargetProperty="Background" 
                     Storyboard.TargetName="BackgroundElement"> 
                     <DiscreteObjectKeyFrame 
                      KeyTime="0" 
                      Value="{StaticResource TextBoxButtonPressedBackgroundThemeBrush}" /> 
                    </ObjectAnimationUsingKeyFrames> 
                    <ObjectAnimationUsingKeyFrames 
                     Storyboard.TargetProperty="BorderBrush" 
                     Storyboard.TargetName="BorderElement"> 
                     <DiscreteObjectKeyFrame 
                      KeyTime="0" 
                      Value="{StaticResource TextBoxButtonPressedBorderThemeBrush}" /> 
                    </ObjectAnimationUsingKeyFrames> 
                    <ObjectAnimationUsingKeyFrames 
                     Storyboard.TargetProperty="Foreground" 
                     Storyboard.TargetName="GlyphElement"> 
                     <DiscreteObjectKeyFrame 
                      KeyTime="0" 
                      Value="{StaticResource TextBoxButtonPressedForegroundThemeBrush}" /> 
                    </ObjectAnimationUsingKeyFrames> 
                   </Storyboard> 
                  </VisualState> 
                  <VisualState 
                   x:Name="Disabled"> 
                   <Storyboard> 
                    <DoubleAnimation 
                     Duration="0" 
                     To="0" 
                     Storyboard.TargetProperty="Opacity" 
                     Storyboard.TargetName="BackgroundElement" /> 
                    <DoubleAnimation 
                     Duration="0" 
                     To="0" 
                     Storyboard.TargetProperty="Opacity" 
                     Storyboard.TargetName="BorderElement" /> 
                   </Storyboard> 
                  </VisualState> 
                 </VisualStateGroup> 
                </VisualStateManager.VisualStateGroups> 
                <Border 
                 x:Name="BorderElement" 
                 BorderBrush="{StaticResource TextBoxButtonBorderThemeBrush}" 
                 BorderThickness="{TemplateBinding BorderThickness}" /> 
                <Border 
                 x:Name="BackgroundElement" 
                 Background="{StaticResource TextBoxButtonBackgroundThemeBrush}" 
                 Margin="{TemplateBinding BorderThickness}"> 
                 <TextBlock 
                  x:Name="GlyphElement" 
                  Foreground="{StaticResource TextBoxButtonForegroundThemeBrush}" 
                  FontFamily="{StaticResource SymbolThemeFontFamily}" 
                  HorizontalAlignment="Center" 
                  Text="&#xE0A4;" 
                  VerticalAlignment="Center" /> 
                </Border> 
               </Grid> 
              </ControlTemplate> 
             </Setter.Value> 
            </Setter> 
           </Style> 
          </Grid.Resources> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition 
            Width="*" /> 
           <ColumnDefinition 
            Width="Auto" /> 
          </Grid.ColumnDefinitions> 
          <VisualStateManager.VisualStateGroups> 
           <VisualStateGroup 
            x:Name="CommonStates"> 
            <VisualState 
             x:Name="Disabled"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames 
               Storyboard.TargetProperty="Background" 
               Storyboard.TargetName="BackgroundElement"> 
               <DiscreteObjectKeyFrame 
                KeyTime="0" 
                Value="{StaticResource TextBoxDisabledBackgroundThemeBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames 
               Storyboard.TargetProperty="BorderBrush" 
               Storyboard.TargetName="BorderElement"> 
               <DiscreteObjectKeyFrame 
                KeyTime="0" 
                Value="{StaticResource TextBoxDisabledBorderThemeBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames 
               Storyboard.TargetProperty="Foreground" 
               Storyboard.TargetName="ContentElement"> 
               <DiscreteObjectKeyFrame 
                KeyTime="0" 
                Value="{StaticResource TextBoxDisabledForegroundThemeBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <DoubleAnimation 
               Duration="0" 
               To="0" 
               Storyboard.TargetProperty="(UIElement.Opacity)" 
               Storyboard.TargetName="BorderElement" 
               d:IsOptimized="True" /> 
             </Storyboard> 
            </VisualState> 
            <VisualState 
             x:Name="Normal"> 
             <Storyboard> 
              <DoubleAnimation 
               Duration="0" 
               To="0" 
               Storyboard.TargetProperty="Opacity" 
               Storyboard.TargetName="BackgroundElement" /> 
              <DoubleAnimation 
               Duration="0" 
               To="0" 
               Storyboard.TargetProperty="Opacity" 
               Storyboard.TargetName="BorderElement" /> 
              <ObjectAnimationUsingKeyFrames 
               Storyboard.TargetProperty="(Control.Foreground)" 
               Storyboard.TargetName="ContentElement"> 
               <DiscreteObjectKeyFrame 
                KeyTime="0"> 
                <DiscreteObjectKeyFrame.Value> 
                 <SolidColorBrush 
                  Color="White" /> 
                </DiscreteObjectKeyFrame.Value> 
               </DiscreteObjectKeyFrame> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState 
             x:Name="PointerOver"> 
             <Storyboard> 
              <DoubleAnimation 
               Duration="0" 
               To="0.095" 
               Storyboard.TargetProperty="Opacity" 
               Storyboard.TargetName="BackgroundElement" /> 
              <DoubleAnimation 
               Duration="0" 
               To="0" 
               Storyboard.TargetProperty="Opacity" 
               Storyboard.TargetName="BorderElement" /> 
              <ObjectAnimationUsingKeyFrames 
               Storyboard.TargetProperty="(Control.Foreground)" 
               Storyboard.TargetName="ContentElement"> 
               <DiscreteObjectKeyFrame 
                KeyTime="0"> 
                <DiscreteObjectKeyFrame.Value> 
                 <SolidColorBrush 
                  Color="White" /> 
                </DiscreteObjectKeyFrame.Value> 
               </DiscreteObjectKeyFrame> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState 
             x:Name="Focused"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames 
               Storyboard.TargetProperty="(Control.Foreground)" 
               Storyboard.TargetName="ContentElement"> 
               <DiscreteObjectKeyFrame 
                KeyTime="0"> 
                <DiscreteObjectKeyFrame.Value> 
                 <SolidColorBrush 
                  Color="Black" /> 
                </DiscreteObjectKeyFrame.Value> 
               </DiscreteObjectKeyFrame> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
           </VisualStateGroup> 
           <VisualStateGroup 
            x:Name="ButtonStates"> 
            <VisualState 
             x:Name="ButtonVisible"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames 
               Storyboard.TargetProperty="Visibility" 
               Storyboard.TargetName="DeleteButton"> 
               <DiscreteObjectKeyFrame 
                KeyTime="0"> 
                <DiscreteObjectKeyFrame.Value> 
                 <Visibility>Visible</Visibility> 
                </DiscreteObjectKeyFrame.Value> 
               </DiscreteObjectKeyFrame> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState 
             x:Name="ButtonCollapsed" /> 
           </VisualStateGroup> 
          </VisualStateManager.VisualStateGroups> 
          <Border 
           x:Name="BackgroundElement" 
           Background="{TemplateBinding Background}" 
           Grid.ColumnSpan="2" 
           Margin="{TemplateBinding BorderThickness}" /> 
          <Border 
           x:Name="BorderElement" 
           BorderBrush="{TemplateBinding BorderBrush}" 
           BorderThickness="{TemplateBinding BorderThickness}" 
           Grid.ColumnSpan="2" /> 
          <ScrollViewer 
           x:Name="ContentElement" 
           HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" 
           HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" 
           IsTabStop="False" 
           IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" 
           IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" 
           IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" 
           Margin="{TemplateBinding BorderThickness}" 
           Padding="{TemplateBinding Padding}" 
           VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" 
           VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" 
           ZoomMode="Disabled" /> 
          <Button 
           x:Name="DeleteButton" 
           BorderThickness="{TemplateBinding BorderThickness}" 
           Grid.Column="1" 
           FontSize="{TemplateBinding FontSize}" 
           IsTabStop="False" 
           Style="{StaticResource DeleteButtonStyle}" 
           Visibility="Collapsed" 
           VerticalAlignment="Stretch" /> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
     <Style 
      x:Key="LabelTextBlockStyle" 
      TargetType="TextBlock" 
      BasedOn="{StaticResource BaselineTextStyle}"> 
      <Setter 
       Property="FontWeight" 
       Value="Normal" /> 
      <Setter 
       Property="VerticalAlignment" 
       Value="Top" /> 
      <Setter 
       Property="HorizontalAlignment" 
       Value="Right" /> 
      <Setter 
       Property="Margin" 
       Value="10,1,10,0" /> 
      <Setter 
       Property="TextWrapping" 
       Value="Wrap" /> 
     </Style> 
    </Page.Resources> 

    <Grid 
     Background="{StaticResource ApplicationPageBackgroundThemeBrush}" 
     Margin="0,1,0,0"> 
     <Grid.RowDefinitions> 
      <RowDefinition 
       Height="Auto" /> 
      <RowDefinition 
       Height="Auto" /> 
      <RowDefinition 
       Height="Auto" /> 
      <RowDefinition 
       Height="Auto" /> 
      <RowDefinition 
       Height="Auto" /> 
      <RowDefinition 
       Height="Auto" /> 
      <RowDefinition 
       Height="Auto" /> 
      <RowDefinition /> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition 
       Width="Auto" /> 
      <ColumnDefinition /> 
     </Grid.ColumnDefinitions> 
     <TextBlock 
      Text="Regular TextBox" 
      Style="{StaticResource LabelTextBlockStyle}" /> 
     <TextBox 
      Text="Value 1" 
      Grid.Column="1" 
      Margin="0,0,0,10" /> 
     <TextBlock 
      Grid.Row="1" 
      Text="Regular Disabled TextBox" 
      Style="{StaticResource LabelTextBlockStyle}" /> 
     <TextBox 
      Grid.Row="1" 
      Text="Value 2" 
      Grid.Column="1" 
      Margin="0,0,0,10" 
      IsEnabled="False" /> 
     <TextBlock 
      Grid.Row="2" 
      Text="Styled TextBox" 
      Style="{StaticResource LabelTextBlockStyle}" /> 
     <TextBox 
      Grid.Row="2" 
      Text="Value 3" 
      Style="{StaticResource FlatTextBoxStyle}" 
      Grid.Column="1" /> 
     <TextBlock 
      Grid.Row="3" 
      Text="Styled Disabled TextBox" 
      Style="{StaticResource LabelTextBlockStyle}" /> 
     <TextBox 
      Grid.Row="3" 
      Text="Value 4" 
      Style="{StaticResource FlatTextBoxStyle}" 
      Grid.Column="1" 
      IsEnabled="False" /> 
     <TextBlock 
      Grid.Row="4" 
      Text="Styled TextBox" 
      Style="{StaticResource LabelTextBlockStyle}" /> 
     <TextBox 
      Grid.Row="4" 
      Text="Value 5" 
      Style="{StaticResource FlatTextBoxStyle}" 
      Grid.Column="1" /> 
     <TextBlock 
      Grid.Row="5" 
      Text="Styled TextBox" 
      Style="{StaticResource LabelTextBlockStyle}" /> 
     <TextBox 
      Grid.Row="5" 
      Text="Value 6" 
      Style="{StaticResource FlatTextBoxStyle}" 
      Grid.Column="1" /> 
     <TextBlock 
      Grid.Row="6" 
      Text="Styled TextBox" 
      Style="{StaticResource LabelTextBlockStyle}" /> 
     <TextBox 
      Grid.Row="6" 
      Text="Value 7" 
      Style="{StaticResource FlatTextBoxStyle}" 
      Grid.Column="1" /> 
    </Grid> 
</Page>
来源
2013-02-03 19:12:49
感谢似乎做我需要:-) –
将标签动态更改为文本框的最佳实践

回答

相关问题
