xaml
<UserControl.Resources>
<local:WithConverter x:Key="withConverter"/>
</UserControl.Resources>
<Grid x:Name="grid" Background="{Binding BackgroundStroke, Mode=TwoWay, RelativeSource={RelativeSource AncestorType=UserControl}}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="14*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border Grid.Row="2" Background="Transparent" BorderBrush="{Binding RimStroke, Mode=TwoWay, RelativeSource={RelativeSource AncestorType=UserControl}}"
BorderThickness="1"/>
</Grid>
<Border Grid.Column="0" Background="Transparent" BorderBrush="{Binding RimStroke, Mode=TwoWay, RelativeSource={RelativeSource AncestorType=UserControl}}"
BorderThickness="1">
<Rectangle Margin="1" Fill="{Binding RangeStroke, Mode=TwoWay, RelativeSource={RelativeSource AncestorType=UserControl}}" HorizontalAlignment="Left">
<Rectangle.Width>
<MultiBinding Converter="{StaticResource withConverter}">
<Binding ElementName="grid"/>
<Binding Path="Maximum" RelativeSource="{RelativeSource AncestorType=UserControl}"/>
<Binding Path="ProgressValue" RelativeSource="{RelativeSource AncestorType=UserControl}"/>
</MultiBinding>
</Rectangle.Width>
</Rectangle>
</Border>
</Grid>
cs
/// <summary>
/// SimpleBattery.xaml 的交互逻辑
/// </summary>
public partial class SimpleBattery : UserControl
{
public SimpleBattery()
{
InitializeComponent();
}
/// <summary>
/// 描边颜色
/// </summary>
public Brush RimStroke
{
get => (Brush)GetValue(RimStrokeProperty);
set => SetValue(RimStrokeProperty, value);
}
public static readonly DependencyProperty RimStrokeProperty =
DependencyProperty.Register("RimStroke", typeof(Brush), typeof(SimpleBattery), new PropertyMetadata(default(Brush)));
/// <summary>
/// 背景颜色
/// </summary>
public Brush BackgroundStroke
{
get => (Brush)GetValue(BackgroundStrokeProperty);
set => SetValue(BackgroundStrokeProperty, value);
}
public static readonly DependencyProperty BackgroundStrokeProperty =
DependencyProperty.Register("BackgroundStroke", typeof(Brush), typeof(SimpleBattery), new PropertyMetadata(default(Brush)));
/// <summary>
/// 范围值颜色
/// </summary>
public Brush RangeStroke
{
get => (Brush)GetValue(RangeStrokeProperty);
set => SetValue(RangeStrokeProperty, value);
}
public static readonly DependencyProperty RangeStrokeProperty =
DependencyProperty.Register("RangeStroke", typeof(Brush), typeof(SimpleBattery), new PropertyMetadata(default(Brush)));
/// <summary>
/// 范围最大值
/// </summary>
public double Maximum
{
get => (double)GetValue(MaximumProperty);
set => SetValue(MaximumProperty, value);
}
public static readonly DependencyProperty MaximumProperty =
DependencyProperty.Register("Maximum", typeof(double), typeof(SimpleBattery), new PropertyMetadata(100d));
/// <summary>
/// 范围真值
/// </summary>
public double ProgressValue
{
get => (double)GetValue(ProgressValueProperty);
set => SetValue(ProgressValueProperty, value);
}
public static readonly DependencyProperty ProgressValueProperty =
DependencyProperty.Register("ProgressValue", typeof(double), typeof(SimpleBattery), new PropertyMetadata(50d));
}
internal class WithConverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
{
if (values.Length == 3 && values[0] is Grid grid && values[1] is double max && values[2] is double val)
{
var width = (grid.ColumnDefinitions[0].ActualWidth * val / max) - 2;
return width;
}
return DependencyProperty.UnsetValue;
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
demo
<wesson:SimpleBattery Width="100" Height="50"
BackgroundStroke="White"
RimStroke="Blue"
RangeStroke="Red"
ProgressValue="66"/>
prism