2

ボタンの ControrTemplate を変更し、CornerRadius と BevelBitmpaEffect で境界線を付けました。最小限の労力で十分にまともに見えます。色付きの背景に置くと、問題が明らかになります。

ライトアングルがそこから来ているコーナーは、直角のコーナーを持つ白いスニップです。おそらくライト効果によるものですが、コーナー半径で非常に明白です。私はそれについて何もできないと思います（ cornerRadius を使用しないなどの明らかなことを除いて）？

編集：

このコードは、同じ問題を生成するはずです

<Style x:Key="TabButtons" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border CornerRadius="8"
                        SnapsToDevicePixels="True"
                        Name="BtnBorder"
                        Width="80"
                        Height="35"
                        BorderThickness="1"
                        BorderBrush="DarkBlue">
                    <Border.Background>

                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="LightBlue" Offset="0" />
                            <GradientStop Color="DarkBlue" Offset="1" />
                        </LinearGradientBrush>

                    </Border.Background>
                    <Border.BitmapEffect>
                        <BevelBitmapEffect BevelWidth="5"
                                           EdgeProfile="CurvedOut"
                                           LightAngle="135"
                                           Relief="0.1"
                                           Smoothness="1" />
                    </Border.BitmapEffect>
                    <ContentPresenter Name="BtnContent" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Content" />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

たとえば、ライトブルーの背景でこのボタンを使用します

<Border Background="LightBlue" >
    <Button Style={StaticResource TabButtons} >Test</Button>
</Border>
4

1 に答える 1

3

問題が正確にどのようなものか想像できませんが、ここに 1 つの提案があります。影響を受けるボタンまたはウィンドウ全体に対して、SnapsToDevicePixels を true に設定してみてください。この問題は、デフォルトで WPF がデバイスに依存しないレンダリングを行いたいという事実に起因する可能性があります。これにより、幅/高さと DPI/ピクセルが正確に整列していないため、コントロールの端が隣接するピクセルにわずかに「にじみ」ます。SnapsToDevicePixels を true に設定すると、WPF がデバイス ピクセルに対して正確にレンダリングされ、「出血」効果が消えます...

編集：あなたが提供したコードを試してみましたが、「白いスニップ」は角の周りの白い（っぽい）ピクセルだと思いますか？ここでの問題は、コーナー内のピクセルも明るくするアンチエイリアシングに起因します。暗いトーンを使用しているため、明るいピクセルが目立ち、ボタンの見栄えがよくありません。

これがバグと見なされるかどうかはわかりません。角と角の外側を構成するピクセルに対してアンチエイリアス処理を行うと効果的だと思われるかもしれませんが、角の内側のすべてのピクセルは背景色で着色する必要があります。繰り返しますが、これは設計によるものかもしれません.アンチエイリアシングはコーナーの内側のピクセルも混乱させる必要があります.そうしないと、必要な効果が得られません.

とにかく、2 つの回避策があります。

1) ボーダーに次のプロパティ RenderOptions.EdgeMode="Aliased" を与えます。これにより、アンチエイリアシング (0% の白 (っぽい) ピクセル) がオフになりますが、コントロールは非常にぎざぎざに見えます。

2) 2 つの境界線を使用します。外側の境界線は、現在の境界線を定義したのと同じように定義されます。Background プロパティを DarkBlue に設定するだけです。次に、この外側の境界線に対して、別の境界線を子要素として作成します。この内側の境界では、CornerRadius=7、RenderOptions.EdgeMode="Aliased" を設定し、LinearGradientBrush で背景を定義します。内側の境界線には ContentPresenter が含まれます。コードは次のようになります。

<Border CornerRadius=8 Background=DarkBlue>
    <Border CornerRadius=7 RenderOptions.EdgeMode="Aliased">
       <Border.Background>
          ...
       </Border.Background>

       <ContentPresenter />
    </Border>
</Border>

白いピクセルを 100% 取り除くことはできませんが、これが最善の妥協点だと思います。肉眼では白いピクセルは見えませんでしたが、拡大鏡ツールで拡大すると、角ごとに 2 ピクセルしかカウントされず、下の角だけでした。以前は、コーナーあたり 8 ピクセル程度でした。少なくとも外側の境界線はまだアンチエイリアス処理されており、コントロールはギザギザに見えません。

BevelBitmapEffect は、コントロールの外観に何の違いももたらさなかったので、省略しました。

于 2010-07-31T19:38:56.760 に答える