我有一個進度條，其 ControlTemplate 如下，我想將進度條的值設定為一個數字，以便進度更新為該值。我參考了這篇
<Window.Resources>
<ControlTemplate x:Key="ProgressBarPath" TargetType="ProgressBar">
<Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Stretch="Uniform">
<Canvas Name="Test" Width="100" Height="100" Canvas.Left="0" Canvas.Top="0">
<Canvas.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Canvas.RenderTransform>
<Canvas.Resources/>
<Canvas Name="g40">
<!--<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path28"
Fill="Red">
<Path.Data>
<PathGeometry Figures="M35.1 57h-.2l-2.1 2.6-10 12.5c-2.1 2.7-5.2 6.2-4.3 9.5 1.7 6.1 7.6 6.1 11.8 6.1H50V57H35.7z" FillRule="NonZero"/>
</Path.Data>
</Path>-->
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path30" Fill="#FF333333">
<Path.Data>
<PathGeometry Figures="M30.8 87.7c-4.2 0-10.1 0-11.8-6.1-.9-3.3 2.2-6.8 4.3-9.5l10-12.5 2.1-2.6 5-6.3 1.6-2.1 1-1.3V17.5l-2.2-.2c-1.2-.1-2.1-1.1-2.1-2.4 0-1.3 1.1-2.4 2.4-2.4H50v-5h-9.2c-.9 0-1.7.3-2.2.4-2.8 1-4.9 3.8-4.9 7 0 3 1.8 5.6 4.4 6.7v24.2L29.3 57 16.7 72.8c-2.9 3.7-3.5 8.6-1.4 12.8 2 4.2 6.2 6.9 10.9 6.9H50v-4.8H30.8z" FillRule="NonZero"/>
</Path.Data>
</Path>
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path32" Fill="#FF333333">
<Path.Data>
<PathGeometry Figures="M35.4 57l-2.1 2.6 2.1-2.6z" FillRule="EvenOdd"/>
</Path.Data>
</Path>
<!--<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path34"
Fill="Red">
<Path.Data>
<PathGeometry Figures="M64.3 57H50v30.7h19.2c4.2 0 10.7-.7 11.8-6.1.7-3.4-2.2-6.8-4.3-9.5l-10-12.5-2.1-2.6h-.3z"
FillRule="NonZero"/>
</Path.Data>
</Path>-->
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path36" Fill="#FF666666">
<Path.Data>
<PathGeometry Figures="M84.7 85.6c2-4.2 1.5-9.1-1.4-12.8L70.7 57l-8.8-11.1V21.7c2.6-1.1 4.4-3.8 4.4-6.8 0-4.1-3.3-7.4-7.4-7.4H50v5h8.9c1.3 0 2.4 1.1 2.4 2.5 0 1.2-.9 2.2-2.1 2.3l-2.2.2v29.8l1 1.3 1.6 2.1 7.1 8.9 10 12.5c2.1 2.7 5 6.1 4.3 9.5-1.1 5.3-7.6 6.1-11.8 6.1H50v4.8h23.9c4.6 0 8.8-2.6 10.8-6.9z" FillRule="NonZero"/>
</Path.Data>
</Path>
<!--Unknown tag: metadata-->
</Canvas>
</Canvas>
</Viewbox>
</ControlTemplate>
</Window.Resources>
<Grid HorizontalAlignment="Center" Margin="0 4 0 0">
<ProgressBar Template="{StaticResource ProgressBarPath}" Width="480" Height="102" Value="40" />
</Grid>
</Window>
uj5u.com熱心網友回復：
如果 bar 是矩形，您可以利用 ProgressBar 的內置機制來更改形狀以顯示當前值。否則，您將需要自己實作該機制。
我認為克萊門斯的回答會對此給出很好的暗示。假設您創建了一個名為“FlaskProgressBar”的自定義 ProgressBar。在此 ProgressBar 的 CustomTemplate 中，
為輪廓路徑定義一個PathGeometry，并設定其
Stroke雙色畫筆繪制輪廓。為空白區域的路徑添加一個 RectangleGeometry 并使用
Data輪廓路徑的 裁剪它。為顯示當前值的填充區域的路徑添加一個 RectangleGeometry 并對其進行裁剪。將 RectangleGeomety 命名為“PART_Content”，以便可以從代碼隱藏中找到它。
<ControlTemplate x:Key="FlaskProgressBarTemplate" TargetType="{x:Type local:FlaskProgressBar}">
<ControlTemplate.Resources>
<LinearGradientBrush x:Key="OutlineBrush" StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="#FF333333" Offset="0.5"/>
<GradientStop Color="#FF666666" Offset="0.5"/>
<GradientStop Color="#FF666666" Offset="1"/>
</LinearGradientBrush>
</ControlTemplate.Resources>
<Grid>
<Grid Margin="6">
<!-- Draw outline -->
<Path x:Name="Outline"
StrokeThickness="8"
Stroke="{StaticResource OutlineBrush}">
<Path.Data>
<PathGeometry Figures="M 20,0 L 20,60 0,100 60,100 40,60 40,0 Z"/>
</Path.Data>
</Path>
<!-- Draw vacent area -->
<Path Data="{Binding Data, ElementName=Outline}"
Fill="{TemplateBinding Background}">
<Path.Clip>
<RectangleGeometry Rect="0,0,60,100"/>
</Path.Clip>
</Path>
<!-- Draw filled area -->
<Path Data="{Binding Data, ElementName=Outline}"
Fill="{TemplateBinding Foreground}">
<Path.Clip>
<RectangleGeometry x:Name="PART_Content" Rect="0,100,60,100"/>
</Path.Clip>
</Path>
</Grid>
</Grid>
</ControlTemplate>
在“FlaskProgressBar”中，找到名為“PART_Content”的 RectangleGeometry，當當前值改變時，改變Y它的值Rect來向上或向下移動。
[TemplatePart(Name = "PART_Content", Type = typeof(RectangleGeometry))]
public class FlaskProgressBar : ProgressBar
{
public FlaskProgressBar() : base()
{
ValueProperty.OverrideMetadata(typeof(FlaskProgressBar),
new FrameworkPropertyMetadata(0D, (d, e) => SetValue((FlaskProgressBar)d, (double)e.NewValue)));
}
private RectangleGeometry? _content;
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
_content = this.GetTemplateChild("PART_Content") as RectangleGeometry;
SetValue(this, Value);
}
private static void SetValue(FlaskProgressBar instance, double value)
{
if (instance._content is not null)
{
var rect = instance._content.Rect;
instance._content.Rect = new Rect(rect.X, rect.Height - value, rect.Width, rect.Height);
}
}
}
這個 ProgresBar 看起來像這樣：
輪廓路徑的 PathGeometry 的實際設計完全取決于您。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/446092.html
上一篇：將控制元件的前景色系結到滑鼠懸停