电池 SimpleBattery

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,1,2,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 - 2) * val / max;
            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