TheDeveloperBlog.com
C-Sharp | Java | Python | Swift | GO | WPF | Ruby | Scala | F# | JavaScript | SQL | PHP | Angular | HTML
WPF Rectangle: Fill and Stroke
Rectangle. Shapes can be part of WPF interfaces. With the Rectangle, we specify a rectangular graphical region that can have different colors and borders. This improves the interfaces of some programs.
First, please drag a Rectangle from the Visual Studio Toolbox to your WPF Window. Next, you can adjust its attributes. By dragging some of the guides, you can add a RadiusY and RadiusX: these give the rectangle rounded corners.
Stroke: Next, try adding the Stroke attribute in the XAML. You will need to manually specify this in the markup.
StrokeThickness: You can adjust the thickness of the Stroke (border) by adding a StrokeThickness attribute, which counts in pixels.
Also, you can apply a colored background to the rectangle with the Fill attribute. This can receive hex colors or the named colors in Visual Studio's list. You will need to adjust Width and Height as well.
Example markup: XAML
<Window x:Class="WpfApplication16.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Rectangle Fill="Beige" HorizontalAlignment="Left"
Height="100" Margin="10,10,0,0"
Stroke="DarkMagenta" StrokeThickness="5"
VerticalAlignment="Top" Width="150"
RadiusY="13.5" RadiusX="13.5"/>
</Grid>
</Window>
Ellipse. With the RadiusX and RadiusY attributes, you can create an Ellipse with a rectangle. But using an Ellipse control directly may be simpler. I cover Ellipse in a separate example page.
Tip: In the Ellipse example, I show how mouse events can interact with shapes. This is equally true with rectangles.
Summary. With WPF, a main goal is to make programs easier and faster to create. The Rectangle control (and similar controls like Ellipse) help this goal: they are easy options for when a graphical element (shape) is needed.
© TheDeveloperBlog.com
The Dev Codes
Related Links:
- WPF Controls
- WPF Rectangle: Fill and Stroke
- WPF TabControl Example: TabItem
- WPF HorizontalAlignment and VerticalAlignment
- WPF Grid Use: Margin and Background
- WPF GridSplitter Example
- WPF StackPanel: Arrange Controls
- WPF DataGrid Examples
- WPF DatePicker Example: SelectedDate
- WPF Border Example
- WPF CheckBox Example
- WPF ComboBox Example (ItemsSource)
- WPF Ellipse: Stroke, Fill and MouseEnter
- WPF DockPanel Example
- WPF Expander Control
- WPF DoubleAnimation
- WPF ProgressBar: Value and Maximum
- WPF Button Control Example
- Top 35 WPF Interview Questions (2021)
- WPF Viewbox Example
- WPF WebBrowser Control
- WPF PasswordBox Control: PasswordChanged
- WPF IsEnabled Property (Button Example)
- WPF RadioButton Example (Checked)
- WPF Image Example: PNG, JPG Files
- WPF ToolBar Example: Uses ToolBarTray
- WPF ToolTip Example
- WPF TextBlock Example
- WPF TextBox Example
- WPF TreeView Example: TreeViewItem
- WPF Menu, MenuItem and Separator
- WPF Label Example
- WPF Name Property: Get Controls
- WPF KeyDown Event Handler
- WPF RenderTransform Example: TransformGroup
- WPF ListView Control: Add Items to GridView
- WPF ScrollViewer Control
- WPF GroupBox Example
- WPF WindowsFormsHost Example
- WPF WrapPanel Example
- WPF Slider Example (ValueChanged)
- WPF Calendar Example: SelectedDate
- WPF Canvas Example: SetLeft, SetTop