Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Challenging LinearGradientBrush WPF Control

Posted on 2013-06-01
3
Medium Priority
?
528 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 2000 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

Prepare for your VMware VCP6-DCV exam.

Josh Coen and Jason Langer have prepared the latest edition of VCP study guide. Both authors have been working in the IT field for more than a decade, and both hold VMware certifications. This 163-page guide covers all 10 of the exam blueprint sections.

Question has a verified solution.

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

In my previous two articles we discussed Binary Serialization (http://www.experts-exchange.com/A_4362.html) and XML Serialization (http://www.experts-exchange.com/A_4425.html). In this article we will try to know more about SOAP (Simple Object Acces…
Entity Framework is a powerful tool to help you interact with the DataBase but still doesn't help much when we have a Stored Procedure that returns more than one resultset. The solution takes some of out-of-the-box thinking; read on!
Want to learn how to record your desktop screen without having to use an outside camera. Click on this video and learn how to use the cool google extension called "Screencastify"! Step 1: Open a new google tab Step 2: Go to the left hand upper corn…
In response to a need for security and privacy, and to continue fostering an environment members can turn to for support, solutions, and education, Experts Exchange has created anonymous question capabilities. This new feature is available to our Pr…

610 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