Graphic displays during runtime
- Last UpdatedJul 16, 2024
- 5 minute read
This section describes some typical graphic displays by configuring specific combinations of ContentPresenterApp properties. Each section shows an example screen shot of the ContentPresenterApp view port with specific combinations of property values.
List Graphics Horizontally and Vary the Number of Displayed Rows and Columns
The following examples show horizontal and scaled sequential lists of graphics when the number of displayed rows and columns vary.
Horizontal List With No Specified Rows or Columns
|
Properties |
Assigned Values |
|
Fill |
Horizontal |
|
View Mode |
ListContent |
|
Padding |
0,0,0,0 |
|
Horizontal Alignment |
Left |
|
Vertical Alignment |
Top |
|
Size Mode |
Scaled |
|
Display Rows |
0 |
|
Display Columns |
0 |
|
Stretch |
Disabled |
|
Fixed Width |
200 ignored because Size Mode is set to Scaled |
|
Fixed Height |
300 ignored because Size Mode is set to Scaled |
Horizontal List With Multiple Rows and Columns
|
Properties |
Assigned Values |
|
Fill |
Horizontal |
|
View Mode |
ListContent |
|
Padding |
0,0,0,0 |
|
Horizontal Alignment |
Left |
|
Vertical Alignment |
Top |
|
Size Mode |
Scaled |
|
Display Rows |
3 |
|
Display Columns |
4 |
|
Stretch |
Disabled |
|
Fixed Width |
200 ignored because Size Mode is set to Scaled |
|
Fixed Height |
300 ignored because Size Mode is set to Scaled |
Graphics are smaller because the view port shows four columns of cells specified by the Display Columns property.
List Graphics Vertically and Vary the Number of Displayed Rows and Columns
The following examples show vertical and scaled sequential lists of graphics when the number of displayed rows and columns vary.
Vertical List With No Specified Rows or Columns
|
Properties |
Assigned Values |
|
Fill |
Vertical |
|
View Mode |
ListContent |
|
Padding |
0,0,0,0 |
|
Horizontal Alignment |
Left |
|
Vertical Alignment |
Top |
|
Size Mode |
Scaled |
|
Display Rows |
0 |
|
Display Columns |
0 |
|
Stretch |
Disabled |
|
Fixed Width |
200 ignored because Size Mode is set to Scaled |
|
Fixed Height |
300 ignored because Size Mode is set to Scaled |
Vertical List With Multiple Rows and Columns
|
Properties |
Assigned Values |
|
Fill |
Vertical |
|
View Mode |
ListContent |
|
Padding |
0,0,0,0 |
|
Horizontal Alignment |
Left |
|
Vertical Alignment |
Top |
|
Size Mode |
Scaled |
|
Display Rows |
3 |
|
Display Columns |
4 |
|
Stretch |
Disabled |
|
Fixed Width |
200 ignore because Size Mode is set to Scaled |
|
Fixed Height |
300 ignore because Size Mode is set to Scaled |
Graphics are smaller because the view port shows three of cells specified by the Display Rows property.
Wrapped Horizontal List and Vary the Number of Display Rows and Columns
The following examples show wrapped and scaled horizontal lists of graphics when the number of displayed rows and columns vary.
Wrapped Horizontal List With No Specified Rows or Columns
|
Properties |
Assigned Values |
|
Fill |
Horizontal |
|
View Mode |
WrapContent |
|
Padding |
0,0,0,0 |
|
Horizontal Alignment |
Left |
|
Vertical Alignment |
Top |
|
Size Mode |
Scaled |
|
Display Rows |
0 |
|
Display Columns |
0 |
|
Stretch |
Disabled |
|
Fixed Width |
200 ignore because Size Mode is set to Scaled |
|
Fixed Height |
300 ignore because Size Mode is set to Scaled |
Wrapped Horizontal List With Multiple Rows and Columns
|
Properties |
Assigned Values |
|
Fill |
Horizontal |
|
View Mode |
WrapContent |
|
Padding |
0,0,0,0 |
|
Horizontal Alignment |
Left |
|
Vertical Alignment |
Top |
|
Size Mode |
Scaled |
|
Display Rows |
3 |
|
Display Columns |
4 |
|
Stretch |
Disabled |
|
Fixed Width |
200 ignore because Size Mode is set to Scaled |
|
Fixed Height |
300 ignore because Size Mode is set to Scaled |
Graphics are smaller because the view port window has been configured to show four columns and three rows of cells. Graphic size adjusts to the constraining horizontal or vertical dimension of a cell while maintaining its original aspect ratio.
Wrapped Vertical List and Vary the Number of Display Rows and Columns
The following examples show wrapped and scaled vertical lists of graphics when the number of displayed rows and columns vary.
Wrapped Vertical List With No Specified Rows or Columns
|
Properties |
Assigned Values |
|
Fill |
Vertical |
|
View Mode |
WrapContent |
|
Padding |
0,0,0,0 |
|
Horizontal Alignment |
Left |
|
Vertical Alignment |
Top |
|
Size Mode |
Scaled |
|
Display Rows |
0 |
|
Display Columns |
0 |
|
Stretch |
Disabled |
|
Fixed Width |
200 ignore because Size Mode is set to Scaled |
|
Fixed Height |
300 ignore because Size Mode is set to Scaled |
Wrapped Vertical List With Multiple Rows and Columns
|
Properties |
Assigned Values |
|
Fill |
Vertical |
|
View Mode |
WrapContent |
|
Padding |
0,0,0,0 |
|
Horizontal Alignment |
Left |
|
Vertical Alignment |
Top |
|
Size Mode |
Scaled |
|
Display Rows |
3 |
|
Display Columns |
4 |
|
Stretch |
Disabled |
|
Fixed Width |
200 ignore because Size Mode is set to Scaled |
|
Fixed Height |
300 ignore because Size Mode is set to Scaled |
Cells are listed in vertical order by four columns and three rows. Graphic size adjusts to the constraining horizontal or vertical dimension of a cell while maintaining its original aspect ratio.
Wrapped Horizontal List with Fixed Size Cells and Vary the Number of Rows and Columns
The following examples show wrapped and horizontal lists of graphics in fixed size cells when the number of displayed rows and columns vary.
Wrapped Horizontal List With a Fixed Cell Size and No Specified Rows or Columns
|
Properties |
Assigned Values |
|
Fill |
Horizontal |
|
View Mode |
WrapContent |
|
Padding |
0,0,0,0 |
|
Horizontal Alignment |
Left |
|
Vertical Alignment |
Top |
|
Size Mode |
Fixed |
|
Display Rows |
0 |
|
Display Columns |
0 |
|
Stretch |
Disabled |
|
Fixed Width |
200 |
|
Fixed Height |
300 |
View port cells are arranged horizontally. When the next cell cannot fit within the view port area, the horizontal list wraps to the next row. Users shows rows outside of the view port using the vertical scroll bar.
Wrapped Horizontal List With a Fixed Cell Size and Multiple Rows and Columns
|
Properties |
Assigned Values |
|
Fill |
Horizontal |
|
View Mode |
WrapContent |
|
Padding |
0,0,0,0 |
|
Horizontal Alignment |
Left |
|
Vertical Alignment |
Top |
|
Size Mode |
Fixed |
|
Display Rows |
3 |
|
Display Columns |
4 |
|
Stretch |
Disabled |
|
Fixed Width |
200 |
|
Fixed Height |
300 |
Graphics are placed in fixed size view port cells. Graphics are arranged in the view port horizontally in four columns and three rows.
Wrapped Horizontal List With Scaled Graphics in Stretch Mode
|
Properties |
Assigned Values |
|
Fill |
Horizontal |
|
View Mode |
WrapContent |
|
Padding |
0,0,0,0 |
|
Horizontal Alignment |
Left |
|
Vertical Alignment |
Top |
|
Size Mode |
Fixed |
|
Display Rows |
3 |
|
Display Columns |
4 |
|
Stretch |
Enabled |
|
Fixed Width |
200 |
|
Fixed Height |
300 |
Graphics are placed in fixed size view port cells and stretched in their non-constrained dimension to completely fill the cell. The aspect ratio of each graphic is ignored.