4

角が丸く、上半分がハイライトの境界線を作成しようとしています。ハイライトを与えるために、境界線の上半分に重なる放射状のグラデーションの楕円を使用していますが、楕円が境界線の角を着色するのを防ぐ方法がわかりません。Kaxamlのスクリーンショットは次のとおりです。

ClipToBoundsが機能しない

XAMLコードは次のとおりです。

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="DarkGray">

  <Grid Width="256" Height="256">
    <Border CornerRadius="16" Background="Black" Margin="4">
      <Border Background="Gray" Margin="32">
        <TextBlock Foreground="Black" Text="1" FontFamily="Trebuchet MS" FontSize="96pt"
                   HorizontalAlignment="Center" VerticalAlignment="Center"/>
      </Border>
    </Border>
    <Border CornerRadius="16" ClipToBounds="True">
      <Ellipse>
        <Ellipse.Fill>
          <RadialGradientBrush>
            <GradientStop Color="White" Offset="0"/>
            <GradientStop Color="Transparent" Offset="1"/>
          </RadialGradientBrush>
        </Ellipse.Fill>
        <Ellipse.RenderTransform>
          <TransformGroup>
            <ScaleTransform ScaleX="3" ScaleY="2" CenterX="128" CenterY="128"/>
            <TranslateTransform Y="-235"/>
          </TransformGroup>
        </Ellipse.RenderTransform>
      </Ellipse>
    </Border>
    <Border CornerRadius="16" BorderThickness="8" BorderBrush="Black"/>
  </Grid>
</Page>

楕円の陰影の影響を受ける上部コーナー領域を停止するにはどうすればよいですか？

で遊んでみましたOpacityMaskが、特に楕円がレンダリング用に変換されている場合は、その使用方法がよくわからないことを告白する必要があります。何をしようとしても、楕円は完全に消えるか、まったく影響を受けません。

どんな助けでも大歓迎です。

前もって感謝します。

4

2 に答える 2

2

ClipToBoundsまたはを使用する代わりにOpacityMask、放射状グラデーションを追加Border要素の背景として使用することになりました。ヒントをくれた alpha-mouse に感謝します。

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="DarkGray">

  <Grid Width="256" Height="256">
    <Border CornerRadius="16" Background="Black" Margin="4">
      <Border Background="Gray" Margin="32">
        <TextBlock Foreground="Black" Text="1" FontFamily="Trebuchet MS" FontSize="96pt"
                   HorizontalAlignment="Center" VerticalAlignment="Center"/>
      </Border>
    </Border>
    <Border CornerRadius="16" Margin="4">
      <Border.Background>
        <RadialGradientBrush>
          <RadialGradientBrush.Transform>
            <TransformGroup>
              <ScaleTransform ScaleX="3" ScaleY="2" CenterX="128" CenterY="128"/>
              <TranslateTransform Y="-235"/>
            </TransformGroup>
          </RadialGradientBrush.Transform>
          <GradientStop Color="White" Offset="0"/>
          <GradientStop Color="Transparent" Offset="1"/>
        </RadialGradientBrush>
      </Border.Background>
    </Border>
    <Border CornerRadius="16" BorderThickness="8" BorderBrush="Black"/>
  </Grid>
</Page>

そして、最終的な外観は次のとおりです。

国境に小さな灰色の耳はもうありません

ありがとう。

于 2010-11-24T14:14:21.240 に答える
1

まず、Visual Studio でコードをコンパイルして実行すると問題ないように見えます。RadialGradientBrush第二に、これをBackground最初のように使用しないのはなぜBorderですか? このようなもの： 

<Border CornerRadius="16" >
    <Border.Background>
        <RadialGradientBrush Center=".5 0" GradientOrigin=".5 0" RadiusX="1" >
            <GradientStop Color="White" Offset="0"/>
            <GradientStop Color="Black" Offset="1"/>
        </RadialGradientBrush>
    </Border.Background>
</Border>
于 2010-11-24T12:26:01.727 に答える