Не удается получить DataBinding для работы с изображением в качестве фона границы

Question

У меня возникла проблема с WPF, когда я пытаюсь использовать DataBinding с изображением в качестве фона для границы. У меня нет никаких проблем рендеринга изображения таким образом:

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

Моих DefaultImageConverter просто проверяет, если изображение является недействительным, и если да, то возвращает «мы не имеем никакого образа» BitmapImage, который является внедренным ресурсом в проекте. Это также отлично работает.

Я не уверен, что это критически важно, но изображение действительно происходит из поля MS SQL Server CE Image, а соответствующее поле Entity - фактически байтовый массив. Тем не менее, он работает отлично.

Затем я решил попробовать простую округлую рамку вокруг изображения, чтобы она выглядела лучше. Моя первая попытка состояла в том, чтобы использовать холст с рамкой и изображением, но квадратное изображение рисуется над закругленными частями границы. После того, как я посмотрел, я обнаружил, что вы можете нарисовать изображение в качестве фона границы. Это то, что я придумал:

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

Моя проблема заключается в том, что я получаю сообщение об ошибке XML разбора говорить мне, что я должен либо установить UriSource ИЛИ StreamSource. Я устанавливаю StreamSource. Я также попытался установить UriSource (обнаружив аналогичную, но противоположную проблему, когда встречалась одна и та же проблема, но с использованием UriSource), и я получаю ту же проблему.

Он будет работать, но просто не удастся, когда он попытается ссылаться на это изображение.

Действительно, я просто хочу поместить закругленную рамку вокруг изображения без изображения по углам. Если есть совершенно другой способ сделать это, это тоже работает.

Надеюсь, это имеет смысл!

С уважением, Майк

Answer 1

Я был озадачен этим довольно долгое время, и, будучи новым для XAML, находя решения занимает немного больше времени, чем если бы я искал решение в C++, где я гораздо более удобным.

Однако, как и должно было быть, я смог найти решение буквально через пять минут после публикации моего вопроса, и вот он.

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

Этот код обрабатывает только округлые углы изображения или что-либо внутри панели стека. Я собираюсь изучить этот OpacityMask для более подробной информации, но, похоже, это трюк. Я могу положить одну или несколько границ вокруг, если захочу. Очень круто.

С уважением, Майк

Answer 2

Что вы можете сделать, это создать изображение и границы в том же месте, так что граница перекрывает изображение. И.Е.

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