Não é possível obter DataBinding ao trabalho com uma imagem como plano de fundo de uma fronteira

Question

eu correr em um problema com WPF quando eu tento usar DataBinding com uma imagem como plano de fundo para uma borda. Não tenho nenhum problema tornando a imagem da seguinte forma:

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

Meu DefaultImageConverter apenas verifica se a imagem é nulo, e em caso afirmativo, retorna um "não temos nenhuma imagem" BitmapImage que é um recurso incorporado no projeto. Isso também funciona muito bem.

Eu não tenho certeza se é crítica, mas a imagem é realmente vindo de um campo Imagem MS SQL Server CE, eo campo de entidade correspondente é na verdade uma matriz de bytes. No entanto, ele funciona muito bem.

Então, eu decidi tentar colocar uma borda arredondada simples ao redor da imagem para torná-la melhor. Minha primeira tentativa foi usar uma tela com uma borda e a imagem, mas as tintas imagem quadrados sobre as partes arredondadas da fronteira. Depois de fazer algumas olhando, eu achei que você poderia realmente pintar uma imagem como fundo da fronteira. Isto é o que eu vim com:

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

O meu problema é que eu estou recebendo um erro de análise XML me dizendo que eu tenho que qualquer conjunto UriSource OU StreamSource. Estou configurando StreamSource. Eu também tentei definindo UriSource (tendo encontrado um problema semelhante, mas oposto, onde o mesmo problema estava sendo encontrado, mas usando UriSource) e eu recebo o mesmo problema.

Ele será executado, mas apenas falha quando ele tenta fazer referência a esta imagem.

Realmente eu só quero colocar uma borda arredondada em torno de uma imagem sem a imagem de pintura ao longo dos cantos. Se há uma maneira totalmente diferente de fazer isso, que funciona tão bem.

Esperamos que isso faz sentido!

Saudações, Mike

Answer 1

Eu estava perplexo por este por um bom tempo, e sendo novo para XAML, encontrar soluções demora um pouco mais do que se eu estava à procura de uma solução em C ++ onde eu estou muito mais confortável.

No entanto, como teria que ser o caso, eu era capaz de encontrar uma solução, literalmente, cinco minutos depois de postar minha pergunta, e aqui está ele.

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

Este código apenas lida com arredondamento dos cantos da imagem, ou qualquer coisa dentro do StackPanel. Vou olhar para este OpacityMask para mais detalhes, mas parece fazer o truque. Eu posso colocar um ou mais fronteiras em torno dele se eu quiser. Muito legal.

Saudações, Mike

Answer 2

O que você poderia fazer é criar uma imagem e uma borda no mesmo local, para que o Border sobrepõe a imagem. I.E.

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