Impossibile far funzionare DataBinding con un'immagine come sfondo di un bordo

Question

Ho riscontrato un problema con WPF quando provo a utilizzare DataBinding con un'immagine come sfondo di un bordo. Non ho problemi a rendere l'immagine in questo modo:

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

My DefaultImageConverter controlla solo se l'immagine è nulla e, in tal caso, restituisce un "non abbiamo immagine" BitmapImage che è una risorsa integrata nel progetto. Anche questo funziona alla grande.

Non sono sicuro che sia critico, ma l'immagine proviene effettivamente da un campo Immagine di MS SQL Server CE e il campo Entity corrispondente è in realtà un array di byte. Tuttavia, funziona perfettamente.

Quindi, ho deciso di provare a mettere un semplice bordo arrotondato attorno all'immagine per renderla migliore. Il mio primo tentativo è stato quello di utilizzare una tela con un bordo e l'immagine, ma l'immagine quadrata dipinge sulle parti arrotondate del bordo. Dopo aver guardato un po ', ho scoperto che potresti effettivamente dipingere un'immagine come sfondo del bordo. Questo è quello che mi è venuto in mente:

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

Il mio problema è che sto ricevendo un errore di analisi XML che mi dice che devo impostare UriSource O StreamSource. Sto impostando StreamSource. Ho anche provato a impostare UriSource (avendo riscontrato un problema simile ma opposto in cui si è verificato lo stesso problema ma usando UriSource) e ottengo lo stesso problema.

Funzionerà, ma fallirà quando proverà a fare riferimento a questa immagine.

In realtà voglio solo mettere un bordo arrotondato attorno a un'immagine senza che l'immagine dipinga sugli angoli. Se esiste un modo totalmente diverso per farlo, anche quello funziona.

Speriamo che abbia senso!

Saluti, Mike

Answer 1

Ne sono rimasto sconcertato per un po 'di tempo, ed essendo nuovo in XAML, trovare soluzioni richiede un po' più di tempo che se stessi cercando una soluzione in C ++ dove mi trovo molto più a mio agio.

Tuttavia, come dovrebbe essere il caso, sono riuscito a trovare una soluzione letteralmente cinque minuti dopo aver pubblicato la mia domanda, ed eccolo qui.

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

Questo codice gestisce gli arrotondamenti degli angoli dell'immagine o qualsiasi cosa all'interno dello stackpanel. Esaminerò questo OpacityMask per maggiori dettagli, ma sembra fare il trucco. Posso mettere uno o più bordi attorno ad esso, se voglio. Molto bello.

Saluti, Mike

Answer 2

Quello che potresti fare è creare un'immagine e un bordo nella stessa posizione, in modo che il bordo si sovrapponga all'immagine. Cioè.

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