如何在自定义 Windows Phone 控件上添加进度条效果？

Question

这是我的问题：我创建了一个自定义控件，它封装了一个“经典按钮”。出于“业务”原因，我在控件中添加了一些自定义依赖项属性。这些属性之一是“进度”指标值。

当这个值变为X时，我想改变控件背景颜色的百分之X来做进度条的效果。

以下是我拥有和想要拥有的照片：

这是我的实际代码：

<UserControl x:Name="userControl" x:Class="MyCustomControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"   
Background="White"
         Padding="0"
         Margin="0"
         Width="82"
         Height="87"
     d:designWidth="82"
     d:designHeight="87" SizeChanged="userControl_SizeChanged"    
         >


<UserControl.Resources>
    <Style x:Key="ButtonStyle1" TargetType="Button">
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid x:Name="grid" Background="Transparent">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Thickness>0,0,0,1</Thickness>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="grid">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Thickness>0,5,0,0</Thickness>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid>

                            <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,0,0,5" CornerRadius="6" Background="{TemplateBinding Background}" >
                                <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Border>                                
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

<Grid x:Name="LayoutRoot">

    <Button x:Name="aButton"
                Style="{StaticResource ButtonStyle1}" 
                Background="{Binding Background, ElementName=userControl}" 
                Foreground="{Binding Foreground, ElementName=userControl}" 
                BorderBrush="{Binding Foreground, ElementName=userControl}"                
                VerticalContentAlignment="Center"
                HorizontalContentAlignment="Center"
                Content="1"
                >

    </Button>

</Grid>

如果需要，我可以在后面添加代码，但这只是一个依赖属性。

如何在 XAML/C# 中做到这一点？什么是最好的解决方案？我尝试在名为“ButtonBackground”的“边框”内添加一个矩形，但我找不到如何让它工作......

感谢您的帮助！

Answer 1

<Grid>
    <Rectangle HorizontalAlignment="Left" Height="159" Margin="174.5,17.5,0,0" Stroke="Black" VerticalAlignment="Top" Width="152" RenderTransformOrigin="0.5,0.5" RadiusY="18.5" RadiusX="18.5">
        <Rectangle.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform Angle="-90"/>
                <TranslateTransform/>
            </TransformGroup>
        </Rectangle.RenderTransform>
        <Rectangle.Fill>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="Black" Offset="{Binding Value, ElementName=slider}"/>
                <GradientStop Color="White" Offset="{Binding Value, ElementName=slider}"/>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Slider x:Name="slider" HorizontalAlignment="Left" Margin="172,207,0,0" VerticalAlignment="Top" Width="165" LargeChange="0.1" Maximum="1" TickFrequency="0.1"/>

</Grid>

这是可以帮助您的代码。在我的情况下，我采用了一个矩形，将其背景设置为渐变。作为两个停止的渐变，我将它们设置为看起来都是一个填充。我将两个渐变停止与滑块绑定并自定义滑块，它的大变化，步频等。现在，当我移动滑块时，填充颜色也会根据需要更改。将渐变颜色的两个停靠点绑定到您的依赖属性，您将完成它。希望此解决方案对您有用。

这是我所做的一些结果。

编码愉快！

如果您有任何问题，请告诉我。