Solved

Challenging LinearGradientBrush WPF Control

Posted on 2013-06-01
3
489 Views
Last Modified: 2013-06-05
Atleast for me it is challenging...
 
I want to connect the two sections with arcs and fill them similarly....How to do it in WPF??
 
XAML:
     
<Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Rectangle Stroke="Black" StrokeThickness="1">
            <Rectangle.Fill>
                <LinearGradientBrush x:Name="lgBrush1" StartPoint="0,0" EndPoint="0,0.5" SpreadMethod="Reflect">
                    <GradientStop Color="#FF484242" Offset="0"/>
                    <GradientStop Color="White" Offset="1" />
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>

        <Rectangle Stroke="Black" StrokeThickness="1" Grid.Row="1" Grid.Column="1">
            <Rectangle.Fill>
                <LinearGradientBrush x:Name="lgBrush2" StartPoint="0,0" EndPoint="0.5,0" SpreadMethod="Reflect">
                    <GradientStop Color="#FF484242" Offset="0"/>
                    <GradientStop Color="White" Offset="1" />
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
</Grid> 

Open in new window


Request

Thanks
0
Comment
Question by:YetAnotherCoder
  • 2
3 Comments
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 39213399
Try adding this:
        <Rectangle Stroke="Black" StrokeThickness="1" Grid.Row="0" Grid.Column="1">
            <Rectangle.Fill>
                <RadialGradientBrush x:Name="lgBrush3" Center="0,1" GradientOrigin="0,1" RadiusX="1" RadiusY="1" SpreadMethod="Pad">
                    <GradientStop Color="#FF484242" Offset="0"/>
                    <GradientStop Color="White" Offset="0.5" />
                    <GradientStop Color="#FF484242" Offset="1"/>
                </RadialGradientBrush>
            </Rectangle.Fill>
        </Rectangle>

Open in new window

If you want the outside to be another color, add another gradientstop:
<GradientStop Color="White" Offset="1" />

Open in new window

0
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 500 total points
ID: 39213474
Playing around with this, wondering if you would want to end up with a fixed size border, independent of window size. I also thought giving some room to the arc so the inside is not squared up gives a nicer effect, unless that square inside is exactly what you were after. Anyway I thought I would post it:
    <Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="100" />
            <RowDefinition Height="211*" />
            <RowDefinition Height="100" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="528*" />
            <ColumnDefinition Width="100" />
        </Grid.ColumnDefinitions>
        
        <Rectangle Stroke="Black" StrokeThickness="0">
            <Rectangle.Fill>
                <RadialGradientBrush x:Name="lgBrush3" Center="1,1" GradientOrigin="1,1" RadiusX="1" RadiusY="1" SpreadMethod="Pad">
                    <GradientStop Color="White" Offset="0.3" />
                    <GradientStop Color="#FF484242" Offset="0.3"/>
                    <GradientStop Color="White" Offset="0.6" />
                    <GradientStop Color="#FF484242" Offset="0.9"/>
                    <GradientStop Color="White" Offset="0.9" />
                </RadialGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle Stroke="Black" StrokeThickness="0"  Grid.Row="0" Grid.Column="1">
            <Rectangle.Fill>
                <LinearGradientBrush x:Name="lgBrush1" StartPoint="1,0" EndPoint="1,1" SpreadMethod="Pad">
                    <GradientStop Color="White" Offset="0.1" />
                    <GradientStop Color="#FF484242" Offset="0.1"/>
                    <GradientStop Color="White" Offset="0.4"/>
                    <GradientStop Color="#FF484242" Offset="0.7"/>
                    <GradientStop Color="White" Offset="0.7" />
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle Stroke="Black" StrokeThickness="0" Grid.Column="2">
            <Rectangle.Fill>
                <RadialGradientBrush x:Name="lgBrush4" Center="0,1" GradientOrigin="0,1" RadiusX="1" RadiusY="1" SpreadMethod="Pad">
                    <GradientStop Color="White" Offset="0.3" />
                    <GradientStop Color="#FF484242" Offset="0.3"/>
                    <GradientStop Color="White" Offset="0.6" />
                    <GradientStop Color="#FF484242" Offset="0.9"/>
                    <GradientStop Color="White" Offset="0.9" />
                </RadialGradientBrush>
            </Rectangle.Fill>
        </Rectangle>

        <Rectangle Stroke="Black" StrokeThickness="0" Grid.Row="1">
            <Rectangle.Fill>
                <LinearGradientBrush x:Name="lgBrush2" StartPoint="0,0" EndPoint="1,0" SpreadMethod="Pad">
                    <GradientStop Color="White" Offset="0.1" />
                    <GradientStop Color="#FF484242" Offset="0.1"/>
                    <GradientStop Color="White" Offset="0.4"/>
                    <GradientStop Color="#FF484242" Offset="0.7"/>
                    <GradientStop Color="White" Offset="0.7" />
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle Stroke="Black" StrokeThickness="0" Grid.Row="1" Grid.Column="2">
            <Rectangle.Fill>
                <LinearGradientBrush x:Name="lgBrush5" StartPoint="0,0" EndPoint="1,0" SpreadMethod="Pad">
                    <GradientStop Color="White" Offset="0.3" />
                    <GradientStop Color="#FF484242" Offset="0.3"/>
                    <GradientStop Color="White" Offset="0.6"/>
                    <GradientStop Color="#FF484242" Offset="0.9"/>
                    <GradientStop Color="White" Offset="0.9" />
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>

        <Rectangle Stroke="Black" StrokeThickness="0" Grid.Row="2">
            <Rectangle.Fill>
                <RadialGradientBrush x:Name="lgBrush6" Center="1,0" GradientOrigin="1,0" RadiusX="1" RadiusY="1" SpreadMethod="Pad">
                    <GradientStop Color="White" Offset="0.3" />
                    <GradientStop Color="#FF484242" Offset="0.3"/>
                    <GradientStop Color="White" Offset="0.6" />
                    <GradientStop Color="#FF484242" Offset="0.9"/>
                    <GradientStop Color="White" Offset="0.9" />
                </RadialGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle Stroke="Black" StrokeThickness="0"  Grid.Row="2" Grid.Column="1">
            <Rectangle.Fill>
                <LinearGradientBrush x:Name="lgBrush7" StartPoint="0,0" EndPoint="0,1" SpreadMethod="Pad">
                    <GradientStop Color="White" Offset="0.3" />
                    <GradientStop Color="#FF484242" Offset="0.3"/>
                    <GradientStop Color="White" Offset="0.6"/>
                    <GradientStop Color="#FF484242" Offset="0.9"/>
                    <GradientStop Color="White" Offset="0.9" />
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle Stroke="Black" StrokeThickness="0" Grid.Row="2" Grid.Column="2">
            <Rectangle.Fill>
                <RadialGradientBrush x:Name="lgBrush8" Center="0,0" GradientOrigin="0,0" RadiusX="1" RadiusY="1" SpreadMethod="Pad">
                    <GradientStop Color="White" Offset="0.3" />
                    <GradientStop Color="#FF484242" Offset="0.3"/>
                    <GradientStop Color="White" Offset="0.6" />
                    <GradientStop Color="#FF484242" Offset="0.9"/>
                    <GradientStop Color="White" Offset="0.9" />
                </RadialGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
    </Grid>

Open in new window

capture
0
 

Author Comment

by:YetAnotherCoder
ID: 39224293
Thank You very Much Robert. You did it. You aced it.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Not showing page correctly 3 29
C# Single Form 8 26
C#  Radio button search for Date not DateTime 4 35
.NET tools for adding thread safety to a web app? 3 13
This article describes relatively difficult and non-obvious issues that are likely to arise when creating COM class in Visual Studio and deploying it by professional MSI-authoring tools. It is assumed that the reader is already familiar with the cla…
Exception Handling is in the core of any application that is able to dignify its name. In this article, I'll guide you through the process of writing a DRY (Don't Repeat Yourself) Exception Handling mechanism, using Aspect Oriented Programming.
You have products, that come in variants and want to set different prices for them? Watch this micro tutorial that describes how to configure prices for Magento super attributes. Assigning simple products to configurable: We assigned simple products…
With Secure Portal Encryption, the recipient is sent a link to their email address directing them to the email laundry delivery page. From there, the recipient will be required to enter a user name and password to enter the page. Once the recipient …

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now