Mostrar imágenes en TextBlock (WPF)

Question

Estoy trabajando en una aplicación de chat simple. Actualmente los mensajes son encuadernados a un cuadro de lista personalizada de estilo como esto (XAML simplificado):

<ListBox ItemsSource="{Binding MessageCollection}"> 
    <ListBox.ItemTemplate> 
     <DataTemplate> 
      <TextBlock Text="{Binding Text}"/> 
     </DataTemplate> 
    </ListBox.ItemTemplate> 
</ListBox> 

Ahora me gustaría ser capaz de poner imágenes (como emoticonos gráficos) en el texto del mensaje que se muestra. ¿Hay alguna forma de lograr esto usando TextBlock (o cualquier otro componente estándar) o necesito usar algún control especial para esto?

Gracias de antemano

Answer 1

Si desea que las imágenes realmente dentro del texto (como un icono gestual), entonces van a tener que hacer algún trabajo. Esto suena como una de las pocas veces que realmente quisiera un control de usuario, el punto de que sería uno que escanea el texto buscando valores de emoticones y construyendo una plantilla de datos sobre la marcha.

Recuerde que cualquier cosa que se puede hacer en XAML se puede hacer en el código, por lo que el código que estoy pensando seguiría esta idea general:

1. texto escaneado para valores emoticon y crear una lista de valores para los datos elementos.
2. Crea un DockPanel.
3. Foreach elemento en la lista, agregar ya sea un TextBlock o una imagen (basado en el valor).
4. Establezca este contenido en el DockPanel.

Creo que algo como esto es realmente lo que estás buscando, pero si solo quieres una imagen, entonces la sugerencia de ValueConverter funcionaría.

Answer 2

Se puede usar un convertidor de valores para convertir el texto a otro tipo que tiene una lista de segmentos que se componen de texto o la cara sonriente (en el orden en el que aparecen).

Luego, puede usar una plantilla de datos para enlazar a ese nuevo tipo y mostrar el texto y las caras sonrientes de manera apropiada.

Answer 3

Utilice el elemento Imagen en lugar del Bloque de texto y use un Convertidor para asignar el valor del texto a la imagen de la sonrisa.

<ListBox ItemsSource="{Binding MessageCollection}"> 
<ListBox.ItemTemplate> 
    <DataTemplate> 
     <Image Source="{Binding Text, Converter={StaticResource MyImageConverter}}"/> 
    </DataTemplate> 
</ListBox.ItemTemplate> 

Answer 4

El contenido de un TextBlock siempre es solo una serie de Inlines, por lo que debe usar InlineUIContainer. Puede insertar este contenedor como una de las líneas en su TextBlock donde quiera que aparezca una imagen, alternando con el texto Ejecuciones. Puede analizar un mensaje y, al mismo tiempo, seguir agregando los tokens (texto o imágenes) que encuentre en la colección Inlines del TextBlock.

Answer 5

Simplemente use InlineUIContainer.

<TextBlock TextWrapping="Wrap"> 
    <Run>Some text.</Run> 
    <InlineUIContainer> 
     <Image Source="http://sstatic.net/stackoverflow/img/apple-touch-icon.png" Height="20"></Image> 
    </InlineUIContainer> 
    <Run>Some more text.</Run> 
</TextBlock> 

Answer 6

También me encontré con este problema hace poco y puedo superar esto mediante

Creación de un cuadro de lista ItemTemplate que contiene un ItemsControl que tiene un WrapPanel en el ItemsPanelTemplate y luego ligar mi cadena a la ItemsSource de ItemsControl con un IValueConverter que alberga toda la lógica.

Divida sus palabras y busque/busque en sus emoticones cadenas, hipervínculos, etc. y cree su TextBlock, Imagen, Hipervínculo, Elementos de botón y configure sus valores y controladores de eventos.

En la función, cree una lista < UIElement> y llene la lista con los controles que ha generado y devuelva la lista como el objeto en la función Convert del IValueConverter.

Como tiene el WrapPanel allí, se realiza la envoltura.