在 WP8 中以编程方式更改渐变样式

Question

我的应用程序中有一些自定义控件。这些自定义控件之一包含渐变背景，我希望用户能够动态地在线性和径向渐变样式之间切换。我如何在代码中执行此操作？我的自定义控件 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>

我将更改其外观的代码：

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

多谢！

更新：

现在尝试过这个：

    <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"];
    }

但它会导致 NullReferenceException （未设置为对象的实例）

Answer 1

Style这可能可以通过改变画笔来完成。我将尝试第二种方式（有关LinearGradientBrush和RadialGradienBrush的更多信息）：

1.资源使用方法：

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

然后修改代码：

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

您还可以在 XAML 中使用这些资源。当然，您可以在 App.Resources 中定义这些资源 - 然后您将在整个应用程序中使用 tchem，而不仅仅是在此页面上。

2.它也可以通过困难的方式完成- 代码中的所有内容：
首先，我将在 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 });
}

然后你就可以自由地使用它们了：

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