UWP 径向进度条图像填充 [英] UWP Radial Progress Bar Image Fill

问题描述

我正在使用 UWP 工具包中的径向进度条.我想在我创建的游戏中使用这个进度.我有一个图像，我想用它填充进度条的前景.无论我尝试什么，我都无法让图像以进度条填充的方式填充进度条.

I am using the Radial Progress Bar from the UWP ToolKit. I want to use this progress in a game that I creating. I have an image that I want to fill the foreground of the progress bar with. No matter what I try I cannot get the image to fill in the progress bar, in the manner a progress bar fills in.

我目前正在尝试在前景中缩放图像，但这并不是我想要的效果.

I am currently trying to scale the image in the foreground but that isn't quite the effect I am going for.

XAML:

<toolKit:RadialProgressBar Width="316" Height="316" Minimum="0" Maximum="100" Value="{Binding Value}" Thickness="36"

                                   BorderBrush="Transparent" >
            <toolKit:RadialProgressBar.Foreground>
                <ImageBrush ImageSource="ms-appx:///Assets/progress2.png" >
                    <ImageBrush.Transform>
                        <ScaleTransform CenterX="0" CenterY="0" ScaleX="{Binding Scale}" ScaleY="{Binding Scale}" />
                    </ImageBrush.Transform>
                </ImageBrush>
            </toolKit:RadialProgressBar.Foreground>
        </toolKit:RadialProgressBar>

C#:

private int _value;
        public int Value
        {
            get => _value;
            set
            {
                if (_value != value)
                {
                    _value = value;
                    RaisePropertyChanged(nameof(Value));
                    Scale = 1.0-(100.0 - (316.0 * (Convert.ToDouble(value) / 100.0) / 316.0 * 100.0))/100.0;

                }
            }
        }

        private double _scale;
        public double Scale
        {
            get => _scale;
            set
            {
                if (_scale != value)
                {
                    _scale = value;
                    RaisePropertyChanged(nameof(Scale));
                }
            }
        }

下面是上面代码创建的效果:

Below is the effect that the above code creates:

有没有办法用图像填充进度条?

Is there a way to fill a progress bar with an image?

推荐答案

我决定不再使用径向进度条.我已经了解了图像剪辑.我正在使用图像剪辑和旋转变换来获得所需的效果.

I have decided to go away from using a radial progress bar. I have learned about Image cliping. I am using the image clip along with a Rotation transformation to get the desired effect.

XAML:

 <Image Source="ms-appx:///Assets/Progress.png" Width="{Binding ImageWidth}" Height="{Binding ImageHeight}" >
                <Image.Clip>
                    <RectangleGeometry Rect="{Binding Rect}" >
                        <RectangleGeometry.Transform>
                            <RotateTransform CenterX="{Binding CenterXY}" CenterY="{Binding CenterXY}" Angle="{Binding Angle}" />
                        </RectangleGeometry.Transform>
                    </RectangleGeometry>
                </Image.Clip>
            </Image>

C#:

private int _value;
        public int Value
        {
            get => _value;
            set
            {
                if (_value != value)
                {
                    _value = value;
                    RaisePropertyChanged(nameof(Value));
                    Angle = 144 - 1.44 * value;
                }
            }
        }

这篇关于UWP 径向进度条图像填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！