WPF中的進度條樣式是老式的。 酒吧的增量。 如何使用vista或windows-7陰影發光效果實現進度條？

Question

WPF中的進度條樣式是老式的。 酒吧的增量。 如何使用vista或windows-7陰影發光效果實現進度條？

圖片http://quickshare.my3gb.com/download/2.JPG

甚至檢查了Progressbar的屬性。 但是，沒有與發光效果相關的屬性。

此外，是否有任何動畫或與正常進度條不同的東西/

謝謝Adv。

編輯代碼

<ProgressBar Height="41" HorizontalAlignment="Left"    Margin="372,215,0,0" Name="progressBar1" VerticalAlignment="Top" Width="150">

</ProgressBar>

Answer 1

滾你自己不應該太難。

創建一個具有標准進度條屬性的usercontrol

Value
Maximum
Minimum

您可以使用以下公式創建派生屬性，以計算條的大小：

ProgressBarWidth = (Value / (Maximum + Minimum) * ControlWidth) - Padding

更新值，最大值或最小值時會發生更改

將其綁定到進度條控件模板中“條形圖”的寬度 - 這樣，當Value屬性更新時，進度條將調整大小。

你的酒吧看起來如何取決於你，但我猜你只想要一些花哨的填充/漸變/發光效果 - 你可以在Blend中添加它們

免責聲明：公式可能不正確！

如果你想嘗試自己滾動，這里有一個我剛剛敲了一下似乎工作正常

public partial class MyProgressBar : UserControl
    {
        public MyProgressBar()
        {
            InitializeComponent();

            Loaded += new RoutedEventHandler(MyProgressBar_Loaded);
        }

        void MyProgressBar_Loaded(object sender, RoutedEventArgs e)
        {
            Update();
        }

        private static readonly DependencyProperty MaximumProperty = DependencyProperty.Register("Maximum", typeof(double), typeof(MyProgressBar), new PropertyMetadata(100d, OnMaximumChanged));
        public double Maximum
        {
            get { return (double)GetValue(MaximumProperty); }
            set { SetValue(MaximumProperty, value); }
        }


        private static readonly DependencyProperty MinimumProperty = DependencyProperty.Register("Minimum", typeof(double), typeof(MyProgressBar), new PropertyMetadata(0d, OnMinimumChanged));
        public double Minimum
        {
            get { return (double)GetValue(MinimumProperty); }
            set { SetValue(MinimumProperty, value); }
        }

        private static readonly DependencyProperty ValueProperty = DependencyProperty.Register("Value", typeof(double), typeof(MyProgressBar), new PropertyMetadata(50d, OnValueChanged));
        public double Value
        {
            get { return (double)GetValue(ValueProperty); }
            set { SetValue(ValueProperty, value); }
        }



        private static readonly DependencyProperty ProgressBarWidthProperty = DependencyProperty.Register("ProgressBarWidth", typeof(double), typeof(MyProgressBar), null);
        private double ProgressBarWidth
        {
            get { return (double)GetValue(ProgressBarWidthProperty); }
            set { SetValue(ProgressBarWidthProperty, value); }
        }

        static void OnValueChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
        {
            (o as MyProgressBar).Update();
        }

        static void OnMinimumChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
        {
            (o as MyProgressBar).Update();
        }

        static void OnMaximumChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
        {
            (o as MyProgressBar).Update();
        }


        void Update()
        {
            // The -2 is for the borders - there are probably better ways of doing this since you
            // may want your template to have variable bits like border width etc which you'd use
            // TemplateBinding for
            ProgressBarWidth = Math.Min((Value / (Maximum + Minimum) * this.ActualWidth) - 2, this.ActualWidth - 2);


        }          
    }

XAML

<UserControl x:Class="WpfApplication1.MyProgressBar"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300" x:Name="uc">
    <Grid>
        <Border Background="White">
            <Border BorderBrush="Gray" BorderThickness="1">
                <Grid>
                    <Grid.Background>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FFE5E5E5" Offset="0" />
                            <GradientStop Color="White" Offset="1" />
                        </LinearGradientBrush>
                    </Grid.Background>
                    <Grid Width="{Binding ProgressBarWidth, ElementName=uc}" HorizontalAlignment="Left">
                        <Grid.Background>
                            <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                                <GradientStop Color="#FFCBFFD0" Offset="0" />
                                <GradientStop Color="#FF62EF73" Offset="1" />
                                <GradientStop Color="#FFAEE56D" Offset="0.39" />
                            </LinearGradientBrush>
                        </Grid.Background>
                    </Grid>
                </Grid>
            </Border>
        </Border>
    </Grid>
</UserControl>

結果：

就像我說的，這樣的事情很簡單，但仍然考慮重新定義模板或使用原始模板，因為它確實支持正確的操作系統上的閃亮

這是在我添加'Percent'依賴項屬性並綁定到控件模板中的屬性之后：

更新Percent代碼是

   Percentage = Math.Min((int)(Value / (Maximum + Minimum) * 100), 100);

編輯2：

我弄亂了填充物並添加了一個白色的內邊框，因此看起來更有光澤。 唯一缺少的是閃亮的動畫

頂部的是我的控件，底部的是默認的WPF

請記住，只需編輯進度條控件模板即可實現所有這些功能

這是更新的XAML：

<UserControl x:Class="WpfApplication1.MyProgressBar"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300" x:Name="uc">
    <Grid>
        <Border Background="White" BorderBrush="Gray" BorderThickness="1">
            <Border BorderBrush="White" BorderThickness="1">
                <Grid>
                    <Grid.Background>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FFE5E5E5" Offset="0" />
                            <GradientStop Color="White" Offset="1" />
                        </LinearGradientBrush>
                    </Grid.Background>
                    <Grid Width="{Binding ProgressBarWidth, ElementName=uc, FallbackValue=200}" HorizontalAlignment="Left">
                        <Grid.Background>
                            <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                                <GradientStop Color="#FF8BBA91" Offset="0" />
                                <GradientStop Color="#FF8BBA91" Offset="1" />
                                <GradientStop Color="#FF9ED76A" Offset="0.8" />
                                <GradientStop Color="#FF9ED76A" Offset="0.2" />
                            </LinearGradientBrush>
                        </Grid.Background>
                    </Grid>
                    <Border>
                        <Border.Background>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="#89E2E2E2" Offset="0" />
                                <GradientStop Color="#C1FFFFFF" Offset="0.5" />
                                <GradientStop Color="Transparent" Offset="0.52" />
                            </LinearGradientBrush>
                        </Border.Background>
                    </Border>
                    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Percentage, ElementName=uc}"></TextBlock>
                </Grid>
            </Border>
        </Border>
    </Grid>
</UserControl>

Answer 2

您需要在Windows的個性化設置中使用Aero主題（即Windows 7 Basic或Windows 7）才能獲得平滑的進度條和動畫效果。

Vista和Windows 7具有Aero主題。 Windows XP發布時甚至不存在。 它也在Windows 8中被刪除，以獲得更全面的標准外觀。 如果您切換到Windows Classic，那么您將獲得舊的粗塊以查找進度條。

WPF為Luna，Aero，Royale，Classic定義了一組不同的模板.....它的功能是查看系統當前使用的主題，然后這將決定使用哪組WPF模板。

因此，當您使用XP時，它永遠不會有機會使用Aero模板集。

如果出於某種原因，即使Windows未使用Aero主題，您也希望以Aero外觀為主題，那么有兩個主要解決方案。

解決方案：

您可以強制WPF應用程序將Aero主題的WPF模板用於其所有控件：

• http://arbel.net/2006/11/03/forcing-wpf-to-use-a-specific-windows-theme/

• http://www.kennethham.com/wp/2010/11/force-wpf-to-use-windows-7aero-theming-in-classic-mode/

要么

如果您不希望所有應用程序控件都以Aero為主題，那么只需從Aero主題資源中獲取定義ProgressBar的Aero外觀的樣式/模板，然后將其應用於ProgressBar。

• 我在哪里可以下載Microsoft的標准WPF主題？

希望無論哪種方式都能讓你獲得發光的進度條....注意，我沒有XP來測試是否是這種情況。

Answer 3

如果要更改進度條的外觀，則必須重新定義其（控制）模板。
ms在此解釋：
http://msdn.microsoft.com/en-us/library/ms750638.aspx
在編寫模板時，為了獲得發光，您可以使用BitmapEffect，使用OuterGlowBitmapEffect（！軟件渲染），但Best是使用效果（更新）。

如果您使用進度條的效果並且它適合您，也許您不必重新定義模板。

請注意，您的網絡應用程序具有良好的免費主題。

Answer 4

您可以使用以下內容模仿動畫，這是對接受的答案的調整：

<Grid Background="LightGray">
    <Grid Width="{Binding ProgressBarWidth, ElementName=uc}" HorizontalAlignment="Left">
        <Grid.Triggers>
            <EventTrigger RoutedEvent="Rectangle.Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="Background.(GradientBrush.GradientStops)[1].(GradientStop.Offset)" From="-1" To="0" Duration="0:0:1.5" RepeatBehavior="Forever"/>
                        <DoubleAnimation Storyboard.TargetProperty="Background.(GradientBrush.GradientStops)[2].(GradientStop.Offset)" From="0" To="1" Duration="0:0:1.5" RepeatBehavior="Forever"/>
                        <DoubleAnimation Storyboard.TargetProperty="Background.(GradientBrush.GradientStops)[3].(GradientStop.Offset)" From="1" To="2" Duration="0:0:1.5" RepeatBehavior="Forever"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Grid.Triggers>
        <Grid.Background>
            <LinearGradientBrush>
                <GradientStop Color="#FF218ED6" Offset="0.0" />
                <GradientStop Color="#FF4BA5E0" Offset="0.4" />
                <GradientStop Color="#FF8ECCF5" Offset="0.5" />
                <GradientStop Color="#FF4BA5E0" Offset="0.6" />
                <GradientStop Color="#FF218ED6" Offset="1.0" />
            </LinearGradientBrush>
        </Grid.Background>
    </Grid>
</Grid>

預習：