Solved

Challenging LinearGradientBrush WPF Control

Posted on 2013-06-01
3
501 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 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

Secure Your Active Directory - April 20, 2017

Active Directory plays a critical role in your company’s IT infrastructure and keeping it secure in today’s hacker-infested world is a must.
Microsoft published 300+ pages of guidance, but who has the time, money, and resources to implement? Register now to find an easier way.

Question has a verified solution.

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

A long time ago (May 2011), I have written an article showing you how to create a DLL using Visual Studio 2005 to be hosted in SQL Server 2005. That was valid at that time and it is still valid if you are still using these versions. You can still re…
Calculating holidays and working days is a function that is often needed yet it is not one found within the Framework. This article presents one approach to building a working-day calculator for use in .NET.
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…

730 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