Question

我已经搜索了很多WPF等级控制simliar到下面这张图片中的wifi信号强度指示器，但我找不到一个

enter image description here

我试着自己制作，这就是结果：）

<Grid>
    <Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="58" Margin="90,114,0,0" Stroke="Black" VerticalAlignment="Top" Width="22"/>
    <Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="74" Margin="117,98,0,0" Stroke="Black" VerticalAlignment="Top" Width="22"/>
    <Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="93" Margin="144,79,0,0" Stroke="Black" VerticalAlignment="Top" Width="22"/>
    <Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="111" Margin="171,61,0,0" Stroke="Black" VerticalAlignment="Top" Width="22"/>
    <Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="124" Margin="198,48,0,0" Stroke="Black" VerticalAlignment="Top" Width="22"/>

</Grid>

我需要根据评级值更改矩形颜色，例如：

        <l:UserControl1 RatingValue="3" />

这将为前三个矩形着色

任何人都可以帮我这样做，或者找一个类似的控件吗？

Answer 1

你可以创建一个IValueConverter来改变矩形的颜色

这是一个非常快速（粗略）的例子：

<强>的Xaml：

<Grid Background="DarkBlue"  >
    <Grid.Resources>
        <local:RatingConverter x:Key="RatingConverter" OnBrush="#FFFFFFFF" OffBrush="#50FFFFFF" />
        <Style TargetType="Rectangle">
            <Setter Property="HorizontalAlignment" Value="Left" />
            <Setter Property="VerticalAlignment" Value="Bottom" />
            <Setter Property="Margin" Value="5,0,0,0" />
        </Style>
    </Grid.Resources>

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Rectangle Width="5" Height="5" Fill="{Binding RatingValue, Converter={StaticResource RatingConverter}, ConverterParameter=1}"/>
        <Rectangle Width="5" Height="10" Fill="{Binding RatingValue, Converter={StaticResource RatingConverter}, ConverterParameter=2}"/>
        <Rectangle Width="5" Height="15" Fill="{Binding RatingValue, Converter={StaticResource RatingConverter}, ConverterParameter=3}"/>
        <Rectangle Width="5" Height="20" Fill="{Binding RatingValue, Converter={StaticResource RatingConverter}, ConverterParameter=4}"/>
        <Rectangle Width="5" Height="25" Fill="{Binding RatingValue, Converter={StaticResource RatingConverter}, ConverterParameter=5}"/>
    </StackPanel>
</Grid>

<强>代码：

namespace WpfApplication14
{
    /// <summary>
    /// Interaction logic for UserControl1.xaml
    /// </summary>
    public partial class UserControl1 : UserControl
    {
        public UserControl1()
        {
            InitializeComponent();
            DataContext = this;
        }

        public int RatingValue
        {
            get { return (int)GetValue(RatingValueProperty); }
            set { SetValue(RatingValueProperty, value); }
        }

        // Using a DependencyProperty as the backing store for RatingValue.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty RatingValueProperty =
            DependencyProperty.Register("RatingValue", typeof(int), typeof(UserControl1), new UIPropertyMetadata(0));
    }

    public class RatingConverter : IValueConverter
    {
        public Brush OnBrush { get; set; }
        public Brush OffBrush { get; set; }

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            int rating = 0;
            int number = 0;
            if (int.TryParse(value.ToString(), out rating) && int.TryParse(parameter.ToString(), out number))
            {
                if (rating >= number)
                {
                    return OnBrush;
                }
                return OffBrush;
            }
            return Brushes.Transparent;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

<强>用法：

<Window x:Class="WpfApplication14.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:l="clr-namespace:WpfApplication14" 
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <l:UserControl1 RatingValue="3" />
    </Grid>
</Window>

<强>结果：

enter image description here

Answer 2

这是呈现Wifi信号质量指标的另一种方法：

xaml：

<Grid Background="Transparent" DataContext="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=loc:Wifi}}"
    d:DataContext="{d:DesignInstance Type=loc:Wifi, IsDesignTimeCreatable=True}">
    <Grid.Resources>
        <loc:QualityRateConverter x:Key="QualityRateConverter" OnBrush="#FF3DEA22" OffBrush="#99707070" />
    </Grid.Resources>
    <Path Stroke="{Binding Path=QualityRateValue, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource QualityRateConverter}, ConverterParameter=95}"
          StrokeThickness="2" Data="M23,5 A60,200 0 0 0 2,5"/>
    <Path Stroke="{Binding Path=QualityRateValue, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource QualityRateConverter}, ConverterParameter=75}"
          StrokeThickness="2" Data="M20,8 A55,200 0 0 0 4.5,8"/>
    <Path Stroke="{Binding Path=QualityRateValue, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource QualityRateConverter}, ConverterParameter=40}"
          StrokeThickness="2" Data="M17,11 A45,200 0 0 0 7.5,11"/>
    <Path Stroke="{Binding Path=QualityRateValue, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource QualityRateConverter}, ConverterParameter=20}"
          StrokeThickness="1" Fill="{Binding Path=QualityRateValue, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource QualityRateConverter}, ConverterParameter=20}">
        <Path.Data>
            <GeometryGroup FillRule="EvenOdd">
                <EllipseGeometry RadiusX="1.5" RadiusY="1.5" Center="12,15" />
            </GeometryGroup>
        </Path.Data>
    </Path>
</Grid>

代码：

public partial class Wifi : UserControl
    {
        public Wifi()
        {
            InitializeComponent();
        }
        public int QualityRateValue
        {
            get { return (int)GetValue(QualityRateValueProperty); }
            set { SetValue(QualityRateValueProperty, value); }
        }

        // Using a DependencyProperty as the backing store for RatingValue.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty QualityRateValueProperty =
            DependencyProperty.Register("QualityRateValue", typeof(int), typeof(Wifi), new UIPropertyMetadata(0));
    }
    public class QualityRateConverter : IValueConverter
    {
        public Brush OnBrush { get; set; }
        public Brush OffBrush { get; set; }

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            int rating = 0;
            int number = 0;
            if (int.TryParse(value.ToString(), out rating) && int.TryParse(parameter.ToString(), out number))
            {
                if (rating >= number)
                {
                    return OnBrush;
                }
                return OffBrush;
            }
            return Brushes.Transparent;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

用法：

<Grid Background="DarkBlue">
    <Viewbox Width="50" Height="50">
        <local:Wifi QualityRateValue="80"/>
    </Viewbox>

</Grid>

结果 Wifi Signal Indicator

C＃WPF等级控制类似于Wifi信号指示器

2 个答案: