WPF - C# Desktop App - Ellipse - background depend from state

Question

Hello,

 <Ellipse Grid.Column="1" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="100" Margin="926,664,0,0" Stroke="Black" VerticalAlignment="Top" Width="100"/>

I have a circle and would like to fill the background color green, red or yellow depending on the condition. How can I best achieve this?

  public enum ModeState
        {
            NotDefine = -1,
            Stop = 0,
            Automatic = 1,
            Wait = 2,
            Error = 3,
            Jam = 4,
            Block = 5
        }

Best regards Markus

Answer 1

Hi Peter,

ok, good idea.

  <DataGrid Grid.Column="1"  
                  ItemsSource="{Binding View2}" 
                  IsReadOnly="True"   
                  AutoGenerateColumns="False" Margin="54,669,429,22" FontSize="18">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="Slotnumber" Binding="{Binding SlotNo}"/>
                    <DataGridTextColumn Header="Materialnumber" Binding="{Binding Number}"/>
                    <DataGridTextColumn Header="Magazine quantity" Binding="{Binding Quantity}"/>

How do I get this into the DataGrid? Simply add a column?
If I am on status ModeState.Jam, how would I select the line / row so that the operator can see it. Would it be a good approach?

Answer 2

Hi Markus,
the easiest way in WPF is to use Style with Trigger:

Answer 3

Hi Markus,
another approach is to use Binding with Converter:

  public class ColorConverter : IValueConverter
  {
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
      if (value.GetType() != typeof(ModeState)) return Brushes.Transparent;
      switch ((ModeState)value)
      {
        case ModeState.NotDefine: return Brushes.LightPink;
        case ModeState.Stop: return Brushes.LightBlue;
        case ModeState.Automatic: return Brushes.Green;
        case ModeState.Wait: return Brushes.Azure;
        case ModeState.Error: return Brushes.Red;
        case ModeState.Jam: return Brushes.RosyBrown;
        case ModeState.Block: return Brushes.SaddleBrown;
        default: return Brushes.Transparent;
      }
    }

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

}

  <Window.Resources>
    <local:ColorConverter x:Key="conv"/>
  </Window.Resources>

              <Ellipse Width="30" Height="30" Fill="{Binding State, Converter={StaticResource conv}}"/>

Answer 4

Hi Martin,
if you want to use animation you can include Storyboard:

                  <DataTrigger Binding="{Binding State}" Value="3">  
                    <Setter Property="Fill" Value="LightPink"/>  
                    <DataTrigger.EnterActions>  
                      <BeginStoryboard>  
                        <Storyboard Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)">  
                          <ColorAnimation To="DarkRed" Duration="0:0:1" RepeatBehavior="Forever"/>  
                        </Storyboard>  
                      </BeginStoryboard>  
                    </DataTrigger.EnterActions>  
                  </DataTrigger>  

Answer 5

the easiest way in WPF is to use Style with Trigger:

Hello Peter,
Super!
how do I get this into my data grid, column 1 and 2?
Regards Markus