C# WPF Rating Control Similar to Wifi Signal Indicator

问题

I have searched a lot for WPF Rating Control simliar to the wifi signal strength indicator in this image below but i couldn't find one

I tried to make it myself and this is the result :)

<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>

I need to change the rectangle colors based on a Rating Value an example woule be:

        <l:UserControl1 RatingValue="3" />

This will color the first three rectangles

Can anyone help me do this, or find a control similar to this ?

回答1:

You could just create a IValueConverter to change the color of your rectangles

Here is a very quick(rough) example:

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>

Code:

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();
        }
    }
}

Usage:

<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>

Result:

回答2:

Here is another way to present Wifi signal quality indicator:

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>

Code:

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();
        }
    }

Usage:

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

</Grid>

Result Wifi Signal Indicator

来源：https://stackoverflow.com/questions/20085284/c-sharp-wpf-rating-control-similar-to-wifi-signal-indicator