C#•7mo ago

❔ AvaloniaUI detect when TextBox's content is changed

yeah so how do i do that, apparently there is something for it but i can't seem to quite find how to use it

29 Replies

arion•7mo ago

In your View.axaml you can name the Textbox like this

<StackPanel>
    <TextBlock Name="Block"></TextBlock>
    <TextBox Name="MyTextBox"/>
</StackPanel>

<StackPanel>
    <TextBlock Name="Block"></TextBlock>
    <TextBox Name="MyTextBox"/>
</StackPanel>

and in your code-behind you can subscribe to property changes with something like this

public MainWindow()
{
    InitializeComponent();

    MyTextBox.WhenValueChanged(textBox => textBox.Text).Subscribe(text =>
    {
        Block.Text = text;
    });
}

public MainWindow()
{
    InitializeComponent();

    MyTextBox.WhenValueChanged(textBox => textBox.Text).Subscribe(text =>
    {
        Block.Text = text;
    });
}

What you end up getting in my example is:

arion•7mo ago

https://cdn.discordapp.com/attachments/1166785753481760829/1170388252751040512/Dawn_Files_8517d164-e565-4e8a-bbc0-d5d640486b4f.gif?ex=6558dc00&is=65466700&hm=5dcfdd1d16e5bd87336ea6cbcc2fad1d51b79bec03576ccfb26ea198f1ce26b9&

Justdie•7mo ago

Thats how it should look like? Cuz i got it work i think but idk if its becaused i used jetbrains rider but the structure is different

c#
public partial class MainView : UserControl
{
    public MainView()
    {
        InitializeComponent();
    }
    public void OnButtonClick(object sender, RoutedEventArgs e)
    {
    Button button = (Button)sender;
    button.Content = "Injected!";
    }
    public void OnPointerEnter(object sender, RoutedEventArgs e)
    {
    }
    
    public void OnTextChangeHasChanged(object sender, TextChangedEventArgs e)
    {
    }
}

c#
public partial class MainView : UserControl
{
    public MainView()
    {
        InitializeComponent();
    }
    public void OnButtonClick(object sender, RoutedEventArgs e)
    {
    Button button = (Button)sender;
    button.Content = "Injected!";
    }
    public void OnPointerEnter(object sender, RoutedEventArgs e)
    {
    }
    
    public void OnTextChangeHasChanged(object sender, TextChangedEventArgs e)
    {
    }
}

is how it looks for me (i know the indent but idk how to indent with this ide)

arion•7mo ago

You were asking for a TextBox, thats a Button

Justdie•7mo ago

The last one isn't I just haven't figured out how to properly do my thing

arion•7mo ago

oh, you want those bindings

Justdie•7mo ago

I am trying to color text but only certain keywods, i kown i can color words with the avalonia but it doesn't seem to be able to highlight only some of them is it better or worst?

arion•7mo ago

They're kinda winforms-ey but I can write up some code for you to do that. What are the names of those controls that need to have OnPointerEnter and OnTextChangeHasChanged?

Justdie•7mo ago

Well wdym, you gon re-write it for me?

arion•7mo ago

Wait, this aint avalonia is it?

Justdie•7mo ago

It is

arion•7mo ago

For a sec I thought it wasnt cuz of your : UserControl um, could u show your .axam code?

Justdie•7mo ago

Well here's the buttons and textbox from my thing but beware, i am still testing i just began to use it and i just began to use c# this is just testing

        <Button Grid.Row="1" Grid.Column="0" Click="OnButtonClick" Content="{Binding ButtonText}" Height="100" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center"></Button>
        <Button Grid.Row="1" Grid.Column="1" Content="Execute" Height="100" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center"></Button>
        <Button Grid.Row="1" Grid.Column="2" Height="100" Content="nice" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center"></Button>
        <Button Grid.Row="1" Grid.Column="3" Height="100" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" Content="cool"></Button>
        <TextBox Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" AcceptsReturn="True" TextWrapping="Wrap" x:Name="LuaSpace" TextChanged="OnTextChangeHasChanged"/>

        <Button Grid.Row="1" Grid.Column="0" Click="OnButtonClick" Content="{Binding ButtonText}" Height="100" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center"></Button>
        <Button Grid.Row="1" Grid.Column="1" Content="Execute" Height="100" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center"></Button>
        <Button Grid.Row="1" Grid.Column="2" Height="100" Content="nice" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center"></Button>
        <Button Grid.Row="1" Grid.Column="3" Height="100" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" Content="cool"></Button>
        <TextBox Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" AcceptsReturn="True" TextWrapping="Wrap" x:Name="LuaSpace" TextChanged="OnTextChangeHasChanged"/>

so if its terrible pelase don't freak out, i don't know the in and outs yet

arion•7mo ago

And which controls do u want bound to these?

public void OnPointerEnter(object sender, RoutedEventArgs e)
{
}

public void OnTextChangeHasChanged(object sender, TextChangedEventArgs e)
{
}

public void OnPointerEnter(object sender, RoutedEventArgs e)
{
}

public void OnTextChangeHasChanged(object sender, TextChangedEventArgs e)
{
}

Justdie•7mo ago

Good question for the OnPointerEnter I have no idea how it got there Prob a bad copy past from SO

arion•7mo ago

lol ok I can do the

public void OnTextChangeHasChanged(object sender, TextChangedEventArgs e)
{
}

public void OnTextChangeHasChanged(object sender, TextChangedEventArgs e)
{
}

one for you

Justdie•7mo ago

I mean sure but all i really want is to give colors to certain words

arion•7mo ago

<TextBox Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" AcceptsReturn="True" TextWrapping="Wrap" x:Name="LuaSpace" TextChanged="OnTextChangeHasChanged"/>

<TextBox Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" AcceptsReturn="True" TextWrapping="Wrap" x:Name="LuaSpace" TextChanged="OnTextChangeHasChanged"/>

I don't think that TextChanged is a property since its not showing up in mine so I will just change some stuff in there

- <TextBox Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" AcceptsReturn="True" TextWrapping="Wrap" x:Name="LuaSpace" TextChanged="OnTextChangeHasChanged"/>
+ <TextBox Name="PART_TextBox" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" AcceptsReturn="True" TextWrapping="Wrap" x:Name="LuaSpace"/>

- <TextBox Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" AcceptsReturn="True" TextWrapping="Wrap" x:Name="LuaSpace" TextChanged="OnTextChangeHasChanged"/>
+ <TextBox Name="PART_TextBox" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" AcceptsReturn="True" TextWrapping="Wrap" x:Name="LuaSpace"/>

Then your MainView's constructor becomes

public MainView()
{
    InitializeComponent();
    PART_TextBox.WhenValueChanged(textBox => textBox.Text).Subscribe(text => OnTextChangeHasChanged(PART_TextBox, PART_TextBox.Text));
}

public MainView()
{
    InitializeComponent();
    PART_TextBox.WhenValueChanged(textBox => textBox.Text).Subscribe(text => OnTextChangeHasChanged(PART_TextBox, PART_TextBox.Text));
}

and the OnTextChangeHasChanged becomes

public void OnTextChangeHasChanged(object sender, string newText)
{
    
}

public void OnTextChangeHasChanged(object sender, string newText)
{
    
}

- public void OnTextChangeHasChanged(object sender, TextChangedEventArgs e)
+ public void OnTextChangeHasChanged(object sender, string newText)

- public void OnTextChangeHasChanged(object sender, TextChangedEventArgs e)
+ public void OnTextChangeHasChanged(object sender, string newText)

Justdie•7mo ago

Got it, but i am still curious about a method to color specific text only

arion•7mo ago

hmm, im not sure about that one, i'll go check if thats possible (You mean like abc, then a is something like red, b is green, c is blue?)

Justdie•7mo ago

exactly trinna make highliting for smt Cannot resolve symbol 'OnTextChangeHasChanged' btw

arion•7mo ago

Could you show the .cs file contents? Seems possible, just insanely user-unfriendly https://github.com/AvaloniaUI/Avalonia/blob/master/samples/ControlCatalog/Pages/TextBlockPage.xaml from the sample

Justdie•7mo ago

i prob have too much using

c#
using System;
using System.Reflection;
using Avalonia.Controls;
using Avalonia.Interactivity;
using Avalonia.Input;
using Avalonia.Markup.Xaml;
using Avalonia.Media;
using DynamicData.Binding;

namespace myapp.Views;
public partial class MainView : UserControl
{
    public MainView()
    {
        InitializeComponent();
        TextBoxPart.WhenValueChanged(textBox => textBox.Text).Subscribe(text => OnTextChangeHasChanged(TextBoxPart, TextBoxPart.Text));

    }

}

c#
using System;
using System.Reflection;
using Avalonia.Controls;
using Avalonia.Interactivity;
using Avalonia.Input;
using Avalonia.Markup.Xaml;
using Avalonia.Media;
using DynamicData.Binding;

namespace myapp.Views;
public partial class MainView : UserControl
{
    public MainView()
    {
        InitializeComponent();
        TextBoxPart.WhenValueChanged(textBox => textBox.Text).Subscribe(text => OnTextChangeHasChanged(TextBoxPart, TextBoxPart.Text));

    }

}

dear mother of god what is this you sent me, HELL NAW

arion•7mo ago

you ddnt add the method

public void OnTextChangeHasChanged(object sender, string newText)
{
    
}

public void OnTextChangeHasChanged(object sender, string newText)
{
    
}

Justdie•7mo ago

Ah i see Good Well thanks

nohopestage•7mo ago

I believe this could be simplified like so:

TextBoxPart.GetObservable(TextBox.TextProperty).Subscribe(OnTextChangeHasChanged);

TextBoxPart.GetObservable(TextBox.TextProperty).Subscribe(OnTextChangeHasChanged);

nohopestage•7mo ago

https://github.com/AvaloniaUI/Avalonia/issues/418#issuecomment-201916167

GitHub

Implement TextChanged event for TextBox · Issue #418 · AvaloniaUI/A...

arion•7mo ago

I am aware of that, but my preference was the WhenValueachanged one xD

Accord•7mo ago

Was this issue resolved? If so, run /close - otherwise I will mark this as stale and this post will be archived until there is new activity.

Gaming

Programming

❔ AvaloniaUI detect when TextBox's content is changed