wpf - 在 WPF 中裁剪边框

Question

我需要创建一个回合ProgressBar模板。

控制模板:

<ControlTemplate TargetType="{x:Type ProgressBar}">
   <Grid x:Name="TemplateRoot" SnapsToDevicePixels="true">                      
     <Rectangle x:Name="PART_Track" Margin="1" Fill="White" />

     <Border x:Name="PART_Indicator" HorizontalAlignment="Left" Margin="1"  >
        <Grid x:Name="Foreground" >
            <Rectangle x:Name="Indicator" Fill="{TemplateBinding Background}" />
            <Grid x:Name="Animation" ClipToBounds="true" >
               <Rectangle x:Name="PART_GlowRect" Fill="#FF86C7EB" 
                          HorizontalAlignment="Left" Margin="-100,0,0,0" Width="100"/>
            </Grid>                             
        </Grid>                                                             
     </Border>

     <Border x:Name="roundBorder" BorderBrush="{TemplateBinding BorderBrush}"
             BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="10" />
     <TextBlock />

  </Grid>
</ControlTemplate>

这导致:



在哪里 PART_Indicator是左侧的 LightBlue 矩形(其宽度在 ProgressBar 控件内部设置，如此处所示，值为 20)和 roundBorder .

我需要的是 PART_Indicator夹在 roundBorder上，结果如下:

Answer 1

有一个ClipToBounds Border 上的属性(property)应该在 Border 的边界处剪辑内容的类，但不幸的是，它并没有“按照锡上所说的那样做”:

<Border CornerRadius="25" BorderBrush="RoyalBlue" BorderThickness="3" Width="300" 
    Height="50" ClipToBounds="True"> <!-- This doesn't work as expected -->
    <Rectangle Fill="SkyBlue" />
</Border>

但是， Rectangle类还提供了一些可以提供帮助的属性。有什么东西阻止你只使用 Rectangle.RadiusX和 Rectangle.RadiusY属性四舍五入 Rectangle角落？:

<Border CornerRadius="25" BorderBrush="RoyalBlue" BorderThickness="3" Width="300" 
    Height="50">
    <Rectangle RadiusX="23" RadiusY="23" Fill="SkyBlue" />
</Border>

我知道您想要剪裁 Rectangle 的彩色填充。 ，但您可以使用 Rectangle.Clip属性:

<Border CornerRadius="25" BorderBrush="RoyalBlue" BorderThickness="3" Width="300" 
    Height="50">
    <Grid>
        <Rectangle Name="ClipRectangle" Fill="Green" Margin="50,0,0,0" 
            Visibility="Hidden" />
        <Rectangle RadiusX="23" RadiusY="23" Fill="SkyBlue" Clip="{Binding 
            RenderedGeometry, ElementName=ClipRectangle}" />
    </Grid>
</Border>

这会剪辑彩色 Rectangle与 RenderedGeometry其他 Rectangle命名为 ClipRectangle ...或者当我说这个剪辑时，也许我应该说这应该是剪辑，因为我刚刚发现这似乎只在 WPF 设计器中有效，而不是在应用程序运行时。



但是，我在这里没时间了，所以希望你能找到最后一 block 拼图并自己完成。您还可以通过数据绑定(bind)到 GradientStop.Offset 来完成此操作。 LinearGradientBrush 的属性(property)设置为 Background在 Border ，所以你甚至不需要 Rectangle对于这种方法。以后可以的话我再看看。

更新>>>

我又看了这个 Clip Rectangle并且无法弄清楚为什么它只适用于 Visual Studio 设计器。所以，放弃这个想法，你可以试试 LinearGradientBrush想法相反，这同样好。首先，定义您的 Brush :

<LinearGradientBrush x:Key="ValueBrush" StartPoint="0,0" EndPoint="1,0">
    <GradientStop Offset="0.0" Color="SkyBlue" />
    <GradientStop Offset="0.7" Color="SkyBlue" />
    <GradientStop Offset="0.7" Color="Transparent" />
    <GradientStop Offset="1.0" Color="Transparent" />
</LinearGradientBrush>

现在，我已经硬编码了这些值来产生这个:



仅从这段代码:

<Border CornerRadius="25" BorderBrush="RoyalBlue" Background="{StaticResource 
    ValueBrush}" BorderThickness="3" Width="300" Height="50" ClipToBounds="True" />

对于您的实际需求，您需要创建一个 double数据绑定(bind)到 GradientStop.Offset 的属性像这样的属性(property):

<LinearGradientBrush x:Key="ValueBrush" StartPoint="0,0" EndPoint="1,0">
    <GradientStop Offset="0.0" Color="SkyBlue" />
    <GradientStop Offset="{Binding MidPoint}" Color="SkyBlue" />
    <GradientStop Offset="{Binding MidPoint}" Color="Transparent" />
    <GradientStop Offset="1.0" Color="Transparent" />
</LinearGradientBrush>

现在，只要您提供介于 0.0 和 1.0 之间的值，这将创建您的电平表。