# Text Frames and Shapes > Insert text frames and drawings in a WPF TextControl with the mouse or in code, bind marker lines in XAML and create shapes with the WPF TXDrawingControl. - **Product:** TX Text Control .NET for WPF - **Section:** Documentation - **Kind:** Topic - **Path:** TX Text Control .NET for WPF > Document Editor > Text Frames and Shapes - **4278 words** - **Web URL:** https://docs.textcontrol.com/tx-text-control-dotnet-wpf/document-editor/text-frames-shapes/ - **LLMs URL:** https://docs.textcontrol.com/tx-text-control-dotnet-wpf/document-editor/text-frames-shapes/llms.txt - **LLMs-Full URL:** https://docs.textcontrol.com/tx-text-control-dotnet-wpf/document-editor/text-frames-shapes/llms-full.txt --- Letters with an address window, forms with a boxed note and flow charts need content that isn't part of the running text. The WPF `TextControl` offers two kinds of objects for it: text frames, boxes with text of their own, and drawings, which hold shapes such as arrows, stars and callouts. Users draw both with the mouse; your code inserts them, fills and formats them and binds their marker lines to WPF controls. The handlers below belong in *MainWindow.xaml.cs* of a window with a `TextControl` named `textControl1`, as in [Create Your First WPF Application](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/getting-started/document-editor/first-application/llms-full.txt), with `SampleApp` replaced by your namespace. Text frames and drawings are frames and are placed like images: inline, anchored to a paragraph or at a fixed position, as described in [Images](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/document-editor/images/#how-images-are-placed). For documents without a user interface, see [Images, Text Frames, and Shapes](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/document-processing/images-shapes/llms-full.txt). ### How Text Frames Work A [TextFrame](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol/textframe/llms-full.txt) is a text part like the main text or a header, with its own [Selection](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol/textframe/selection-property/llms-full.txt), paragraphs, tables and images. [TextControl.TextFrames](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol-wpf/textcontrol/textframes-property/llms-full.txt) returns the [TextFrameCollection](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol/textframecollection/llms-full.txt) of the main text. ![Class diagram of the text frame classes: TextControl, WPF.TextControl and ServerTextControl with TextFrames, TextFrameMarkerLines and the text frame events, TextFrameCollection and the TextFrame class with its properties and collections.](https://docs.textcontrol.com/assets/img/tx-text-control-dotnet-wpf/text-frames-class-diagram.23648174.webp) | State | What the user does | Returned by | |---|---|---| | Selected | Moves, resizes or deletes the frame with its sizing handles | [TextFrameCollection.GetItem](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol/textframecollection/getitem-method/llms-full.txt) without a parameter | | Activated | Types and formats text inside the frame | [GetActivatedItem](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol/textframecollection/getactivateditem-method/llms-full.txt) | [DeactivateItem](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol/textframecollection/deactivateitem-method/llms-full.txt) returns the input position to the text part that contains the frame. Sizes, borders and margins are twips, 1/1440 inch. ### Insert Text Frames and Shapes in the Ribbon The **Insert** tab, a [RibbonInsertTab](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol-wpf/ribboninserttab/llms-full.txt), has both commands: - **Text Frame** in the **Text** group: **Insert Text Frame** turns the mouse pointer into a cross with which the user draws the frame, and ESC cancels. **Show Text Frame Marker Lines** outlines frames that have no border. - **Shape** in the **Illustrations** group: a gallery with the categories **Lines**, **Rectangles**, **Basic Shapes**, **Block Arrows**, **Equation Shapes**, **Flowchart**, **Stars and Banners** and **Callouts**, plus **New Drawing Canvas** for several shapes in one drawing and **Show Drawing Marker Lines**. A selected frame is formatted on the **Frame Formatting** tab, a [RibbonFrameLayoutTab](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol-wpf/ribbonframelayouttab/llms-full.txt): **Arrange**, **Size** and **Properties** as for images, and a **Frames & Background** group, with **Background Color**, **Transparency**, **Border Width** and **Border Color** for text frames and **Line Color**, **Background Color**, **Line Width**, **Transparency** and **Rotate** for drawings. [Connecting Ribbon Tabs in XAML](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/document-editor/ribbon-ui/ribbon-xaml/llms-full.txt) connects both tabs to the editor. The two marker line settings are the properties [TextFrameMarkerLines](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol-wpf/textcontrol/textframemarkerlines-property/llms-full.txt) and [DrawingMarkerLines](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol-wpf/textcontrol/drawingmarkerlines-property/llms-full.txt) of the `TextControl`. Without a ribbon, bind them to check boxes in *MainWindow.xaml*: ```xml ``` ### Insert and Edit Text Frames From Code The following handlers let the user draw a text frame, insert a note at the right edge of the current paragraph, open the text frame dialog box and write the date into the frame being edited: ```csharp using System; using System.Windows; using TXTextControl; namespace SampleApp; public partial class MainWindow : Window { private void DrawTextFrame_Click(object sender, RoutedEventArgs e) { // The user draws the frame with the mouse; ESC cancels TextFrame frame = new TextFrame(new System.Drawing.Size(2880, 1440)); textControl1.TextFrames.Add(frame, TextFrameInsertionMode.DisplaceText); textControl1.Focus(); } private void InsertNote_Click(object sender, RoutedEventArgs e) { // 3 x 1.5 inches in twips TextFrame note = new TextFrame(new System.Drawing.Size(4320, 2160)) { Name = "note", BackColor = System.Drawing.Color.LightYellow, BorderWidth = 20, BorderColor = System.Drawing.Color.DarkBlue, BorderStyle = FrameStyle.Double, InternalMargins = new int[] { 144, 144, 144, 144 } }; // Anchored at the right edge of the paragraph at the input position textControl1.TextFrames.Add(note, TXTextControl.HorizontalAlignment.Right, -1, TextFrameInsertionMode.DisplaceText); // The frame has a selection of its own note.Selection.Text = "Payment due within 14 days."; } private void FrameAttributes_Click(object sender, RoutedEventArgs e) { // A text frame the user has selected, or null if (textControl1.TextFrames.GetItem() != null) { textControl1.TextFrameAttributesDialog(); } } private void InsertDate_Click(object sender, RoutedEventArgs e) { // The text frame whose text the user is editing, or null TextFrame frame = textControl1.TextFrames.GetActivatedItem(); if (frame != null) { frame.Selection.Text = DateTime.Today.ToShortDateString(); } } } ``` The code works as follows: - The [TextFrame constructor](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol/textframe/constructor/llms-full.txt) takes a `System.Drawing.Size` in twips, and the colors of a text frame are `System.Drawing.Color` values, not WPF colors. - [TextFrameCollection.Add](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol/textframecollection/add-method/llms-full.txt) with only a [TextFrameInsertionMode](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol/textframeinsertionmode/enumeration/llms-full.txt) starts the mouse interface. `textControl1.Focus()` gives the editor the keyboard focus back after the button click, so that the user can draw right away. - `Add(frame, alignment, textPosition, insertionMode)` anchors the frame to the paragraph at the text position, `-1` for the input position, and `DisplaceText` lets the text flow around it. - [BackColor](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol/textframe/backcolor-property/llms-full.txt), [BorderWidth](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol/textframe/borderwidth-property/llms-full.txt), [BorderColor](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol/textframe/bordercolor-property/llms-full.txt), [BorderStyle](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol/textframe/borderstyle-property/llms-full.txt) and [InternalMargins](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol/textframe/internalmargins-property/llms-full.txt) set border, background and inner distances. - [TextFrameAttributesDialog](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol-wpf/textcontrol/textframeattributesdialog-method/llms-full.txt) opens the dialog box of the selected frame, with tabs for layout, size and distances, and border and background. [TextFrameActivated](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol-wpf/textcontrol/textframeactivated-event/llms-full.txt) occurs when a text frame receives the input position; declare it on the `WPF:TextControl` element like the other events on [Events](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/document-editor/events/llms-full.txt). ### Insert a Shape From Code A drawing is a [TXDrawingControl](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol-wpf-drawing/txdrawingcontrol/llms-full.txt) of the `TXTextControl.WPF.Drawing` namespace, which holds the shapes, inside a [DrawingFrame](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol-datavisualization/drawingframe/llms-full.txt) that places it in the document. [TextControl.Drawings](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol-wpf/textcontrol/drawings-property/llms-full.txt) returns the [DrawingCollection](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol-datavisualization/drawingcollection/llms-full.txt). ![Class diagram of the drawing classes: TextControl, WPF.TextControl and ServerTextControl with Drawings and the drawing events, DrawingCollection, DrawingFrame, TXDrawingControl, the shape collection and the Shape class.](https://docs.textcontrol.com/assets/img/tx-text-control-dotnet-wpf/drawings-class-diagram.743b394e.webp) The following handler creates a red donut with a yellow outline and lets the user draw its frame: ```csharp using System.Windows; using TXTextControl; using TXTextControl.DataVisualization; using TXTextControl.Drawing; using TXTextControl.WPF.Drawing; namespace SampleApp; public partial class MainWindow : Window { private void DrawDonut_Click(object sender, RoutedEventArgs e) { // A drawing control holds the shapes of one drawing TXDrawingControl drawing = new TXDrawingControl(); Shape donut = new Shape(ShapeType.Donut); donut.ShapeFill.Color = System.Drawing.Color.Red; donut.ShapeOutline.Color = System.Drawing.Color.Yellow; donut.ShapeOutline.Width = 200; // The shape fills the whole drawing drawing.Shapes.Add(donut, ShapeCollection.AddStyle.Fill); // The user draws the frame of the drawing with the mouse DrawingFrame frame = new DrawingFrame(drawing); textControl1.Drawings.Add(frame, FrameInsertionMode.DisplaceText); textControl1.Focus(); } } ``` The code works as follows: - `TXTextControl.WPF.Drawing.TXDrawingControl` is the WPF drawing control; the [Shape](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol-drawing/shape/llms-full.txt) class and [ShapeType](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol-drawing/shapetype/enumeration/llms-full.txt) come from `TXTextControl.Drawing` and are the same as in Windows Forms. The shape colors are `System.Drawing.Color` values. - [ShapeFill](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol-drawing/shape/shapefill-property/llms-full.txt) and [ShapeOutline](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol-drawing/shape/shapeoutline-property/llms-full.txt) set fill color, outline color and outline width. - [ShapeCollection.Add](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol-drawing/shapecollection/add-method/llms-full.txt) with `AddStyle.Fill` fits the shape to the drawing; with `MouseCreation`, the user draws it inside an activated drawing. - [DrawingCollection.Add](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol-datavisualization/drawingcollection/add-method/llms-full.txt) with only a [FrameInsertionMode](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol/frameinsertionmode/enumeration/llms-full.txt) lets the user draw the frame; `Add(frame, -1)` inserts it inline. A click on a drawing activates it for editing its shapes, and a click on its border selects it for moving and sizing. [DrawingCollection.GetActivatedItem](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol-datavisualization/drawingcollection/getactivateditem-method/llms-full.txt) returns the activated drawing, [DrawingFrame.Activate](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol-datavisualization/drawingframe/activate-method/llms-full.txt) activates one from code, and [DrawingActivated](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol-wpf/textcontrol/drawingactivated-event/llms-full.txt) reports it. [DrawingLayoutDialog](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol-wpf/textcontrol/drawinglayoutdialog-method/llms-full.txt) opens the dialog box of a selected drawing. Drawings are kept in DOCX and the TX Text Control format. The blog article [Inserting Shapes and Drawing Groups](https://www.textcontrol.com/blog/2020/07/24/inserting-shapes-and-drawing-groups/) builds groups of shapes, with Windows Forms code whose TX Text Control calls are the same in WPF apart from the drawing control. [Integrating WPF Barcodes and Drawings](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/integration/barcodes-drawings/llms-full.txt) covers the assemblies and namespaces. ### Find and Remove Frames `GetItem` with a name or an ID returns the text frame or drawing that has this [FrameBase.Name](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol/framebase/name-property/llms-full.txt) or [ID](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol/framebase/id-property/llms-full.txt), or `null`. [TextFrameCollection.Remove](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol/textframecollection/remove-method/llms-full.txt) and [DrawingCollection.Remove](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol-datavisualization/drawingcollection/remove-method/llms-full.txt) delete it. [TextControl.Frames](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol-wpf/textcontrol/frames-property/llms-full.txt) contains the images, text frames, barcodes and drawings together. ### Next Steps - [Images](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/document-editor/images/llms-full.txt): pictures, placed like frames. - [Charts and Barcodes](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/document-editor/charts-barcodes/llms-full.txt): barcodes in the WPF editor. - [Headers and Footers](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/document-editor/headers-footers/llms-full.txt): frames that repeat on every page. - [Images, Text Frames, and Shapes](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/document-processing/images-shapes/llms-full.txt): frames with `ServerTextControl`. --- ## Nearby - **Previous:** [Images](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/document-editor/images/llms-full.txt) - **Next:** [Charts and Barcodes](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/document-editor/charts-barcodes/llms-full.txt)