Невозможно заставить DataBinding работать с изображением в качестве фона границы.

Question

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

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

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

Я не уверен, критично ли это, но изображение на самом деле поступает из поля изображения MS SQL Server CE, а соответствующее поле 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>