Simple radial gradient background in Metro-Style App

问题

What would be a simple way of drawing a radial gradient background (also being able to change it's color) in a XAML/C# Metro-Style App ? Is using DirectX an option ? I tried looking at some SharpDX samples for Windows 8 Consumer Preview but failed to compile them. Haven't found any other samples of using DX in C# on Windows 8. Any ideas ?

回答1:

RadialGradientBrush has not been added to the XAML stack yet. You can use WriteableBitmapEx to draw the gradient to a WriteableBitmap yourself and then use an Image or ImageBrush to display it - although that could be prohibitively slow if you have many elements that you want to use differently shaped gradients on.

You could just use a regular image created in Photoshop or Paint.NET.

Using DirectX might be too complicated and not really necessary, but you can mix DirectX with XAML. If you really want to go there - you would probably need to use SurfaceImageSource. There is a basic introduction on MSDN here or check a SharpDX sample here. You would probably also want to use Direct2D to render to that surface, so there are quite a few technologies you would need to mix.

回答2:

I used SharpDx to overcome this hurdle and create me a RadialGradient filled background

http://advertboy.wordpress.com/2012/05/20/radial-gradients-mini-path-geometry-sprites-infinite-scrolling-inertial-canvas/

回答3:

Radial gradient brushes have been around for quite a while - I think the first time I used one was in 2008. Anyway, the markup in xaml is pretty simple:

<Rectangle Width="200" Height="100">
      <Rectangle.Fill>
        <RadialGradientBrush 
          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>
      </Rectangle.Fill>
    </Rectangle>

Full details here: http://msdn.microsoft.com/en-us/library/ms752281(v=vs.100).aspx

来源：https://stackoverflow.com/questions/10362063/simple-radial-gradient-background-in-metro-style-app

标签

xaml

directx

windows-runtime

winrt-xaml