locked
Questions about background gradient/images in WPF RRS feed

Answers

  •  
    Hi,

    These are possible in WPF using XAML only,  Here is a good example to create gradient background :

    http://dotnet.org.za/rudi/archive/2007/11/09/subtle-background-effect-using-radial-gradient-brush-in-wpf.aspx


    Here are other some gradient  background examples.
    sample #1:  

    <Border BorderThickness="9,10,10,10" CornerRadius="40,80,30,45" HorizontalAlignment="Center"  Margin="84,186,0,0" Width="150" Height="100" VerticalAlignment="Center" >

            <Border.BorderBrush>

                <RadialGradientBrush GradientOrigin="0.2, 0.2">

                    <RadialGradientBrush.GradientStops>

                        <GradientStop Color="#FFFFFFFF" Offset="0.1" />

                        <GradientStop Color="#0F0000FF" Offset="1.5" />

                    </RadialGradientBrush.GradientStops>

                </RadialGradientBrush>

            </Border.BorderBrush>

            <Border.Background>

                <RadialGradientBrush GradientOrigin="0.2, 0.2">

                    <RadialGradientBrush.GradientStops>

                       <GradientStop Color="#FFFFFFFF" Offset="0.1" />

                        <GradientStop Color="#0F0000FF" Offset="1.4" />

                    </RadialGradientBrush.GradientStops>

                </RadialGradientBrush>

            </Border.Background>

            <Grid>

                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="Gradient"/>

          </Grid>

        </Border>

        <Window.Background>

            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

                <LinearGradientBrush.GradientStops>

                    <GradientStop Color="#C4CBD8" Offset="0" />

                    <GradientStop Color="#E6EAF5" Offset="0.2" />

                    <GradientStop Color="#CFD7E2" Offset="0.9" />

                    <GradientStop Color="#C4CBD8" Offset="1" />

                </LinearGradientBrush.GradientStops>

            </LinearGradientBrush>

    </Window.Background>

    sample #2:

     

    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

                <LinearGradientBrush.GradientStops>

                    <GradientStopCollection>

                        <GradientStop Color="red" Offset="0" />

                        <GradientStop Color="yellow" Offset="1" />

                    </GradientStopCollection>

                </LinearGradientBrush.GradientStops>

            </LinearGradientBrush>

    sample #3:

    <LinearGradientBrush>

                <LinearGradientBrush.StartPoint>

                    <Point X="0" Y="0"/>

                </LinearGradientBrush.StartPoint>

                <LinearGradientBrush.EndPoint>

                    <Point X="1" Y="1"/>

                </LinearGradientBrush.EndPoint>

                <LinearGradientBrush.GradientStops>

                    <GradientStop Color="red" Offset="0"/>

                    <GradientStop Color="black" Offset="1.15"/>

                </LinearGradientBrush.GradientStops>

            </LinearGradientBrush>


    Hopes this helps.

    Thanks.

    Jim Zhou -MSFT
    • Marked as answer by gnobber Thursday, October 23, 2008 3:05 PM
    Thursday, October 23, 2008 12:46 PM
  •  

    Hi,

    I know that  www.codeproject.com or MSDN   are  nice  websites to go to. Also you can search them by google for more good examples.

    Thanks.

     
    Jim Zhou -MSFT
    • Marked as answer by gnobber Friday, October 24, 2008 5:45 AM
    Friday, October 24, 2008 1:41 AM

All replies

  •  
    Hi,

    These are possible in WPF using XAML only,  Here is a good example to create gradient background :

    http://dotnet.org.za/rudi/archive/2007/11/09/subtle-background-effect-using-radial-gradient-brush-in-wpf.aspx


    Here are other some gradient  background examples.
    sample #1:  

    <Border BorderThickness="9,10,10,10" CornerRadius="40,80,30,45" HorizontalAlignment="Center"  Margin="84,186,0,0" Width="150" Height="100" VerticalAlignment="Center" >

            <Border.BorderBrush>

                <RadialGradientBrush GradientOrigin="0.2, 0.2">

                    <RadialGradientBrush.GradientStops>

                        <GradientStop Color="#FFFFFFFF" Offset="0.1" />

                        <GradientStop Color="#0F0000FF" Offset="1.5" />

                    </RadialGradientBrush.GradientStops>

                </RadialGradientBrush>

            </Border.BorderBrush>

            <Border.Background>

                <RadialGradientBrush GradientOrigin="0.2, 0.2">

                    <RadialGradientBrush.GradientStops>

                       <GradientStop Color="#FFFFFFFF" Offset="0.1" />

                        <GradientStop Color="#0F0000FF" Offset="1.4" />

                    </RadialGradientBrush.GradientStops>

                </RadialGradientBrush>

            </Border.Background>

            <Grid>

                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="Gradient"/>

          </Grid>

        </Border>

        <Window.Background>

            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

                <LinearGradientBrush.GradientStops>

                    <GradientStop Color="#C4CBD8" Offset="0" />

                    <GradientStop Color="#E6EAF5" Offset="0.2" />

                    <GradientStop Color="#CFD7E2" Offset="0.9" />

                    <GradientStop Color="#C4CBD8" Offset="1" />

                </LinearGradientBrush.GradientStops>

            </LinearGradientBrush>

    </Window.Background>

    sample #2:

     

    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

                <LinearGradientBrush.GradientStops>

                    <GradientStopCollection>

                        <GradientStop Color="red" Offset="0" />

                        <GradientStop Color="yellow" Offset="1" />

                    </GradientStopCollection>

                </LinearGradientBrush.GradientStops>

            </LinearGradientBrush>

    sample #3:

    <LinearGradientBrush>

                <LinearGradientBrush.StartPoint>

                    <Point X="0" Y="0"/>

                </LinearGradientBrush.StartPoint>

                <LinearGradientBrush.EndPoint>

                    <Point X="1" Y="1"/>

                </LinearGradientBrush.EndPoint>

                <LinearGradientBrush.GradientStops>

                    <GradientStop Color="red" Offset="0"/>

                    <GradientStop Color="black" Offset="1.15"/>

                </LinearGradientBrush.GradientStops>

            </LinearGradientBrush>


    Hopes this helps.

    Thanks.

    Jim Zhou -MSFT
    • Marked as answer by gnobber Thursday, October 23, 2008 3:05 PM
    Thursday, October 23, 2008 12:46 PM
  • Hi Jim,

    Thanks for the reply. These are good starting points to learn from. Do you know a site about WPF/XAML/Blend where all the topics (or there are many topics) are about designing (complex gradients, drawing, color combining, etc.)? I really want my app to shine in terms of looks. Thanks!

    Thursday, October 23, 2008 3:05 PM
  •  

    Hi,

    I know that  www.codeproject.com or MSDN   are  nice  websites to go to. Also you can search them by google for more good examples.

    Thanks.

     
    Jim Zhou -MSFT
    • Marked as answer by gnobber Friday, October 24, 2008 5:45 AM
    Friday, October 24, 2008 1:41 AM