1

画像を境界線の背景として DataBinding を使用しようとすると、WPF で問題が発生しました。この方法で画像をレンダリングしても問題ありません。

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

私の DefaultImageConverter は、画像が null かどうかをチェックするだけで、そうであれば、プロジェクトに埋め込まれたリソースである「画像がありません」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>

私の問題は、UriSource または StreamSource を設定する必要があることを示す XML 解析エラーが発生することです。StreamSource を設定しています。また、UriSource を設定しようとしました (同じ問題が発生しているが、UriSource を使用しているという、同様ではあるが反対の問題が見つかりました) と、同じ問題が発生します。

実行されますが、このイメージを参照しようとすると失敗します。

本当に、画像が角を塗りつぶさずに、画像の周りに丸い境界線を置きたいだけです。これを行うためのまったく異なる方法があれば、それも同様に機能します。

うまくいけば、これは理にかなっています！

よろしく、マイク

4

2 に答える 2

0

できることは、同じ場所に Image と Border を作成して、Border が Image に重なるようにすることです。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++ で解決策を探していた場合よりも少し時間がかかりました.

しかし、よくあることですが、質問を投稿してから文字通り 5 分後に解決策を見つけることができました。

<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 を調べますが、うまくいくようです。必要に応じて、1 つまたは複数の境界線を配置できます。とてもかっこいい。

よろしく、マイク

于 2009-08-02T23:28:53.590 に答える