【问题标题】:Customizing a TextBox to look like a textblock in UWP自定义 TextBox 使其看起来像 UWP 中的文本块
【发布时间】:2017-04-01 09:44:27
【问题描述】:

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

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

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

【问题讨论】:

  • 编辑TextBox的样式。
  • @Romasz 你是这里的极客。我是混合菜鸟。你需要在这方面帮助我

标签: xaml uwp expression-blend


【解决方案1】:

你必须修改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右侧的“明文”按钮,ScrollViewer包含TextBox的内容。跨度>
  • 似乎是解决我的问题的正确方法。非常感谢:)
【解决方案2】:

您有两个(简单的)选择:

  1. 您可以创建一个Grid 元素并将TextBlockTextBox 放入其中,使它们重叠。然后将 TextBoxOpacity 设置为 0.01(不要完全隐藏,因为它不会工作)
  2. 您可以在 VisualStudio 中修改 TextBox 元素的属性,只需将 Background 设置为 Transparent 即可实现焦点内和焦点外。您还可以在属性中将Border 设置为Transparent

【讨论】:

  • 任何 XAML 和 Blend 解决方案?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2017-02-15
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-09-03
相关资源
最近更新 更多