Changing gradient style programatically in WP8

Question

I have a few custom controls in my app. One of those custom controls contains a gradient background, and I would like the user to be able to switch between linear and radial gradient style dynamically. How do I do this in code? My custom control XAML:

<UserControl x:Class="App.tile"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}" Height="191.94" Width="406.91">

<Grid x:Name="LayoutRoot">
    <Grid.Background>
        <RadialGradientBrush>
            <GradientStop Color="#FF092949" Offset="0"/>
            <GradientStop Color="#FF06192C" Offset="1"/>
        </RadialGradientBrush>
    </Grid.Background>
    <TextBlock HorizontalAlignment="Left" Margin="10,134,0,0" TextWrapping="Wrap" x:Name="tileTitle" Text="Project" VerticalAlignment="Top" FontSize="36"/>
</Grid>
</UserControl>

Code where I'll change it's appearance:

private void linearRadioButton_Checked(object sender, RoutedEventArgs e)
{
    // The linearRadioButton was checked, update the exampleTile
}

Thanks a lot!

Update:

Tried this now:

    <phone:PhoneApplicationPage.Resources>
    <LinearGradientBrush x:Key="linearBrush" StartPoint="0,0.5" EndPoint="1,0.5">
        <GradientStop Color="Yellow" Offset="0.0" />
        <GradientStop Color="Red" Offset="0.25" />
        <GradientStop Color="Blue" Offset="0.75" />
        <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>

    <RadialGradientBrush x:Key="radialBrush" GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
        <RadialGradientBrush.GradientStops>
            <GradientStop Color="Yellow" Offset="0" />
            <GradientStop Color="Red" Offset="0.25" />
            <GradientStop Color="Blue" Offset="0.75" />
            <GradientStop Color="LimeGreen" Offset="1" />
        </RadialGradientBrush.GradientStops>
    </RadialGradientBrush>
</phone:PhoneApplicationPage.Resources>

        private void settingsPage_Loaded(object sender, RoutedEventArgs e)
    {
        // settingsPage was loaded, set the attributes for the exampleTile
        exampleTile.tileTitle.Text = "History";

        // Get the gradient type from settings
        try
        {
            gradientType = settings["gradientType"].ToString();
        }
        catch (KeyNotFoundException)
        {
            gradientType = "radial";
        }

        if (gradientType.Equals("radial"))
        {
            // Check the radialRadioButton
            radialRadioButton.IsChecked = true;
        }
        else if (gradientType.Equals("linear"))
        {
            // Check the linearRadioButton
            linearRadioButton.IsChecked = true;
        }
    }

        private void linearRadioButton_Checked(object sender, RoutedEventArgs e)
    {
        // The linearRadioButton was checked, update the exampleTile
        (exampleTile as tile).Background = (LinearGradientBrush)this.Resources["linearBrush"];
    }

    private void radialRadioButton_Checked(object sender, RoutedEventArgs e)
    {
        // The radialRadioButton was checked, update the exampleTile
        this.exampleTile.Background = (LinearGradientBrush)this.Resources["radialBrush"];
    }

But it causes a NullReferenceException (Not set to an instance of an object)

Answer 1

It can probably be done via Style or by changing Brushes. I'll try to do it second way (more info about LinearGradientBrush and RadialGradienBrush):

1. Method using Resources:

In XAML:

<phone:PhoneApplicationPage.Resources>
    <LinearGradientBrush x:Key="linearBrush" StartPoint="0,0.5" EndPoint="1,0.5">
        <GradientStop Color="Yellow" Offset="0.0" />
        <GradientStop Color="Red" Offset="0.25" />
        <GradientStop Color="Blue" Offset="0.75" />
        <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>

    <RadialGradientBrush x:Key="radialBrush" GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
        <RadialGradientBrush.GradientStops>
            <GradientStop Color="Yellow" Offset="0" />
            <GradientStop Color="Red" Offset="0.25" />
            <GradientStop Color="Blue" Offset="0.75" />
            <GradientStop Color="LimeGreen" Offset="1" />
        </RadialGradientBrush.GradientStops>
    </RadialGradientBrush>
</phone:PhoneApplicationPage.Resources>

Then changing in the code:

private void linearRadioButton_Checked(object sender, RoutedEventArgs e)
{
    LayoutRoot.Background = (LinearGradientBrush)this.Resources["linearBrush"];
    // or radial
    LayoutRoot.Background = (RadialGradientBrush)this.Resources["radialBrush"];
}

You can also use those Resources in your XAML. And of course you can define those resources in App.Resources - then you will have tchem available through the whole App, not only on this Page.

2. It can also be done in a hard way - everything in the code:
First I will define my brushes for example in MainPage:

LinearGradientBrush linear = new LinearGradientBrush();
RadialGradientBrush radial = new RadialGradientBrush();

public MainPage()
{
   InitializeComponent();

   linear.StartPoint = new Point(0, 0);
   linear.EndPoint = new Point(1, 1);
   linear.GradientStops.Add(new GradientStop() { Color = Colors.Yellow, Offset = 0.0 });
   linear.GradientStops.Add(new GradientStop() { Color = Colors.Red, Offset = 0.25 });
   linear.GradientStops.Add(new GradientStop() { Color = Colors.Blue, Offset = 0.75 });
   linear.GradientStops.Add(new GradientStop() { Color = Colors.Green, Offset = 1.0 });

   radial.GradientOrigin = new Point(0.5, 0.5);
   radial.Center = new Point(0.5, 0.5);
   radial.RadiusX = 0.5;
   radial.RadiusY = 0.5;
   radial.GradientStops.Add(new GradientStop() { Color = Colors.Yellow, Offset = 0.0 });
   radial.GradientStops.Add(new GradientStop() { Color = Colors.Red, Offset = 0.25 });
   radial.GradientStops.Add(new GradientStop() { Color = Colors.Blue, Offset = 0.75 });
   radial.GradientStops.Add(new GradientStop() { Color = Colors.Green, Offset = 1.0 });
}

Then you can use them freely:

private void linearRadioButton_Checked(object sender, RoutedEventArgs e)
{
    LaoutRoot.Background = linear;
    // or you can change button's background
    (sender as RadioButton).Background = radial;
    // or you can build other logic
    if ((bool)(sender as RadioButton).IsChecked)
        LayoutRoot.Background = linear;
    else LayoutRoot.Background = radial;        
}