Добавьте X для очистки TextInput, когда пользователь ввел текст

Question

У меня есть класс UX с именем InputWithLabel, который включает в себя как метку, так и 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>

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 в целом и Responsive layout в частности, чтобы получить полезные сведения по этой теме.