添加一个 'X' 以在用户输入文本时清除 TextInput

Question

我有一个名为 InputWithLabel 的 UX class，它包括一个标签和一个 TextInput。

我正在尝试向其中添加一个 'X' 以用于清除输入文本。我的计划是稍后添加功能以仅在输入字段中有实际文本时显示此 'X'。

虽然现在，我不知道如何在不允许输入超过 'X' 的情况下做到这一点。如果你认为这是一个错误，我会清理它并报告它，但我怀疑这只是一些我不明白的简单事情所以我想我只是问你关于它的问题......我尝试了很多想法但是 none 似乎对我有用...

<StackPanel ux:Class="InputWithLabel" Width="50%">
    <string ux:Property="Label" />
    <string ux:Property="Value"/>
    <string ux:Property="IsPassword"/>
    <Text Color="#28549b" FontSize="12" Margin="0,12,0,0" Value="{ReadProperty Label}"/>

    <Rectangle CornerRadius="2" StrokeWidth="1" StrokeColor="#bdbebf">
        <TextInput FontSize="16" Value="{Property Value}" IsPassword="{ReadProperty IsPassword}"/>
        <Panel ux:Name="ClearButton" Alignment="Right">
            <Rectangle SnapToPixels="True" Height="1px" Width="10px" Color="#bdbebf">
                <Rotation Degrees="45"/>
            </Rectangle>
            <Rectangle SnapToPixels="True" Height="1px" Width="10px" Color="#bdbebf">
                <Rotation Degrees="-45"/>
            </Rectangle>
        </Panel>   
    </Rectangle>
</StackPanel>

Answer 1

没有错误，就是了解布局在 Fuse 中的工作原理。当你将 TextInput 和 Panel 放在 Rectangle 中时，它们都占据相同的 space。没有隐含的 space 消耗发生（按设计）。其结果是，如您所见，事情一波接一波。

为了实现您的需要，使用 DockPanel 会是一个更好的策略，因为在 DockPanel 内部您可以通过停靠其子项来显式使用 space在它的两侧。这是一个示例，基于您最初发布的代码：

<StackPanel ux:Class="InputWithLabel" Width="50%" IsPassword="false">
    <string ux:Property="Label" />
    <string ux:Property="Value"/>
    <string ux:Property="IsPassword"/>
    <Text Color="#28549b" FontSize="12" Margin="0,12,0,0" Value="{ReadProperty Label}"/>

    <DockPanel>
        <Rectangle CornerRadius="2" StrokeWidth="1" StrokeColor="#bdbebf" Layer="Background" />

        <TextInput FontSize="16" Value="{Property Value}" IsPassword="{ReadProperty IsPassword}" Margin="4">
            <WhileContainsText Invert="true">
                <Change clearButton.Visibility="Collapsed" />
            </WhileContainsText>
        </TextInput>

        <Panel ux:Name="clearButton" Dock="Right">
            <Rectangle SnapToPixels="True" Height="1px" Width="10pt" Color="#bdbebf">
                <Rotation Degrees="45"/>
            </Rectangle>
            <Rectangle SnapToPixels="True" Height="1px" Width="10pt" Color="#bdbebf">
                <Rotation Degrees="-45"/>
            </Rectangle>
        </Panel>
    </DockPanel>
</StackPanel>

您会注意到我还包含了 UX 代码，用于仅在输入中有一些文本时显示关闭按钮。干杯！

欢迎您访问 Fuse 文档以阅读有关 Layout in general and Responsive layout in particular 的更多信息，以获取有关该主题的有用详细信息。

添加一个 'X' 以在用户输入文本时清除 TextInput

Add an 'X' to clear TextInput when User has entered Text

fusetools