Question

我有一个按钮，在点击该按钮时会添加一个TextBox，然后用户可以通过点击TextBox来编辑TextBox的内容。

仅当焦点对准TextBox时，才需要显示图像（带有删除功能）。即已被点击。

当TextBox失去焦点时，图像应消失。即用户点击了另一个控件。有人知道如何实现吗？

以下是我到目前为止所拥有的。

    private void Textwriting_Tapped(object sender, TappedRoutedEventArgs e)
    {
        //Set HitTest Visibility
        DragBoundsOverlay.IsHitTestVisible = false;
        emojiCanvas.IsHitTestVisible = false;
        textCanvas.IsHitTestVisible = true;
        inkCanvas.IsHitTestVisible = false;

        //TODO Add Custom Onscreen Keyboard Support

        //Win Onscreen Keyboard Scope - i.e. Number, Text etc
        InputScope scope = new InputScope();
        InputScopeName scopeName = new InputScopeName();
        scopeName.NameValue = InputScopeNameValue.ChatWithoutEmoji;
        scope.Names.Add(scopeName);

        if (AddTextBox == null)
        {
            AddTextBox = new TextBox
            {
                Foreground = new SolidColorBrush(Colors.White),
                Background = new SolidColorBrush(Colors.Transparent),
                BorderBrush = new SolidColorBrush(Colors.Transparent),
                CanDrag = true,
                IsTapEnabled = true,
                PlaceholderText = "Type Text Here...",
                FontSize = 45f,
                AcceptsReturn = true,

                // Win Onscreen Keyboard Settings
                AllowFocusOnInteraction = true,
                PreventKeyboardDisplayOnProgrammaticFocus = false,
                InputScope = scope,

                ManipulationMode = ManipulationModes.All,
                VerticalAlignment = VerticalAlignment.Center,
                HorizontalAlignment = HorizontalAlignment.Center
            };

            //Drag Handlers
            AddTextBox.AddHandler(PointerPressedEvent, new PointerEventHandler(TextManipulation.AddTextBox_PointerPressed), true);
            AddTextBox.AddHandler(PointerReleasedEvent, new PointerEventHandler(TextManipulation.AddTextBox_PointerReleased), true);
            AddTextBox.AddHandler(PointerMovedEvent, new PointerEventHandler(TextManipulation.AddTextBox_PointerMoved), true);

            textCanvas.Children.Add(AddTextBox);
            Canvas.SetLeft(AddTextBox, 30);
            Canvas.SetTop(AddTextBox, 380);

            TextBoxDelete = new Image
            {
                Source = new BitmapImage(new Uri("ms-appx:///Resources/Elements/close.png")),
                Width = 50,
                Height = 50
            };

            TransformGroup TextBoxDelete_Transform = new TransformGroup();
            TextBoxDelete_Transform.Children.Add(TextManipulation._transform);

            TextBoxDelete.RenderTransform = TextBoxDelete_Transform;

            textCanvas.Children.Add(TextBoxDelete);
            Canvas.SetLeft(TextBoxDelete, 0);
            Canvas.SetTop(TextBoxDelete, 350);


        }

    }

XAML

        <Canvas Name="textCanvas" Width="{x:Bind DrawW}" Height="{x:Bind DrawH}"  AllowDrop="True" IsHitTestVisible="False" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,0,0,0">
            <Canvas.RenderTransform>
                <TranslateTransform X="{x:Bind DrawX}" Y="{x:Bind DrawY}"/>
            </Canvas.RenderTransform>
        </Canvas>


       <PivotItem>
            <PivotItem.Header>
                <Button x:Name="TextMenu" Tapped="Textwriting_Tapped" Width="180" Height="180" Padding="0,0,0,0">
                    <Border BorderThickness="1,1,1,3" BorderBrush="#333333">
                        <Image Source="ms-appx:///Resources/textwriting.png" Stretch="UniformToFill"/>
                    </Border>
                </Button>
            </PivotItem.Header>
            <Grid Height="520">
            </Grid>
        </PivotItem>

Answer 1

您好，尽管我无法获得确切的UI / UX，这是我能够想到的，简单的实现，但是基本上，我有相同的想法，不确定是否有使用工具箱或内置控件，无论如何在这里。

目标是动态添加文本框，并在其旁边添加删除按钮，然后在点击文本框时，将显示删除按钮，并且如果删除了焦点，例如其他控件获得焦点，则删除按钮将不可见。

为此，我创建了一个简单且混乱的UI Helper，我使用了一些代码来设置控件的属性。

UIHelper.cs

Ticker   Year  Ebitda  Netincome  
ticker1  2017  4509    200  
ticker1  2016  9900    300  
ticker1  2015  8902    359  
ticker1  2014  3457    234  
ticker2  2017  3234    493  
ticker2  2017  9034    346  
ticker2  2017  2348    439  
ticker2  2017  2142    849

这是我的xaml：

using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;

namespace App1
{
    public static class UIHelper
    {
        public static void CreateRemovableTextBoxToCanvas(Canvas canvas, string label = null)
        {
            canvas.IsHitTestVisible = true;

            InputScope scope = new InputScope();

            InputScopeName scopeName = new InputScopeName
            {
                NameValue = InputScopeNameValue.ChatWithoutEmoji
            };

            scope.Names.Add(scopeName);

            int controlIndex = canvas.Children.Count - 1;

            if (label == null)
            {
                label = "Field " + canvas.Children.Count;
            }

            TextBlock newTextBlock = new TextBlock
            {
                Text = label,
                VerticalAlignment = VerticalAlignment.Center,
                TextAlignment = TextAlignment.Center,
                HorizontalAlignment = HorizontalAlignment.Stretch,
                Margin = new Thickness(0, 0, 10, 0)
            };

            TextBox newTextBox = new TextBox
            {
                Name = "TextBox" + controlIndex,
                Foreground = new SolidColorBrush(Colors.Black),
                Background = new SolidColorBrush(Colors.Transparent),
                BorderBrush = new SolidColorBrush(Colors.DarkGray),
                CanDrag = true,
                IsTapEnabled = true,
                PlaceholderText = "Type Text Here...",
                FontSize = 14f,
                AcceptsReturn = true,

                // Win Onscreen Keyboard Settings
                AllowFocusOnInteraction = true,
                PreventKeyboardDisplayOnProgrammaticFocus = false,
                InputScope = scope,

                ManipulationMode = ManipulationModes.All,
                VerticalAlignment = VerticalAlignment.Center,
                HorizontalAlignment = HorizontalAlignment.Center,
                Width = 130
            };

            Button deleteTextBoxButton = new Button
            {
                Name = "DeleteTextBoxButton" + controlIndex,
                Content = new StackPanel
                {
                    Children =
                    {
                        new SymbolIcon
                        {
                            Symbol = Symbol.Delete
                        },
                    }
                },
                Visibility = Visibility.Collapsed
            };

            StackPanel newTextStackPanel = new StackPanel
            {
                Orientation = Orientation.Horizontal,
                Children = { newTextBlock, newTextBox, deleteTextBoxButton }
            };

            newTextBox.LostFocus += (s, args) => deleteTextBoxButton.Visibility = Visibility.Collapsed;
            newTextBox.GotFocus += (s, args) => deleteTextBoxButton.Visibility = Visibility.Visible;

            int topOffset = 40 * canvas.Children.Count;

            if (canvas.Children.Count > 0)
            {
                Canvas.SetLeft(newTextStackPanel, 0);
                Canvas.SetTop(newTextStackPanel, topOffset);
            }

            canvas.Children.Add(newTextStackPanel);
        }
    }
}

这是我的代码背后：

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Button Grid.Row="0"
            x:Name="TextMenu"
            Tapped="Textwriting_Tapped"
            Content="Add TextBox" />
        <Canvas Grid.Row="1"
            x:Name="TextCanvas"
            Width="800"
            Height="350"
            AllowDrop="True"
            IsHitTestVisible="False"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Margin="0,15,0,0" />
    </Grid>

</Page>

希望这会有所帮助！

隐藏焦点时隐藏元素

1 个答案: