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

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

1 голос
/ 03 августа 2009

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

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

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

Я не уверен, критично ли это, но изображение на самом деле идет из поля «Образ MS SQL Server CE», а соответствующее поле сущности на самом деле является байтовым массивом. Тем не менее, это работает просто отлично.

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

<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), и я получил ту же проблему.

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

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

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

С уважением, Mike

Ответы [ 2 ]

0 голосов
/ 03 августа 2009

Я был довольно озадачен этим довольно долго, и, будучи новичком в 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 для получения более подробной информации, но, похоже, это помогает. Я могу поставить одну или несколько границ вокруг него, если захочу. Очень круто.

С уважением, Mike

0 голосов
/ 03 августа 2009

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

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