Можно ли закрасить область "снаружи" закругленного угла границы wpf - PullRequest
0 голосов
/ 07 ноября 2018

У меня есть следующий код xaml:

<UserControl.Resources>
    <Style TargetType="GroupBox">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="GroupBox">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>

                        <Border Grid.Row="0" BorderThickness="1 1 0 0" BorderBrush="#25A0DA" CornerRadius="2 0 0 0" Background="Gray">
                            <Label Foreground="White">
                                <ContentPresenter Margin="0" ContentSource="Header" RecognizesAccessKey="True" />
                            </Label>
                        </Border>
                        <Rectangle Grid.Row="0" Grid.Column="1" Fill="Gray" IsHitTestVisible="False"/>

                        <Border Grid.Row="0" Grid.Column="1" BorderThickness="1 0 0 1" BorderBrush="#25A0DA" CornerRadius="0 0 0 70" Background="Green"/>

                        <Border Grid.Row="1" Grid.ColumnSpan="2" BorderThickness="1 0 0 0" BorderBrush="#25A0DA">
                            <ContentPresenter Margin="4" />
                        </Border>

                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

<GroupBox Grid.Row="0" Foreground="White" Header="This is some header" Content="This is some content"/>

Как видите, мой заголовок состоит из двух границ и прямоугольника.

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

Пространство, которое в настоящее время зеленое, должно быть полностью прозрачным, однако, если я установлю цвет фона второй границы на прозрачный, остальная часть прямоугольника, который я использую для заполнения другого пространства, станет видимой, конечно.

Как сделать зеленую часть полностью прозрачной (например, область содержимого)

Ответы [ 2 ]

0 голосов
/ 07 ноября 2018
<Path Fill="Red" Data="M10 10 C15 20 30 20 30 20 H10"/>

Это то, что вы хотите?

0 голосов
/ 07 ноября 2018

Есть забавная вещь, которая называется Геометрия пути . Таким образом, вместо создания собственного заголовка с использованием комбинации Retangles и Borders с закругленными углами, вы можете легко рисовать более сложные фигуры с некоторыми базовыми знаниями по геометрии.

Поэтому замените их следующим кодом

Редактировать : Некоторые пояснения к коду, рисунок состоит из четырех сегментов, три из которых являются отрезками линии, которые вы просто определяете в конечной точке линии. И интересным и более сложным является ArcSegment, который также необходим для определения размера и направления дуги, помимо конечной точки сегмента дуги. Поиграйте со значением ArcSegment's Size и посмотрите, как оно меняет вашу форму.

<Path Stroke="Black" StrokeThickness="1" Fill="Gray">
    <Path.Data>
        <PathGeometry>
            <PathGeometry.Figures>
                <PathFigure StartPoint="0, 0">
                    <PathFigure.Segments>
                        <LineSegment Point="100, 0" />
                        <ArcSegment
                            Size="50,50"                                                                  
                            SweepDirection="Counterclockwise"
                            Point="150,50" />   
                        <LineSegment Point="0, 50" />
                        <LineSegment Point="0, 0" />
                    </PathFigure.Segments>
                </PathFigure>
            </PathGeometry.Figures>
        </PathGeometry>
    </Path.Data>
</Path>

И у вас есть такой результат

enter image description here

...