Challenging LinearGradientBrush WPF Control

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
YetAnotherCoderAsked:
Who is Participating?
 
Robert SchuttConnect With a Mentor Software EngineerCommented:
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
 
Robert SchuttSoftware EngineerCommented:
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
 
YetAnotherCoderAuthor Commented:
Thank You very Much Robert. You did it. You aced it.
0
All Courses

From novice to tech pro — start learning today.