WPF-在 ItemsControl 中添加 Item 不会改变 Border Cornerradius

Question

我有一个边框，我将它的角半径更改为 19。

同时，我有一个 ScrollViewer，它包含一个 ItemsControl，包括一个标签、一个文本框和一个边框。

我发现 ItemsControl 中的内容会覆盖原来的边框。所以Border的Cornerradius不是19.

下图为：

这是我的 xaml:

    <Border Grid.Row="3" Background="#d8d8d8" CornerRadius="19" Margin="24,0">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="46"/>
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Label Grid.Row="0" Grid.Column="0" Foreground="#011627" FontFamily="Arial" FontSize="18" Content="Feedback" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            <Label Grid.Row="0" Grid.Column="1" Foreground="#011627" FontFamily="Arial" FontSize="18" Content="Feedback codes" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            <ScrollViewer Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Auto">
                <ItemsControl ItemsSource="{Binding SystemStatusList}" AlternationCount="2">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Vertical"/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Grid Background="Transparent" x:Name="grid">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition/>
                                    <ColumnDefinition/>
                                </Grid.ColumnDefinitions>
                                <Label Grid.Column="0" BorderThickness="0" Foreground="#d8d8d8" Height="42" FontFamily="Arial" FontSize="18" Content="{Binding SystemStatus}"
                                                               HorizontalAlignment="Center" HorizontalContentAlignment="Center" VerticalAlignment="Center" VerticalContentAlignment="Center" Margin="1,0"/>
                                <TextBox Grid.Column="1" BorderThickness="0" Foreground="White" Height="42" Background="{x:Null}" FontFamily="Arial" FontSize="18" Text="{Binding CustomName}" CaretBrush="White"
                                                                 HorizontalAlignment="Center" HorizontalContentAlignment="Center" VerticalAlignment="Center" VerticalContentAlignment="Center" Margin="0,0,1,0"/>
                                <Border Grid.Column="1" Width="165" Height="1" BorderThickness="1" BorderBrush="#979797" Opacity="0.24" Margin="0,24,0,0"/>
                            </Grid>
                            <DataTemplate.Triggers>
                                <Trigger Property="ItemsControl.AlternationIndex" Value="0">
                                    <Setter TargetName="grid" Property="Background" Value="#384451"/>
                                </Trigger>
                                <Trigger Property="ItemsControl.AlternationIndex" Value="1">
                                    <Setter TargetName="grid" Property="Background" Value="#2c3845"/>
                                </Trigger>
                            </DataTemplate.Triggers>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </ScrollViewer>

            <Border Grid.Row="0" Grid.Column="0" Width="2" Height="46" Opacity="0.24" BorderThickness="2" BorderBrush="#979797" HorizontalAlignment="Right"/>
            <Border Grid.Row="1" Grid.Column="0" Width="2" Height="763" Opacity="0.24" BorderThickness="2" BorderBrush="#979797" HorizontalAlignment="Right"/>
        </Grid>
    </Border>

我能做什么？谢谢！

编辑：

Answer 1

使用支持裁剪的 custom Border 实现或为 ScrollViewer 指定下边距：

<ScrollViewer Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" HorizontalScrollBarVisibility="Hidden"
              VerticalScrollBarVisibility="Auto"
              Margin="0 0 0 20">
    <ItemsControl ItemsSource="{Binding SystemStatusList}" AlternationCount="2">

Answer 2

我找到了如下答案。

我添加边框 OpacityMask:

  <Border.OpacityMask>
            <DrawingBrush Stretch="Uniform">
                <DrawingBrush.Drawing>
                    <DrawingGroup>
                        <DrawingGroup.Children>
                            <GeometryDrawing Brush="#d8d8d8">
                                <GeometryDrawing.Geometry>
                                    <RectangleGeometry RadiusX="19" RadiusY="19" Rect="0,0,593,741"/>
                                </GeometryDrawing.Geometry>
                            </GeometryDrawing>
                        </DrawingGroup.Children>
                    </DrawingGroup>
                </DrawingBrush.Drawing>
            </DrawingBrush>
        </Border.OpacityMask>

并用第二个边框覆盖第一个边框：

 <Border Grid.Row="3" BorderThickness="1" BorderBrush="#d8d8d8" CornerRadius="19" Margin="24,0"/>

最终显示为：

WPF-在 ItemsControl 中添加 Item 不会改变 Border Cornerradius

WPF- Add Item in ItemsControl Will Not Change Border Cornerradius

wpf

border

itemscontrol

scrollview

cornerradius