Hide elements when not in focus

Question

I have a button which adds a TextBox when tapped, the user can then edit the contents of the TextBox by tapping on the TextBox.

I need to show an image (with delete function) ONLY when the TextBox is in focus. i.e. Has been tapped.

The image should then disappear when the TextBox has lost focus. i.e. User has tapped on another control. Does anybody know how this can be achieved?

Below is what I have so far.

    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

Hi while I can't get your exact UI/UX, here's what I was able to come up with, simple implementation but basically, got the same idea, not sure if there's a right way of doing this, using toolkit or built in controls, anyway so here.

The goal is to add textboxes dynamically and with delete button beside it, then when the textbox is tapped, the delete button will be visible and if it has lost the focused, e.g. other controls received focus, the delete button will not be visible.

For this, I created a simple and messy UI Helper, I used some of your code to setup properties of the controls.

UIHelper.cs

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);
        }
    }
}

Here's my xaml:

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

And here's my code-behind:

using Windows.UI.Xaml.Input;

namespace App1
{
    public sealed partial class MainPage
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        public void Textwriting_Tapped(object sender, TappedRoutedEventArgs e)
        {
           UIHelper.CreateRemovableTextBoxToCanvas(TextCanvas);
        }
    }
}

Hope this helps!