No se puede hacer que DataBinding funcione con una imagen como fondo de un borde

Question

Me he encontrado con un problema con WPF cuando intento usar DataBinding con una imagen como fondo de un borde. No tengo problemas para representar la imagen de esta manera:

<Image Name="imgPlayer" Width="100" Height="100"
    Source="{Binding Converter={StaticResource ImageConverter}, Path=Image}"
/>

My DefaultImageConverter solo comprueba si la imagen es nula y, de ser así, devuelve un " no tenemos imagen " BitmapImage que es un recurso incrustado en el proyecto. Esto también funciona muy bien.

No estoy seguro de si es crítico, pero la imagen en realidad proviene de un campo de imagen CE de MS SQL Server, y el campo de entidad correspondiente es en realidad una matriz de bytes. Sin embargo, funciona bien.

Entonces, decidí tratar de poner un borde redondeado simple alrededor de la imagen para que se vea mejor. Mi primer intento fue usar un lienzo con un borde y la imagen, pero la imagen cuadrada pinta sobre las partes redondeadas del borde. Después de mirar un poco, descubrí que en realidad podías pintar una imagen como fondo del borde. Esto es lo que se me ocurrió:

<Border Height="100" Width="100" BorderBrush="Gray" CornerRadius="10" BorderThickness="5">
    <Border.Background>
        <ImageBrush>
            <ImageBrush.ImageSource>
                <BitmapImage StreamSource="{Binding Converter={StaticResource ImageConverter}, Path=Image}"/>
            </ImageBrush.ImageSource>
        </ImageBrush>
    </Border.Background>
</Border>

Mi problema es que recibo un error de análisis XML que me indica que tengo que configurar UriSource O StreamSource. Estoy configurando StreamSource. También intenté configurar UriSource (después de haber encontrado un problema similar pero opuesto donde se encontraba el mismo problema pero usando UriSource) y obtengo el mismo problema.

Se ejecutará, pero simplemente falla cuando intenta hacer referencia a esta imagen.

Realmente solo quiero poner un borde redondeado alrededor de una imagen sin que la imagen se pinte sobre las esquinas. Si hay una forma totalmente diferente de hacerlo, eso también funciona.

¡Espero que esto tenga sentido!

Saludos, Mike

Answer 1

Estuve perplejo por esto durante bastante tiempo, y siendo nuevo en XAML, encontrar soluciones lleva un poco más de tiempo que si estuviera buscando una solución en C ++ donde me siento mucho más cómodo.

Sin embargo, como tendría que ser el caso, pude encontrar una solución literalmente cinco minutos después de publicar mi pregunta, y aquí está.

<Grid Grid.RowSpan="5">
    <!-- Rounded mask -->
    <Border Name="Mask" Background="White" CornerRadius="7"/>

    <StackPanel Width="100" Height="100" HorizontalAlignment="Center" VerticalAlignment="Top">
        <StackPanel.OpacityMask>
            <VisualBrush Visual="{Binding ElementName=Mask}"/>                        
        </StackPanel.OpacityMask>

        <Image Name="imgPlayer"                           
               Source="{Binding Converter={StaticResource ImageConverter}, Path=Image}" 
               MouseLeftButtonDown="Image_MouseRightButtonDown"
               />
    </StackPanel>
</Grid>

Este código solo maneja el redondeo de las esquinas de la imagen, o cualquier cosa dentro del panel de pila. Voy a buscar en este OpacityMask para más detalles, pero parece ser el truco. Puedo poner uno o más bordes alrededor si lo deseo. Muy guay.

Saludos, Mike

Answer 2

Lo que podría hacer es crear una imagen y un borde en la misma ubicación, de modo que el borde se superponga a la imagen. I.E.

        <Grid>
            <Image Name="imgPlayer" Width="100" Height="100" Source="{Binding Converter={StaticResource ImageConverter}, Path=Image}" />
            <Border Width="100" Height="100" BorderBrush="Gray" CornerRadius="10" BorderThickness="5" Background="Transparent" />
        </Grid>