Question

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

我正在尝试添加＆＃39; X＆＃39;它可用于清除输入文本。我的计划是稍后添加功能，只显示这个＆＃39; X＆＃39;当输入字段中有实际文本时。

现在，我不知道如何做到这一点，同时不允许输入超越“X＆＃39;”。如果您认为这是一个错误，我会将其清理干净并报告，但我怀疑它只是一些简单的我不明白所以我认为我只是问你一下......我尝试了很多想法，但似乎没有一个对我有用......

<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时，它们都会占用相同的空间。没有隐含的空间消耗（按设计）。结果就是，正如你所看到的那样，事情会相互影响。

要实现您的需求，使用DockPanel会更好的策略，因为在DockPanel内部，您可以通过将其子项对接到其侧面来明确消耗空间。以下是一个示例，基于您最初发布的代码：

<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和Responsive layout in particular有关该主题的有用详情。

添加＆＃39; X＆＃39;用户输入文本时清除TextInput

1 个答案: