Как обрезать линию к эллипсу в XAML

Question

Я определил два концентрических c круга и две диагональные линии, которые я хочу закрепить за одним из кругов.

Я написал следующий XAML, и моя проблема в том, что я не понимаю его поведение.

    <Canvas>

      <Ellipse x:Name="OuterCircle" Width="200" Height="200" StrokeThickness="2" Stroke="Black">

        <Ellipse.Fill>
          <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFCBCFD5" Offset="1"/>
            <GradientStop Color="#FFF5F6F7" Offset="0"/>
          </LinearGradientBrush>
        </Ellipse.Fill>

      </Ellipse>

      <Ellipse x:Name="InnerCircle" Width="184" Height="184" Margin="8" >

        <Ellipse.Fill>
          <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFCBCFD5" Offset="0"/>
            <GradientStop Color="#FFF5F6F7" Offset="1"/>
          </LinearGradientBrush>
        </Ellipse.Fill>

      </Ellipse>

      <!-- In my opinion the lines are clipped to the wrong circle -->
      <Line X1="0" X2="200" Y1="0" Y2="200" Stroke="Black" StrokeThickness="2">
        <Line.OpacityMask>
          <VisualBrush Visual="{Binding ElementName=InnerCircle}" />
        </Line.OpacityMask>
      </Line>
      <Line X1="0" X2="200" Y1="200" Y2="2" Stroke="Black" StrokeThickness="2">
        <Line.OpacityMask>
          <VisualBrush Visual="{Binding ElementName=InnerCircle}" />
        </Line.OpacityMask>
      </Line>

    </Canvas>

  </Grid>
</Window>

Это выглядит следующим образом:

Диагональные линии четко обрезаны до внешний круг.

В XAML они специально обрезаются до внутреннего круга, используя ElementName = InnerCircle.

Почему это так?

UPDATE

Использование Stretch = "None" в соответствии с предложением Clemens

<Line X1="0" X2="200" Y1="0" Y2="200" Stroke="Black" StrokeThickness="2">
  <Line.OpacityMask>
    <VisualBrush Visual="{Binding ElementName=InnerCircle}" Stretch="None"/>
  </Line.OpacityMask>
</Line>
<Line X1="0" X2="200" Y1="200" Y2="2" Stroke="Black" StrokeThickness="2">
  <Line.OpacityMask>
    <VisualBrush Visual="{Binding ElementName=InnerCircle}" Stretch="None"/>
  </Line.OpacityMask>
</Line>

дает именно тот результат, который я ожидал.

Использование Клип не сработало, как я ожидал

<Line X1="0" X2="200" Y1="0" Y2="200" Stroke="Black" StrokeThickness="2" Clip="{Binding ElementName=InnerCircle, Path=RenderedGeometry}"/>
<Line X1="0" X2="200" Y1="200" Y2="2" Stroke="Black" StrokeThickness="2" Clip="{Binding ElementName=InnerCircle, Path=RenderedGeometry}"/>

В конструкторе это выглядело так

Очевидно, что запас по внутреннему кругу не был учтен. (Если я установлю поле на 0, круги не будут концентрированными c, но отсечение будет правильным.)

Странно, когда я запускаю приложение, диагональные линии вообще не появляются.

Answer 1

Кисти растягиваются по умолчанию. Установите для параметра Растянуть значение Нет:

<VisualBrush Visual="{Binding ElementName=InnerCircle}" Stretch="None"/>

Кроме того, вы также можете обрезать линии по геометрии эллипса:

<Line ... Clip="{Binding ElementName=InnerCircle, Path=RenderedGeometry}"/>