CODEWITHSUNDEEP
windows-phone-8colors
grkbb101
grkbb101

Reputation: 3

how to change color of ellipses in wp8 in xaml.cs

i m trying to create a windows phone 8 app.in this app i have 4 ellipses on a page and i want them to change color depending on a certain integer's value every 15 seconds. i have got the timer part down but i m stuck on how to make them change colors. i would really appreciate some help.

i have googled it alot but could not find a clear solution. i m new at apps so please tell me each and every step here is where i create them in xaml:

<Ellipse x:Name="l1" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="100" Margin="42,339,0,0" Stroke="Black" VerticalAlignment="Top" Width="100" Grid.ColumnSpan="2"/>
<Ellipse x:Name="l2" Grid.Column="1" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="100" Margin="111,339,0,0" Stroke="Black" VerticalAlignment="Top" Width="100"/>
<Ellipse x:Name="l3" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="100" Margin="42,471,0,0" Stroke="Black" VerticalAlignment="Top" Width="100" Grid.ColumnSpan="2"/>
<Ellipse x:Name="l4" Grid.Column="1" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="100" Margin="111,471,0,0" Stroke="Black" VerticalAlignment="Top" Width="100"/>

Upvotes: 0

Views: 483

Answers (2)

Romasz
Romasz

Reputation: 29792

The solution @Vyas_27 provided is the easiest (+1) and in most cases sufficient.

As you are starting, you may want to learn something about DataBinding. In this case your code may look like this:

In XAML:

<Ellipse x:Name="l1" Fill="{Binding FirstBrush}" HorizontalAlignment="Left" Height="100" Margin="42,339,0,0" Stroke="Black" VerticalAlignment="Top" Width="100" Grid.ColumnSpan="2"/>
// other similar

In code behind xaml.cs:

public partial class MainPage : PhoneApplicationPage, INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    public void RaiseProperty(string propName) { if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs(propName)); }

    private Color firstColor = Color.FromArgb(0xFF, 0xF4, 0xF4, 0xF5);
    public Color FirstColor
    {
        get { return firstColor; }
        set { firstColor = value; RaiseProperty("FirstBrush"); }
    }
    public SolidColorBrush FirstBrush { get { return new SolidColorBrush(firstColor); } }
    public MainPage()
    {
        InitializeComponent();
        this.DataContext = this; // set the DataContext so binding can work
    }

    // Then you change the color like this, and the color of your ellipse is updated
    FirstColor = Color.FromArgb(255, 120, 120, 0);
}

You will surely find many blogs, tutorials and so on, so I won't post everything here. Just couple of remarks - what is imortant to make it work:

  • in XAML as you can see, define Binding to Property (the name is very important)
  • your Page needs to implement INotifyPropertyChanged - event, and you should provide method which will fire the event
  • set the DataContext of your Page
  • properties to which you bind must be public Properties with suitable getter (for OneWay binding)

One remark to my solution and @Vyas_27 - this will work if your Timer runs on UI (then it's probably DispatcherTimer). If you have timer running on other Thread, then the Color change you must invoke via Dispatcher.

Upvotes: 0

Vyas
Vyas

Reputation: 2774

try implementing this;

yourEllipsesName.Fill = new System.Windows.Media.SolidColorBrush(System.Windows.Media.Color.FromArgb(255, 255(R), 255(G), 255(B)));

with this you can pass your color code in RGB format. Hope this helps.

Upvotes: 2

Related Questions