Use images in textbox

Question

I am creating a control that displays a hex value (For example FFAA-CA10-56D7) . Right now the value consists of images. The value of the control looks like:

For a read only control I have no problems. I am able to place the appropriate images according to the value. So if I have to set the value to FF for example I will iterate through the characters on the string and then place the corresponding image.

Now the problem is with read-write controls. It will be nice if I could use the same font. Right now I append images as the user types values. But it is not friendly. What if the user wants to select 3 characters by dragging the mouse?. Or how could I perform the shift+arrow key combination that will select multiple characters.

So in short I will like to keep the same look and feel of the control and I do not want to replace the images for a textbox. What approach do you guys recommend so that I can keep the same look and feel.

Things I have tried:

I tried to create my custom font from those png's. But haven't been successful on finding the right program that will enable me to create a font from png images.

Answer 1

I would do this by using a custom ListBox with a Horizontal StackPanel as its ItemPanelTemplate, and its ItemsSource would be a list of char. then you could provide an appropiate DataTemplate containing the corresponding images (dependending on char value, maybe using DataTriggers). ListBox has Multiselection, so you should have no problem in imitating the Text Selection behavior of a TextBox, and by having a List of char as the ItemsSouce you can also allow Copying (by doing your own implementation of EditCommands.Copy in your ListBox.

Edit: This is one of those cases in which you will definitely want to implement your own Custom Control