1

当我尝试将 DataBinding 与图像一起用作边框的背景时，我遇到了 WPF 问题。我以这种方式渲染图像没有问题：

<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），我遇到了同样的问题。

它会运行，但在尝试引用此图像时会失败。

真的，我只想在图像周围放置一个圆形边框，而不会在角落上绘制图像。如果有完全不同的方法可以做到这一点，那也可以。

希望这是有道理的！

问候，迈克

4

2 回答 2

0

您可以做的是在同一位置创建一个图像和一个边框，以便边框覆盖图像。IE

        <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>
于 2009-08-02T22:50:25.570 回答
0

我为此困惑了很长一段时间，而且作为 XAML 的新手，与我在 C++ 中寻找解决方案相比，找到解决方案所需的时间要长一些，因为我在 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 以了解更多细节，但它似乎可以解决问题。如果我愿意，我可以在它周围设置一个或多个边框。很酷。

问候，迈克

于 2009-08-02T23:28:53.590 回答