Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 536
  • Last Modified:

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
0
YetAnotherCoder
Asked:
YetAnotherCoder
  • 2
1 Solution
 
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
 
Robert SchuttSoftware 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
 
YetAnotherCoderAuthor Commented:
Thank You very Much Robert. You did it. You aced it.
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now