Как обрезать рендеринг, чтобы он находился внутри скругленной границы? - PullRequest
Новая
       9

Как обрезать рендеринг, чтобы он находился внутри скругленной границы?

4 голосов
/ 24 ноября 2010

Я пытаюсь создать рамку с закругленными углами и подсветкой на верхней половине.Я использую эллипс с радиальным градиентом, перекрывающим верхнюю половину границы, чтобы выделить его, но я не могу понять, как предотвратить эллипс, окрашивающий углы границы.Вот скриншот из Kaxaml:

ClipToBounds not working

А вот код 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, но должен признаться, я не совсем понимаю, как его использовать, особенно с преобразованием эллипса для рендеринга.Что бы я ни пытался, эллипс либо полностью исчезает, либо полностью не затрагивается.

Любая помощь будет принята с благодарностью.

Заранее спасибо.

Ответы [ 2 ]

2 голосов
/ 24 ноября 2010

Вместо использования ClipToBounds или OpacityMask я использовал радиальный градиент в качестве фона для дополнительного элемента Border. Спасибо альфа-мышке за подсказку. 

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

А вот и окончательный вид:

No more little grey ears on the border

Спасибо.

1 голос
/ 24 ноября 2010

Во-первых, все выглядит хорошо, когда я компилирую и запускаю ваш код в 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>
...