Avinash Reddy
Reputation: 937
How to fill a Rectangle based on needs
I'm making a border with Rectangle on all sides. as the borders are so thin the user is not able to put the mouse on it. so I decided to fill with 2 colors so the user will see a small border and it will have more space to place the mouse. so the problem, when I'm filling the corners, I'm not able to fill the L shape. i need to fill topLeft rectangle in L please take a look at the image
Based on question
Why do you want to draw separate rectangles yourself?
as the window style will be none I'm writing a custom resizing I want which side I got the mouse. based on that writing resizing events.
The black boxes has to fill with yellow
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="1"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="1"></ColumnDefinition>
</Grid.ColumnDefinitions>
<!-- Grips -->
<!-- Sides -->
<Rectangle StrokeThickness="1" Grid.Column="1" Grid.Row="2" Name="bottom" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" >
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0,1">
<GradientStop Color="White" Offset="0.5" />
<GradientStop Color="Yellow" Offset="0.5" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle StrokeThickness="1" Grid.Column="0" Grid.Row="1" Name="left" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" >
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1,0">
<GradientStop Color="Yellow" Offset="0.5" />
<GradientStop Color="White" Offset="0.5" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle StrokeThickness="1" Grid.Column="2" Grid.Row="1" Name="right" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" >
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1,0">
<GradientStop Color="White" Offset="0.5" />
<GradientStop Color="Yellow" Offset="0.5" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle StrokeThickness="1" Grid.Column="0" Grid.Row="0" Name="topLeft" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" >
</Rectangle>
<Rectangle StrokeThickness="1" Grid.Column="0" Grid.Row="2" Name="bottomLeft" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" />
<Rectangle StrokeThickness="1" Grid.Column="2" Grid.Row="2" Name="bottomRight" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" />
<Rectangle StrokeThickness="1" Grid.Row="0" Grid.Column="1" Name="top" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" >
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0,1">
<GradientStop Color="Yellow" Offset="0.5" />
<GradientStop Color="White" Offset="0.5" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle StrokeThickness="1" Grid.Column="2" Grid.Row="0" Name="topRight" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" />
<!--Content-->
</Grid>
Here are the 3 borders. how can I fill in that L shape thank you
Upvotes: 1
Views: 104
Answers (3)
Catarina Ferreira
Reputation: 1854
If you want the corner mouse in that area, try this code instead.
The only change I made was setting the top corner to second column again, left corner to second row and filled your topLeftRectangle with the yellow color. Like this, that area can have different mouse:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="1"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="1"></ColumnDefinition>
</Grid.ColumnDefinitions>
<!-- Grips -->
<!-- Sides -->
<Rectangle StrokeThickness="1" Grid.Column="1" Grid.Row="2" Name="bottom" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" >
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0,1">
<GradientStop Color="White" Offset="0.5" />
<GradientStop Color="Yellow" Offset="0.5" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle StrokeThickness="1" Grid.Column="0" Grid.Row="1" Name="left" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" >
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1,0">
<GradientStop Color="Yellow" Offset="0.5" />
<GradientStop Color="Yellow" Offset="0.5" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle StrokeThickness="1" Grid.Column="2" Grid.Row="1" Name="right" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" >
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1,0">
<GradientStop Color="White" Offset="0.5" />
<GradientStop Color="Yellow" Offset="0.5" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle StrokeThickness="1" Grid.Column="0" Grid.Row="0" Name="topLeft" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" Fill="Yellow" >
</Rectangle>
<Rectangle StrokeThickness="1" Grid.Column="0" Grid.Row="2" Name="bottomLeft" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" />
<Rectangle StrokeThickness="1" Grid.Column="2" Grid.Row="2" Name="bottomRight" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" />
<Rectangle StrokeThickness="1" Grid.Row="0" Grid.Column="1" Name="top" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" Fill="Yellow" />
<Rectangle StrokeThickness="1" Grid.Column="2" Grid.Row="0" Name="topRight" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" />
<!--Content-->
</Grid>
Upvotes: 0
Catarina Ferreira
Reputation: 1854
New solution, try like this and compile to see if it works:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="5"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="5"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="5"></ColumnDefinition>
</Grid.ColumnDefinitions>
<!-- Grips -->
<!-- Sides -->
<Rectangle StrokeThickness="1" Grid.Column="1" Grid.Row="2" Name="bottom" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" >
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0,1">
<GradientStop Color="White" Offset="0.5" />
<GradientStop Color="Yellow" Offset="0.5" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle StrokeThickness="1" Grid.Column="0" Name="left" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" Width="1" Grid.RowSpan="2" HorizontalAlignment="Left" >
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1,0">
<GradientStop Color="Yellow" Offset="0.5" />
<GradientStop Color="Yellow" Offset="0.5" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle StrokeThickness="1" Grid.Column="2" Grid.Row="1" Name="right" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" >
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1,0">
<GradientStop Color="White" Offset="0.5" />
<GradientStop Color="Yellow" Offset="0.5" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle StrokeThickness="1" Grid.Column="0" Grid.Row="0" Name="topLeft" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" Fill="#02FFFFFF" Panel.ZIndex="1" />
<Rectangle StrokeThickness="1" Grid.Column="0" Grid.Row="2" Name="bottomLeft" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" />
<Rectangle StrokeThickness="1" Grid.Column="2" Grid.Row="2" Name="bottomRight" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" />
<Rectangle StrokeThickness="1" Grid.Row="0" Name="top" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" Fill="Yellow" Height="1" VerticalAlignment="Top" Grid.ColumnSpan="2" />
<Rectangle StrokeThickness="1" Grid.Column="2" Grid.Row="0" Name="topRight" MouseEnter="DisplayResizeCursor" MouseLeave="ResetCursor" PreviewMouseDown="Resize" />
<!--Content-->
</Grid>
Upvotes: 4
nvoigt
Reputation: 77304
You could add another grid into the corner instead of a rectangle (orange to see what changed):
<Grid Grid.Column="0" Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle StrokeThickness="1" Grid.Column="0" Grid.Row="0" Fill="OrangeRed"/>
<Rectangle StrokeThickness="1" Grid.Column="1" Grid.Row="0" Fill="OrangeRed"/>
<Rectangle StrokeThickness="1" Grid.Column="0" Grid.Row="1" Fill="OrangeRed"/>
</Grid>
Upvotes: 1
Related Questions
- How can I fill empty space with rectangles in WPF?
- How Draw rectangle in WPF?
- How can I create Rectangles in WPF dynamically?
- Filling a big rectangle with a variable quantity of little rectangles
- Fill the outside of a rectangle
- WPF - custom control set fill to rectangle
- dynamically add rectangle with resource fill in WPF
- Why Rectangle Fill isnt changing?
- Bind rectangle fill to a value
- Fill panel with rectangles