自定义进度栏模板剪切WPF

时间:2014-08-17 13:51:20

标签: wpf progress-bar custom-controls

我正在尝试为我的wpf项目创建自定义进度条控件。我无法以正确的方式剪辑动画和指示器部分。我尝试过使用Rectangle.Clip,但它没有用。

This is how the generated progress bar looks

我也想知道是否有办法将“CornerRadius”属性绑定到“height / 2”。

<Style x:Key="VProgressBar" TargetType="{x:Type ProgressBar}">
        <Setter Property="Foreground" Value="#01D328"/>
        <Setter Property="Background" Value="{StaticResource ProgressBarBackground}"/>
        <Setter Property="BorderBrush" Value="{StaticResource ProgressBarBorderBrush}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ProgressBar}">
                    <Grid x:Name="TemplateRoot" SnapsToDevicePixels="true">
                        <Rectangle RadiusY="20" RadiusX="20" Fill="{DynamicResource DisabledGrey}"/>
                        <Rectangle x:Name="PART_Track" Margin="1"/>
                        <Decorator x:Name="PART_Indicator" HorizontalAlignment="Left" Margin="1">
                            <Grid x:Name="Foreground">
                                <Rectangle x:Name="Indicator" Fill="{DynamicResource ValeoGreen}"/>
                                <Grid x:Name="Animation" ClipToBounds="true">
                                    <Rectangle x:Name="PART_GlowRect" HorizontalAlignment="Left" Margin="-100,0,0,0" Width="100" Opacity="0.5" Fill="#FF0CFF00"/>
                                </Grid>
                                <Grid x:Name="Overlay">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition MaxWidth="15"/>
                                        <ColumnDefinition Width="0.1*"/>
                                        <ColumnDefinition MaxWidth="15"/>
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition/>
                                        <RowDefinition/>
                                    </Grid.RowDefinitions>
                                    <Rectangle x:Name="LeftDark" Margin="1,1,0,1" RadiusY="1" RadiusX="1" Grid.RowSpan="2"/>
                                    <Rectangle x:Name="RightDark" Grid.Column="2" Margin="0,1,1,1" RadiusY="1" RadiusX="1" Grid.RowSpan="2"/>
                                    <Rectangle x:Name="LeftLight" Grid.Column="0" Grid.Row="2"/>
                                    <Rectangle x:Name="CenterLight" Grid.Column="1" Grid.Row="2"/>
                                    <Rectangle x:Name="RightLight" Grid.Column="2" Grid.Row="2"/>
                                    <Border x:Name="Highlight1" Grid.ColumnSpan="3" Grid.RowSpan="2"/>
                                    <Border x:Name="Highlight2" Grid.ColumnSpan="3" Grid.RowSpan="2"/>
                                </Grid>
                            </Grid>
                        </Decorator>
                        <Border BorderBrush="{DynamicResource ValeoBlue}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="20"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="Orientation" Value="Vertical">
                            <Setter Property="LayoutTransform" TargetName="TemplateRoot">
                                <Setter.Value>
                                    <RotateTransform Angle="-90"/>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="IsIndeterminate" Value="true">
                            <Setter Property="Visibility" TargetName="LeftDark" Value="Collapsed"/>
                            <Setter Property="Visibility" TargetName="RightDark" Value="Collapsed"/>
                            <Setter Property="Visibility" TargetName="LeftLight" Value="Collapsed"/>
                            <Setter Property="Visibility" TargetName="CenterLight" Value="Collapsed"/>
                            <Setter Property="Visibility" TargetName="RightLight" Value="Collapsed"/>
                            <Setter Property="Visibility" TargetName="Indicator" Value="Collapsed"/>
                        </Trigger>
                        <Trigger Property="IsIndeterminate" Value="false">
                            <Setter Property="Background" TargetName="Animation" Value="#80B5FFA9"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

0 个答案:

没有答案