0

我有一个名为 InputWithLabel 的 UX 类，其中包括标签和 TextInput。

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

不过现在，我不知道如何做到这一点，同时不允许输入超过“X”。如果您认为这是一个错误，我会清理它并报告它，但我怀疑这只是我不明白的一些简单的事情，所以我想我只是问你一下......我尝试了很多想法但他们似乎都不适合我......

<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>
4

1 回答 1

1

没有错误，这完全是为了理解 Fuse 中的布局是如何工作的。当您将 aTextInput与 aPanel放在一起时Rectangle，它们都占据相同的空间。没有发生隐含的空间消耗（按设计）。如您所见，其结果是，事情会相互影响。

为了实现您的需求，使用 a 将是一个更好的策略DockPanel，因为在 a 内部，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 文档以阅读更多关于一般布局和响应式布局的信息，以获取有关该主题的有用详细信息。

于 2017-12-12T20:26:25.473 回答