Impossible d'utiliser DataBinding pour travailler avec une image en tant qu'arrière-plan d'une bordure

Question

J'ai rencontré un problème avec WPF lorsque j'essaie d'utiliser DataBinding avec une image comme arrière-plan d'une bordure. Je n'ai aucun problème rendu de l'image de cette façon:

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

Mon DefaultImageConverter vérifie simplement si l'image est nulle, et si oui, retourne un « nous avons pas d'image » BitmapImage qui est une ressource intégrée dans le projet. Cela fonctionne aussi très bien. Je ne sais pas si c'est critique, mais l'image provient en fait d'un champ MS SQL Server CE Image, et le champ Entity correspondant est en fait un tableau d'octets. Cependant, cela fonctionne très bien. Ensuite, j'ai décidé d'essayer de mettre une simple bordure arrondie autour de l'image pour la rendre plus belle. Ma première tentative a été d'utiliser une toile avec une bordure et l'image mais l'image carrée peint sur les parties arrondies de la bordure. Après avoir fait quelques recherches, j'ai trouvé que vous pouviez réellement peindre une image comme arrière-plan de la bordure. C'est ce que je suis venu avec:

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

Mon problème est que je reçois une erreur d'analyse XML me disant que je dois soit définir UriSource OU StreamSource. Je suis en train de définir StreamSource. J'ai aussi essayé de configurer UriSource (ayant trouvé un problème similaire mais opposé où le même problème était rencontré mais utilisant UriSource) et j'ai le même problème.

Il va s'exécuter, mais échoue juste lorsqu'il essaie de référencer cette image. Vraiment je veux juste mettre une bordure arrondie autour d'une image sans la peinture d'image sur les coins. S'il y a une façon totalement différente de le faire, cela fonctionne également.

J'espère que cela a du sens!

Cordialement, Mike

Answer 1

je déconcerté par cela pour un certain temps, et d'être à nouveau XAML, trouver des solutions un peu plus long que si je cherchais une solution en C++ où je suis beaucoup plus à l'aise.

Cependant, comme cela aurait dû être le cas, j'ai été capable de trouver une solution littéralement cinq minutes après avoir posté ma question, et le voici.

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

Ce code gère simplement arrondir les coins de l'image, ou n'importe quoi à l'intérieur de la pile. Je vais regarder dans cette OpacityMask pour plus de détails, mais il semble faire l'affaire. Je peux mettre une ou plusieurs bordures autour si je veux. Très sympa.

Cordialement, Mike

Answer 2

Ce que vous pouvez faire est de créer une image et une bordure dans le même endroit, de sorte que la frontière recouvre l'image. C'EST À DIRE.

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