自定义 TextBox 使其看起来像 UWP 中的文本块

Question

我是 XAML 和 Blend 的新手，但这就是我想要做的。我正在开发一个需要放置 TextBox（或任何输入控件）但不应该具有 TextBox 属性的应用程序。请参考下图。

我需要帮助来实现下面提到的功能。

在 TAP 上 - 它应该让我编辑值，而不突出显示背景区域 - 通常 TextBoxes 做的事情
我不需要任何边框
一旦我停止编辑并点击控件外部，它应该看起来像 TextBlock，再次点击它可以让您正常编辑

Answer 1

您有两个（简单的）选项：

您可以创建一个 Grid 元素并在其中放置一个 TextBlock 和 TextBox，以便它们重叠。然后将 TextBox 的 Opacity 设置为 0.01（不要完全隐藏，否则将不起作用）
您可以修改 VisualStudio 中 TextBox 元素的属性，只需将焦点内和焦点外的 Background 设置为 Transparent。您还可以在属性中将 Border 设置为 Transparent。

Answer 2

您必须修改 TextBox 的默认样式，您可以找到 here。

你可能会得到这样的结果：

<Style x:Key="TransparentTextBox" TargetType="TextBox">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <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 x:Name="ButtonLayoutGrid" BorderBrush="{ThemeResource TextBoxButtonBorderThemeBrush}"
                                                      BorderThickness="{TemplateBinding BorderThickness}"
                                                      Background="{ThemeResource TextBoxButtonBackgroundThemeBrush}"
                                                >
                                            <VisualStateManager.VisualStateGroups>
                                                <VisualStateGroup x:Name="CommonStates">
                                                    <VisualState x:Name="Normal"/>
                                                    <VisualState x:Name="PointerOver">
                                                        <Storyboard>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement" Storyboard.TargetProperty="Foreground">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}"/>
                                                            </ObjectAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="Pressed">
                                                        <Storyboard>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="Background">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}"/>
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement" Storyboard.TargetProperty="Foreground">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltChromeWhiteBrush}"/>
                                                            </ObjectAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="Disabled">
                                                        <Storyboard>
                                                            <DoubleAnimation Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="Opacity" To="0" Duration="0"/>
                                                        </Storyboard>
                                                    </VisualState>
                                                </VisualStateGroup>
                                            </VisualStateManager.VisualStateGroups>

                                            <TextBlock x:Name="GlyphElement"
                                                       Foreground="{ThemeResource SystemControlForegroundChromeBlackMediumBrush}"
                                                       VerticalAlignment="Center"
                                                       HorizontalAlignment="Center"
                                                       FontStyle="Normal"
                                                       FontSize="12"
                                                       Text="&#xE10A;"
                                                       FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                                       AutomationProperties.AccessibilityView="Raw"
                                                       />
                                        </Grid>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </Grid.Resources>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="PointerOver"/>
                            <VisualState x:Name="Focused"/>
                            <VisualState x:Name="Disabled"/>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="ButtonStates">
                            <VisualState x:Name="ButtonVisible">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DeleteButton" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="ButtonCollapsed"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>

                    <Border x:Name="BackgroundElement"
                            Grid.Row="1"
                            Background="{TemplateBinding Background}"
                            Margin="{TemplateBinding BorderThickness}"
                            Opacity="{ThemeResource TextControlBackgroundRestOpacity}"
                            Grid.ColumnSpan="2"
                            Grid.RowSpan="1"
                            />
                    <Border x:Name="BorderElement"
                            Grid.Row="1"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Grid.ColumnSpan="2"
                            Grid.RowSpan="1"
                            />
                    <ContentPresenter x:Name="HeaderContentPresenter"
                                      x:DeferLoadStrategy="Lazy"
                                      Visibility="Collapsed"
                                      Grid.Row="0"
                                      Foreground="{ThemeResource SystemControlForegroundBaseHighBrush}"
                                      Margin="0,0,0,8"
                                      Grid.ColumnSpan="2"
                                      Content="{TemplateBinding Header}"
                                      ContentTemplate="{TemplateBinding HeaderTemplate}"
                                      FontWeight="Normal"
                                      />
                    <ScrollViewer x:Name="ContentElement"
                                  Grid.Row="1"
                                  HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                                  HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                  VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                                  VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                  IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                                  IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                                  IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                                  Margin="{TemplateBinding BorderThickness}"
                                  Padding="{TemplateBinding Padding}"
                                  IsTabStop="False"
                                  AutomationProperties.AccessibilityView="Raw"
                                  ZoomMode="Disabled"
                                  />
                    <ContentControl x:Name="PlaceholderTextContentPresenter"
                                    Grid.Row="1"
                                    Foreground="{ThemeResource SystemControlPageTextBaseMediumBrush}"
                                    Margin="{TemplateBinding BorderThickness}"
                                    Padding="{TemplateBinding Padding}"
                                    IsTabStop="False"
                                    Grid.ColumnSpan="2"
                                    Content="{TemplateBinding PlaceholderText}"
                                    IsHitTestVisible="False"
                                    />
                    <Button x:Name="DeleteButton"
                            Grid.Row="1"
                            Style="{StaticResource DeleteButtonStyle}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Margin="{ThemeResource HelperButtonThemePadding}"
                            IsTabStop="False"
                            Grid.Column="1"
                            Visibility="Collapsed"
                            FontSize="{TemplateBinding FontSize}"
                            MinWidth="34"
                            VerticalAlignment="Stretch"
                            />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

自定义 TextBox 使其看起来像 UWP 中的文本块

Customizing a TextBox to look like a textblock in UWP

xaml

expression-blend

uwp