WPF の進行状況バーのスタイルは時代遅れです。バーの増分。vista または windows-7 の影付きグロー効果を使用してプログレス バーを実装するにはどうすればよいですか?
画像 http://quickshare.my3gb.com/download/2.JPG
プログレスバーのプロパティもチェックアウトしました。ただし、グロー効果に関連するプロパティはありません。
また、通常のプログレスバーとは異なるアニメーションや何かがありますか/
編集
コード：
<ProgressBar Height="41" HorizontalAlignment="Left" Margin="372,215,0,0" Name="progressBar1" VerticalAlignment="Top" Width="150">
</ProgressBar>
自分自身を転がすのは難しくありません。
標準の進行状況バーのプロパティを持つユーザー コントロールを作成します。
Value
Maximum
Minimum
次の数式を使用して、バーのサイズを計算する派生プロパティを作成できます。
ProgressBarWidth = (Value / (Maximum + Minimum) * ControlWidth) - Padding
値、最大値、または最小値が更新されたときに変更されるもの
これをプログレス バー コントロール テンプレートの「バー」の幅にバインドします。このようにして、Value プロパティが更新されると、プログレス バーのサイズが変更されます。
バーがどのように見えるかはあなた次第ですが、派手な塗りつぶし/グラデーション/グロー効果がたくさん必要だと思います-これらをブレンドに追加できます
免責事項: 数式が間違っている可能性があります!
自分で試してみたい場合のために、これは私がちょうどノックアップしたもので、うまくいくようです
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>
結果：
私が言ったように、このようなことは非常に簡単ですが、適切な OS でグローイネスをサポートしているため、テンプレートを再定義するか、元のテンプレートを使用することを検討してください。
これは、「パーセント」依存関係プロパティを追加し、コントロール テンプレートでそれにバインドした後です。
更新用のコード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>
スムーズなプログレス バーとアニメーション化されたグローの外観を得るには、Windows の個人設定で Aero テーマ (つまり、Windows 7 Basic または Windows 7) を使用する必要があります。
Vista と Windows 7 には Aero テーマがあります。Windows XP がリリースされたときには存在すらしていませんでした。また、Windows 8 では削除され、全体的により標準的な外観になりました。Windows クラシックに切り替えると、古い分厚いバーが進行状況バーを探します。
WPF には、Luna、Aero、Royale、Classic 用に定義された別のテンプレート セットがあります。システムが現在使用しているテーマを調べて、使用する WPF テンプレートのセットを決定します。
したがって、XP を使用している場合、Aero のテンプレート セットを使用する機会はありません。
なんらかの理由で、Windows が Aero テーマを使用していない場合でも、プログレス バーを Aero の外観でテーマにしたい場合は、主な解決策が 2 つあります。
解決策:
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 としてテーマにしたくない場合は、ProgressBar の Aero の外観を定義するスタイル/テンプレートを Aero テーマ リソースから取得し、ProgressBar に適用します。
どちらの方法でも、輝くプログレスバーが表示されることを願っています....注意してください。これが当てはまるかどうかをテストするXPはありません。
以下を使用してアニメーションを模倣できます。これは、受け入れられた回答の微調整です。
<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>
プレビュー:
プログレス バーの外観を変更する場合は、(Control)Template を再定義する必要があります。
ms はここでこれを説明します:
http://msdn.microsoft.com/en-us/library/ms750638.aspx
テンプレートを書くとき, グローを得るために, OuterGlowBitmapEffect で BitmapEffect を使用できます (!Software レンダリング), しかし効果を使用するのが最善です（最新のもの）。
プログレスバーの効果を使用し、それがあなたに合っていれば、テンプレートを再定義する必要はないかもしれません。
ネット上には、アプリケーション用の優れた無料のテーマがあることに注意してください。