ユーザーの名前を示す小さな WinRT XAML ラベルがあります。誰かが「編集」ボタンを押すと、それを TextBox に変更したいと思います(おそらく軽いアニメーションで)。
これを実現する良い方法は何ですか？
次のステップは、一部のシナリオでは、クリックされたときにラベルの表示が TextBox に変更されることです。
スタイルを使用してそれを行う方法はおそらくありますか？
質問する
684 次
1 に答える
2
常に TextBox を使用しますが、フォーカスされていない場合はテンプレートを変更します。これを行うには、Blend で XAML ファイルを開き、TextBox を右クリックして、[テンプレートの編集]/[コピーの編集...] を選択します。次に、[States] タブに、テンプレートに定義されている視覚的な状態が表示され、[Normal] 状態の背景と境界線を非表示にすることができます。
これは私が調理したばかりのサンプルです:
<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=""
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-03T19:12:49.067 に答える