Question

晚上好伙计们，我是WPF应用程序的新手。我在使用Indeterminate进度条设计时遇到了麻烦。我通过在线研究了很多进度条相关主题，但我仍然不清楚进度条样式概念。

我曾尝试更改角半径的值，并在影响角半径的每个可能元素（PART_Indicator，PART_Track，Indicator，Animation）上将剪辑设置为true，但仍然没有运气。

儿童边框总是与其父母重叠。如下所示

我想在进度条上实现的目标如下所示。

以下是我的代码：

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="150">
    <Grid>
        <StackPanel Orientation="Vertical">
            <ProgressBar Height="36"  Name="progBar" VerticalAlignment="Top" IsIndeterminate="True" Foreground="Orange" BorderBrush="Gray" BorderThickness="1" >
                <ProgressBar.Style>
                    <Style TargetType="{x:Type ProgressBar}">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="ProgressBar" >
                                    <Grid Name="TemplateRoot" SnapsToDevicePixels="True">
                                        <Rectangle RadiusX="2" RadiusY="2" Fill="Transparent" />
                                        <Border CornerRadius="10" Margin="1,1,1,1">
                                            <Border.Background>
                                                <SolidColorBrush Color="Transparent"/>
                                            </Border.Background>
                                        </Border>
                                        <Border BorderThickness="1" BorderBrush="gray"  Margin="1,1,1,1" CornerRadius="10">
                                            <Border.Background>
                                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                                    <GradientStop Color="White" Offset="0.0" />
                                                    <GradientStop Color="WhiteSmoke" Offset="1" />
                                                </LinearGradientBrush>
                                            </Border.Background>
                                        </Border>
                                        <Rectangle Name="PART_Track" Margin="1,1,1,1"  ClipToBounds="True"/>
                                        <Decorator  Name="PART_Indicator" Margin="3,2,3,2" HorizontalAlignment="Left" ClipToBounds="True">
                                            <Grid Name="Foreground"  ClipToBounds="True">
                                                <Rectangle RadiusX="10" RadiusY="10" Name="Indicator"  ClipToBounds="True"/>
                                                <Grid Name="Animation" ClipToBounds="True">
                                                    <Border Name="PART_GlowRect" Width="50" Margin="1" HorizontalAlignment="Left" Background="Orange" CornerRadius="10" />
                                                </Grid>
                                                <Grid Name="Overlay">
                                                </Grid>
                                            </Grid>
                                        </Decorator>
                                        <Border BorderThickness="0" CornerRadius="0" BorderBrush="Transparent" />
                                    </Grid>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </ProgressBar.Style>
            </ProgressBar>
        </StackPanel>

    </Grid>
</Window>

我在代码上做错了什么？关于这个问题，请指导我。

谢谢。

Answer 1

签出Clip属性：

<Image 
  Source="sampleImages\Waterlilies.jpg" 
  Width="200" Height="150" HorizontalAlignment="Left">
  <Image.Clip>
    <EllipseGeometry
      RadiusX="100"
      RadiusY="75"
      Center="100,75"/>
  </Image.Clip>
</Image>

您可以将任何几何体放在Clip属性中。在您的情况下，RectangleGeometry可以设置RadiusX和RadiusY属性。

更多信息：https://msdn.microsoft.com/ru-ru/library/system.windows.uielement.clip(v=vs.110).aspx

Answer 2

感谢Mikolaytis的回答，我目前正在使用RectangleGeometry。

我相信Rectangle在RectangleGeometry中它不会从父宽度继承宽度，我想我需要使用后面的代码来重新计算不同分辨率的矩形。

我正在分享下面的代码，以防我遇到与我相同的问题。

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="400">
    <ProgressBar Height="36" Width="358" Name="progBar" VerticalAlignment="Top" IsIndeterminate="True" Foreground="Orange" BorderBrush="Gray" BorderThickness="1" >
        <ProgressBar.Style>
            <Style TargetType="{x:Type ProgressBar}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ProgressBar" >
                            <Grid Name="TemplateRoot" SnapsToDevicePixels="True">
                                <Rectangle RadiusX="2" RadiusY="2" Fill="Transparent" />
                                <Border CornerRadius="10" Margin="1,1,1,1">
                                    <Border.Background>
                                        <SolidColorBrush Color="Transparent"/>
                                    </Border.Background>
                                </Border>
                                <Border BorderThickness="1" BorderBrush="Blue"  Margin="1,1,1,1" CornerRadius="10">
                                    <Border.Background>
                                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                            <GradientStop Color="Red" Offset="0.0" />
                                            <GradientStop Color="Red" Offset="1" />
                                        </LinearGradientBrush>
                                    </Border.Background>
                                </Border>
                                <Rectangle Name="PART_Track" Margin="0"  ClipToBounds="True" />
                                <Border Background="black"  Name="PART_Indicator" Margin="0" HorizontalAlignment="Left" ClipToBounds="True">
                                    <Border.Clip>
                                        <RectangleGeometry Rect="2,2,354,32" RadiusX="9" RadiusY="9.5" />
                                    </Border.Clip>
                                    <Grid Name="Foreground">
                                        <Rectangle RadiusX="10" RadiusY="10" Name="Indicator"  ClipToBounds="True"/>
                                        <Grid Name="Animation" ClipToBounds="True">
                                            <Border Name="PART_GlowRect" Width="50" Margin="1" HorizontalAlignment="Left" Background="Orange" CornerRadius="10" />
                                        </Grid>
                                        <Grid Name="Overlay">
                                        </Grid>
                                    </Grid>
                                </Border>
                                <Border BorderThickness="0" CornerRadius="0" BorderBrush="Transparent" />
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ProgressBar.Style>
    </ProgressBar>
</Window>

WPF不确定圆形边，指标重叠父级

2 个答案: