w3mentor
Learning web technologies simplified!
 
Home / C Sharp / WPF .Net / Archive by category 'Controls'

Controls

Flowdocument in WPF

The FlowDocument object in WPF can be thought of as a document with contents that can take up/flow to use the available space in the control. The FlowDocument shown below contains controls such as Paragraph, Table, List, Figure and Floater along with other UI elements.

      <FlowDocument FontFamily="Arial" FontSize="12" Background="Lime" Foreground=" Black" >
 
            <Paragraph>This is a
                <Run FontStyle="Italic" Foreground="Red" FontWeight="Bold" >simple</Run>
                Paragraph that contains a Run.
            </Paragraph>
 
            <Table BorderBrush="Black" BorderThickness="1" FontSize="12" >
                <Table.Columns>
                    <TableColumn Width=" 25*" />
                    <TableColumn Width=" 75*" />
                    </Table.Columns>
                    <TableRowGroup>
                        <TableRow Background=" LightGray" FontSize=" 15">
                            <TableCell>
                                <Paragraph>Item</Paragraph>
                            </TableCell>
                            <TableCell>
                                <Paragraph>Purpose</Paragraph>
                            </TableCell>
                        </TableRow>
                        <TableRow>
                            <TableCell>
                                <Paragraph>List</Paragraph>
                            </TableCell>
                            <TableCell>
                                <Paragraph>Display items in a list</Paragraph>
                            </TableCell>
                        </TableRow>
                    </TableRowGroup>
            </Table>
 
            <BlockUIContainer>
                <Button Name="btnBlockUI" Width="100" Height="50"
         Content="Block UI Button" />
            </BlockUIContainer>
 
            <Paragraph>
                Some inline stuff:
                <Button Name="btnAButton">A Button</Button>
                <TextBox>A Text Box</TextBox>
                <Ellipse Width="50" Height=" 30" 
         Fill="Yellow" Stroke="Red" StrokeThickness=" 5" />
            </Paragraph>
 
            <Paragraph>
                <Floater HorizontalAlignment=" Right">
                    <Paragraph BorderBrush=" Black" BorderThickness=" 1" >
                        <StackPanel Margin=" 2, 2, 2, 2">
                            <Ellipse Fill="Yellow" Width="40" Height=" 20"/>
                            <TextBlock Margin="5" FontStyle="Italic">
                        Figure 1. A floating Ellipse.</TextBlock>
                        </StackPanel>
                    </Paragraph>
                </Floater>
            </Paragraph>
 
            <Paragraph>
                A Floater holds content that can float to other locations.
            </Paragraph>
 
            <List>
                <ListItem>
                    <Paragraph>
                        Ellipse
                        <Ellipse Width=" 20" Height="20" Stroke="Black" StrokeThickness="1"/>
                    </Paragraph>
                </ListItem>
                <ListItem>
                    <Paragraph>
                        Triangle
                        <Polygon
                 Stroke=" Black" StrokeThickness=" 1"
                 Points=" 0, 0 20, 0 10, 20" />
                    </Paragraph>
                </ListItem>
            </List>
        </FlowDocument>

Example Output:

Bulletdecorator in WPF

The BulletDecorator control is used to display a single item and bullet in a bulleted list in WPF. The following xaml code shows how to draw a diamond shaped BulletDecorator next to a textblock.

<BulletDecorator>
    <BulletDecorator.Bullet>
        <Polygon Margin=” 2, 0, 0, 0” Points=”0, 5 5, 0 10, 5 5, 10” Fill=” Blue” />
    </BulletDecorator.Bullet>
    <TextBlock Margin=”10, 0, 0, 0” Text=”Bullet Point Text” />
</BulletDecorator>

Example output:

Image control in WPF

The image control is used to display various formats of images in WPF applications. The basic steps include adding the image control to the window/page and setting its source property. To adjust the dimensions of the image we can set the stretch and stretchdirection properties.

Stretch can be set to the following properties:
None – The picture is not stretched. It is displayed at its original size.
Fill – The picture is stretched to fill the Image control.
Uniform – The picture is uniformly stretched vertically and horizontally to fill the Image control.
UniformToFill – The picture is stretched by the same amount vertically and horizontally
until it completely flls the Image control. If the picture doesn’t have the same width-to-height
ratio as the Image control, then some of the picture will stick out past the edges of the control and will be clipped.

The StretchDirection determines which way the image could be stretched to fit the image control while using the stretch property. It takes the following values

UpOnly – The picture can only be stretched to make it larger.
DownOnly – The picture can only be shrunk to make it smaller.
Both – The picture can be stretched or shrunk.

<Image Width=”Auto” Height=”Auto”
 HorizontalAlignment=”Stretch” VerticalAlignment=”Stretch”
 Source=”myimage.jpg” Stretch=”UniformToFill” />

Latest Tutorials & Code Snippets

Reference Guides